JQuery插件使用小结

         在前台对数据的验证处理，Jquery起着非常强大的作用。首先Jquery是对JS的代码的封装，相当于我们前台的框架，但是它只是一个基础的js框架，能够实现一些简单的功能，而对于一些比较复杂的功能，我们拿它来实现就非常麻烦了。但是不要着急，JQeury插件可以给我们解决很多问题，而且更重要的是使用非常简单。简单总结一下，使用过的JQuery插件。

         一，Jquery.treeview:

       见名之意，就是将页面的数据以树的形式展现出来。和上篇博客中的dhtmlXtree不同的是，它是将html文件中的数据进行显示，而html文件主要是用UL和li进行嵌套数据。看一下html如何存储数据：

[html] view plaincopyprint?

1. <ul id="browser" class="filetree">  

2.         <li class="folder"><span class="folder">流程管理引擎系统</span>  

3.             <ul>  

4.                 <li class="closed"><span class="folder">故障管理</span>  

5.                     <ul>  

6.                         <li><span class="file"><a href="troubleTicket/index.html" target="workareaFrame">故障单维护</a></span></li>  

7.                         <li><span class="file"><a href="troubleTicket/approving.html" target="workareaFrame">待审故障单</a></span></li>  

8.                         <li><span class="file"><a href="troubleTicket/approved.html" target="workareaFrame">已审故障单</a></span></li>  

9.                         <li><span class="file"><a href="troubleTicket/archive.html" target="workareaFrame">归档故障单</a></span></li>  

10.                     </ul>  

11.                 </li>  

12.             </ul>  

13.         </li>  

14.     </ul>  

         页面中也如Jquery.treeview的js代码和对应的css文件，然后进行这样简单Jquery代码的操作就可以实现了：

[javascript] view plaincopyprint?

1. $(document).ready(function(){  

2.     $("#browser").treeview();  

3. });  

            这样就实现了将数据以树的形式展示了。当然如果我们需要将数据库中的动态数据用这种方法进行显示的话，我们需要在后台利用字符串进行拼接成这个格式的html文件，然后进行获取显示即可，其实和dhtmlxTree的使用方法还是非常类似的，只不过实现的方式不同。

 

         二，Jquery.form

       这个Jquery插件是为了解决Ajax获取页面数据麻烦而提供的。常规我们通过Form进行表单的提交，然后将需要提交的数据提供name的属性，就可以通过struts2等MVC流程框架进行获取，这样就不需要我们进行手动获取了。而Jquery.form正是弥补Ajax异步通讯的不足的。这里在我的前边博客中写到过JQuery中Ajax的操作

 

        三，jquery.pagination

                 这个是用来辅助我们进行分

页的Jquery插件，可以提供类似于百度查询的分页信息，看这张图，感觉还是非常实用的。

 

         看一下如何使用吧，首先还是引入相关的js代码，然后在网页中对应的位置写入显示分页信息的div块：<divid="Pagination"></div>，然后就是我们的js代码的编写了：

[javascript] view plaincopyprint?

1. //在页面中生成分页栏  

2.          $("#Pagination").pagination(result.totalsize, {  

3.              callback:pageQuery,// 回调方法分页查询的函数，上边的result.totalsize，为总共的页数  

4.              items_per_page:pageSize, // 每页显示数据条数  

5.              prev_text : "上一页",  

6.              next_text : "下一页",  

7.              link_to : "javascript:void(0)",//提供一个可以点击的按钮  

8.              current_page :pageIndex  //当前页码索引  

9.          });  

          当然这是最简单的分页信息的查询，更多的信息还是模仿插件提供的例子进行编写即可。

 

       四，jquery.autocomplete

               这个是用来根据数据库的信息进行自动补全的插件。看看百度等很多浏览器，当我们输入我们想要的查询的信息时，随着输入字符的不断增加，提示的信息也在不断的变化着，这个插件也就可以帮助我们实现这样的功能。

            实现原理：是通过将输入的字符传入后台进行（前）模糊匹配查询，将查询出来的数据进行提示，然后完成自动补全功能。当然后台查询出来的数据我们需要进行一定格式的转换，可以模仿插件中的例子，这里看一下前台的js代码的处理吧：

[javascript] view plaincopyprint?

1.           //指定根据输入内容进行模糊查询的action路径  

2.   $("#orgCode").autocomplete( "/org/loadOrgByCode.action", {  

3. cellSeparator: "|",//根据此进行拆分  

4. lineSeparator: "\n",  

5. minChars: 2,//至少输入两个字符才会进行自动匹配  

6. maxItemsToShow: 10,//一页最多显示10条数据  

7. formatItem: function(row) {//提示的格式  

8.     //alert(row[0] + ", " + row[1] + "," + row[2] + ", " + row[3]);  

9.     return "代码->" + row[0] + " 名称->" + row[1] + " 类型->" + row[2];  

10. },  

11. onItemSelect: function(li) {//将提示的内容补全到文本框中  

12.     $("#orgName").val(li.extra[0]);  

13.     $("#orgType").val(li.extra[1]);  

14.     $("#orgId").val(li.extra[2]);  

15. }  

16. );  

          五，jquery.ui

            这是一个非常强大的Jquery插件，它能够实现很多特效功能例如自动补全，就像上边的Jquery.autocomplete,tabs选项卡风格的功能，日历的功能……这里简单看一下选项卡和日历的实现。

           1，选项卡，首先在页面中提供这样的html代码，

[html] view plaincopyprint?

1. <div id="tabs">  

2.     <ul>  

3.         <li><a href="#tabs-1">用户信息</a></li>  

4.         <li><a href="#tabs-2">许可信息</a></li>  

5.     </ul>  

6.     <div id="tabs-1" style="background:#FFFFFF" >  

7.          </div>  

8.     <div id="tabs-2"  style="background:#FFFFFF">  

9.     </div>  

10.   

11. t;/div>  

              引入相关的js代码后，在script标签编写很简单的代码就可以实现了：

[javascript] view plaincopyprint?

1. $(function(){  

2.     $('#tabs').tabs();  

3. });  

          2，日历控件的简单使用，当单机某个文本框时，弹出日历来供我们来选择，还是非常不错的：

[javascript] view plaincopyprint?

1. var cfg = {  

2.       "dateFormat" : "yy-mm-dd",//日期的格式  

3.        changeMonth: true,  

4.        changeYear: true,  

5.           showSecond: true,  

6.           timeFormat: 'hh:mm:ss'  

7.    }  

8.   

9. ("#expireTime").datetimepicker(cfg);//设定指定的文本框单击出来日历控件  

          Jquery ui，这是用了几个简单的功能，就感觉非常强大，非常实用了，更多的Jquery ui的知识，可以到官网上查看各种资料，包括API文档，和一些常用例子，照猫画虎还是非常重要的：http://api.jqueryui.com/          当然了，都是英文的，但是确实最好的资料来源。

 

          综上为Jquery一些插件的使用，虽然不多，但是有代表性，通过使用一些插件的经验，来学会学习使用插件是最重要的。IT这个行业是个飞速发展的行业，要想在这个行业中处于不被落下的地步，需要我们不断的学习，当然了，学习能力就体现的非常重要了。总而言之，不要怕遇见新东西，新的东西来了，证明自己要提高了……………

原文链接地址：http://blog.csdn.net/liujiahan629629/article/details/22901047

转载于:https://my.oschina.net/u/2012346/blog/323662