|
|
51CTO旗下网站
|
|
移动端

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

在微博网站可以看到一个发表话题的应用,文章将介绍如何简易的实现一个微博话题发表程序——jQuery篇,后续还会有关于后台处理程序的讲解。

作者:月光光来源:helloweba.com|2010-10-25 10:07

我们在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扩展接口
【责任编辑:王晓东 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

16招轻松掌握PPT技巧

16招轻松掌握PPT技巧

GET职场加薪技能
共16章 | 晒书包

276人订阅学习

20个局域网建设改造案例

20个局域网建设改造案例

网络搭建技巧
共20章 | 捷哥CCIE

643人订阅学习

WOT2019全球人工智能技术峰会

WOT2019全球人工智能技术峰会

通用技术、应用领域、企业赋能三大章节,13大技术专场,60+国内外一线人工智能精英大咖站台,分享人工智能的平台工具、算法模型、语音视觉等技术主题,助力人工智能落地。
共50章 | WOT峰会

0人订阅学习

读 书 +更多

Java程序员面试宝典

本书是程序员面试宝典系列中的一册,也是上一本《程序员面试宝典》的姊妹书。本书对程序设计面试中Java常见的题型和常用解答技巧进行了介绍...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO播客