当前位置导航:炫浪网>>网络学院>>网页制作>>PHP教程

PHP+MySQL+jQuery打造自己的微博程序

  我们在QQ个人中心或者新浪微博等网站上可以看到一个发表话题的应用。该应用实现了即时统计输入字数,并且通过Ajax与后台交互,将输入内容插入到话题列表中。本文讲解第一部分jQuery实现前端交互操作。

  

图例

  XHTML代码

  1. <form id="myform" action="say.php" method="post">        
  2.     <h3><span class="counter">140</span>说说你正在做什么...</h3>        
  3.     <textarea name="saytxt" id="saytxt" class="input" rows="2" cols="40"></textarea>        
  4.     <p>           
  5.        <input type="image" src="images/btn.gif?http://www.xvna.com" class="sub_btn" alt="发布" />           
  6.        <span id="msg"></span>        
  7.     </p>     
  8. </form>     
  9. <div class="clear"></div>     
  10. <div id="saywrap">         
  11.      <div class="saylist">            
  12.         <a href="#"><img src="images/user.gif?http://www.xvna.com" alt="" /></a>            
  13.         <div class="saytxt">               
  14.             <p><strong><a href="#">Demo</a></strong>发布的内容...</p>                
  15.             <div class="date"></div>            
  16.         </div>            
  17.         <div class="clear"></div>         
  18.      </div>     
  19. </div>   

  XHTML是一个表单,里面有输入框textarea,发布按钮,还有一个统计输入字数的span#counter,和信息提示span#msg,在没有输入的情况下就提交则会提示用户要求输入内容。

  CSS代码

  1. h3{height:32px; line-height:32px; font-size:18px}     
  2. h3 span{float:right; font-size:32px; font-family:Georgia,serif; color:#ccc; overflow:hidden}     
  3. .input{width:594px; height:58px; margin:5px 0 10px 0; padding:4px 2px;      
  4. border:1px solid #aaa; font-size:12px; line-height:18px; overflow:hidden}     
  5. .sub_btn{float:right; width:94px; height:28px;}     
  6. #msg{color:#f30}     
  7. .clear{clear:both}     
  8. .saylist{margin:8px auto; padding:4px 0; border-bottom:1px dotted #d3d3d3}     
  9. .saylist img{float:left; width:50px; margin:4px}     
  10. .saytxt{float:right; width:530px; overflow:hidden}     
  11. .saytxt p{line-height:18px}     
  12. .saytxt p strong{margin-right:6px}     
  13. .date{color:#999}    

  jQuery

  先引入jquery库和global.js文件:

  1. <script type="text/javascript" src="js/jquery.js"></script> 
  2.  
  3. <script type="text/javascript" src="js/global.js"></script> 

  global.js要做的事有:

  1、用户输入、鼠标离开输入框时,统计输入的字符数,并根据输入字数的不同而输出不同的样式(字体颜色)显示在页面上。

  2、处理提交数据:当点击“发布”按钮时,显示等待图片,通过ajax想后台提交输入的数据,等待后台处理,并将处理结果输出给前端页面。

  具体代码如下:

  1. function recount(){         
  2.    var maxlen=140;         
  3.    var current = maxlen-$('#saytxt').val().length;         
  4.    $('.counter').html(current);          
  5.    
  6.    if(current<1 || current>maxlen){             
  7.        $('.counter').css('color','#D40D12');             
  8.        $('input.sub_btn').attr('disabled','disabled');         
  9.    }         
  10.    else             
  11.       $('input.sub_btn').removeAttr('disabled');          
  12.    if(current<10)             
  13.       $('.counter').css('color','#D40D12');          
  14.    else if(current<20)             
  15.       $('.counter').css('color','#5C0002');          
  16.    else             
  17.       $('.counter').css('color','#cccccc');      
  18. }   

  函数recount()完成了输入字符的统计,并根据输入的字符数,显示不同的字体颜色。

  1. $(function(){         
  2.    $('#saytxt').bind("blur focus keydown keypress keyup", function(){             
  3.        recount();         
  4.    });         
  5.    $("#myform").submit(function(){             
  6.        var saytxt = $("#saytxt").val();             
  7.        if(saytxt==""){                 
  8.              $("#msg").show().html("你总得说点什么吧.").fadeOut(1200);;                 
  9.              return false;             
  10.        }             
  11.        $('.counter').html('<img style="padding:8px" src="images/load.gif?http://www.xvna.com" alt="正在处理..." />');             
  12.        $.ajax({                
  13.              type: "POST",                
  14.              url: "submit.php",                
  15.              data:"saytxt="+saytxt,                
  16.              dataType: "html",                
  17.              success: function(msg){                   
  18.                  if(parseInt(msg)!=0){                      
  19.                     $('#saywrap').prepend(msg);                      
  20.                     $('#saytxt').val('');                      
  21.                     recount();                  
  22.                  }               
  23.         }             
  24.     });             
  25.     return false;         
  26.    });     
  27. });   

  提交数据给后台后,由submit.php进行处理。关于jQuery部分就到这里,后续会有关于后台的处理程序,敬请关注。

相关内容
赞助商链接