PHP+MySQL+jQuery实现发布微博程序——jQuery篇

开发 开发工具 前端
在微博网站可以看到一个发表话题的应用,文章将介绍如何简易的实现一个微博话题发表程序——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" 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" 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. <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" 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部分就到这里,后续会有关于后台的处理程序,敬请关注。

【编辑推荐】

  1. jQuery核心部分原理的模拟代码
  2. jQuery应用程序性能指标和调优
  3. jQuery***实践:精妙的自定义事件
  4. Django创始人:从技术工艺上考量jQuery
  5. 抛砖引玉 自定义jQuery扩展接口
责任编辑:王晓东 来源: helloweba.com
相关推荐

2010-10-27 10:02:36

PHP

2011-03-23 10:55:55

PHPMySQLjQuery

2011-05-18 13:43:52

jQueryAjaxPHP

2010-12-28 13:44:12

PHPXMLjQuery

2013-07-10 14:15:38

php新浪微博

2013-07-29 14:28:43

JQueryJQuery实现分页分页程序代码

2011-06-17 10:11:01

jQueryPHP

2017-10-11 18:17:06

大数据数据可视化前后端

2011-09-22 15:15:40

2011-05-18 13:28:46

jQueryPHPAJAX

2013-03-11 10:21:45

jQueryjQuery 2.0

2012-06-29 10:20:55

jQuery

2015-04-16 10:35:08

微博微博如何实现

2013-12-02 15:25:38

jQuery插件

2012-06-15 11:32:19

ibmdw

2011-04-01 11:13:57

jQuery

2012-04-17 22:43:46

jQuery Mobi

2012-02-08 17:01:36

2022-09-28 08:05:37

PythonGUI程序

2023-10-30 09:38:12

GUI程序接口方法
点赞
收藏

51CTO技术栈公众号