﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>C++博客-sunrise-随笔分类-前端设计</title><link>http://www.cppblog.com/sunrise/category/20420.html</link><description>每天不断学习，才能不断提升自己。

欢迎交流 QQ：703979707</description><language>zh-cn</language><lastBuildDate>Thu, 14 Mar 2013 07:04:19 GMT</lastBuildDate><pubDate>Thu, 14 Mar 2013 07:04:19 GMT</pubDate><ttl>60</ttl><item><title>jQuery插件QuickPaginate快速分页实现</title><link>http://www.cppblog.com/sunrise/archive/2013/03/14/198418.html</link><dc:creator>SunRise_at</dc:creator><author>SunRise_at</author><pubDate>Thu, 14 Mar 2013 06:54:00 GMT</pubDate><guid>http://www.cppblog.com/sunrise/archive/2013/03/14/198418.html</guid><wfw:comment>http://www.cppblog.com/sunrise/comments/198418.html</wfw:comment><comments>http://www.cppblog.com/sunrise/archive/2013/03/14/198418.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.cppblog.com/sunrise/comments/commentRss/198418.html</wfw:commentRss><trackback:ping>http://www.cppblog.com/sunrise/services/trackbacks/198418.html</trackback:ping><description><![CDATA[<p style="margin: 0px; padding: 0px; color: #454545; font-family: tahoma, helvetica, arial; background-color: #ffffff;">介绍一个分页插件，那么什么叫QuickPaginate快速分页，这个插件实现就是将需要显示的内容用分页的方法显示，但不是真正意义上的分页， 因为QuickPaginate快速分页不需要与服务器端交互，所有的内容已经全部输送到客户端，每次显示部分信息，用分页的形式进行浏览，效果图如下：<br /><br /><strong>使用说明</strong><br />一，需要<a href="http://designcss.org/www.jquery.com" target="_blank" style="color: #1e375a;">jQuery库文件</a>和<a href="http://plugins.jquery.com/project/quick_paginate" target="_blank" style="color: #1e375a;">QuickPaginate库文件</a><br />二，可自定义分页CSS显示效果，如：qp_prev和qp_next</p><p style="margin: 0px; padding: 0px; color: #454545; font-family: tahoma, helvetica, arial; background-color: #ffffff;"><strong>使用实例</strong><br />一，包含文件部分</p><ol style="margin: 0px; padding: 0px; list-style: none; color: #454545; font-family: tahoma, helvetica, arial; background-color: #ffffff;"><li style="margin: 0px; padding: 0px;">&lt;script src="jquery.js" type="text/javascript" &gt;&lt;/script&gt;</li><li style="margin: 0px; padding: 0px;">&lt;script src="jquery.quickpaginate.js" type="text/javascript" &gt;&lt;/script&gt;</li></ol><p style="margin: 0px; padding: 0px; color: #454545; font-family: tahoma, helvetica, arial; background-color: #ffffff;">二，HTML部分<br />(1)jQuery插件QuickPaginate实现<strong>文本</strong>分页功能</p><ol style="margin: 0px; padding: 0px; list-style: none; color: #454545; font-family: tahoma, helvetica, arial; background-color: #ffffff;"><li style="margin: 0px; padding: 0px;">&lt;ul id="<strong>biuuu_city_list</strong>"&gt;</li><li style="margin: 0px; padding: 0px;">&lt;li&gt;北京&lt;/li&gt;</li><li style="margin: 0px; padding: 0px;">&lt;li&gt;上海&lt;/li&gt;</li><li style="margin: 0px; padding: 0px;">&lt;li&gt;广州&lt;/li&gt;</li><li style="margin: 0px; padding: 0px;">&lt;li&gt;杭州&lt;/li&gt;</li><li style="margin: 0px; padding: 0px;">&lt;li&gt;长沙&lt;/li&gt;</li><li style="margin: 0px; padding: 0px;">&lt;li&gt;合肥&lt;/li&gt;</li><li style="margin: 0px; padding: 0px;">&lt;li&gt;宁夏&lt;/li&gt;</li><li style="margin: 0px; padding: 0px;">&lt;li&gt;成都&lt;/li&gt;</li><li style="margin: 0px; padding: 0px;">&lt;li&gt;西安&lt;/li&gt;</li><li style="margin: 0px; padding: 0px;">&lt;li&gt;南昌&lt;/li&gt;</li><li style="margin: 0px; padding: 0px;">&lt;/ul&gt;</li><li style="margin: 0px; padding: 0px;">&lt;div id="<strong>biuuu_city</strong>"&gt;&lt;/div&gt;</li></ol><p style="margin: 0px; padding: 0px; color: #454545; font-family: tahoma, helvetica, arial; background-color: #ffffff;">其中ID为biuuu_city_list的DIV是要实现分页的内容，ID为biuuu_city是显示分页内容，具体看效果图</p><p style="margin: 0px; padding: 0px; color: #454545; font-family: tahoma, helvetica, arial; background-color: #ffffff;">(2)jQuery插件QuickPaginate实现<strong>图片</strong>分页功能</p><ol style="margin: 0px; padding: 0px; list-style: none; color: #454545; font-family: tahoma, helvetica, arial; background-color: #ffffff;"><li style="margin: 0px; padding: 0px;">&lt;div id="<strong>images</strong>"&gt;</li><li style="margin: 0px; padding: 0px;">&lt;img src="demo_images/demo1.jpg" width="200" height="133" alt="biuuu1" /&gt;</li><li style="margin: 0px; padding: 0px;">&lt;img src="demo_images/demo2.jpg" width="200" height="133" alt="biuuu2" /&gt;</li><li style="margin: 0px; padding: 0px;">&lt;img src="demo_images/demo3.jpg" width="200" height="133" alt="biuuu3" /&gt;</li><li style="margin: 0px; padding: 0px;">&lt;/div&gt;</li><li style="margin: 0px; padding: 0px;">&lt;div id="<strong>images_counter</strong>"&gt;&lt;/div&gt;</li></ol><p style="margin: 0px; padding: 0px; color: #454545; font-family: tahoma, helvetica, arial; background-color: #ffffff;">三，javascript部分(调用jQuery插件QuickPaginate)</p><ol style="margin: 0px; padding: 0px; list-style: none; color: #454545; font-family: tahoma, helvetica, arial; background-color: #ffffff;"><li style="margin: 0px; padding: 0px;">&lt;script type="text/javascript"&gt;</li><li style="margin: 0px; padding: 0px;">$(function(){</li><li style="margin: 0px; padding: 0px;">$("#<strong>biuuu_city_list li</strong>").<strong>quickpaginate</strong>({&nbsp;<strong>perpage</strong>: 4,&nbsp;<strong>pager&nbsp;</strong>: $("#<strong>biuuu_city</strong>") });</li><li style="margin: 0px; padding: 0px;">});</li><li style="margin: 0px; padding: 0px;">$(function(){</li><li style="margin: 0px; padding: 0px;">$("<strong>#images img</strong>").<strong>quickpaginate</strong>({&nbsp;<strong>perpage</strong>: 1,&nbsp;<strong>showcounter</strong>: false,&nbsp;<strong>pager&nbsp;</strong>: $("<strong>#images_counter</strong>") });</li><li style="margin: 0px; padding: 0px;">});</li><li style="margin: 0px; padding: 0px;">&lt;/script&gt;</li></ol><p style="margin: 0px; padding: 0px; color: #454545; font-family: tahoma, helvetica, arial; background-color: #ffffff;"><strong>jQuery插件QuickPaginate参数详解</strong><br />perpage表示每页显示数，默认值为6，如上文本实例每页显示4个城市，图片实例每页显示1张图片<br />pager表示QuickPaginate生成分页HTML代码显示的对象，默认为null，如上：$("#biuuu_city")和$("#images_counter")<br />showcounter表示是否显示统计，默认为true<br />prev表示上一页CSS样式名，默认为qp_next，具体请看QuickPaginate生成的代码图<br />next表示下一页CSS样式名，默认为qp_prev<br />pagenumber表示当前页CSS样式名，默认为qp_pagenumber<br />totalnumber表示总页数CSS样式名，默认为qp_totalnumber<br />counter表示统计CSS样式名，默认为qp_counter</p><p style="margin: 0px; padding: 0px; color: #454545; font-family: tahoma, helvetica, arial; background-color: #ffffff;">注意事项<br />注意默认的QuickPaginate是UTF8编码，同时需要修改部分QuickPaginate的JS库代码，如将prev修改为中文上一页，next修改为中文下一页，其实就是分页样式，上面的参数中大部分都是定义某个部分的样式，因为样式也是非常重要的。</p><p style="margin: 0px; padding: 0px; color: #454545; font-family: tahoma, helvetica, arial; background-color: #ffffff;">以上实例可知使用jQuery插件QuickPaginate快速分页非常简单，只需要指定内容，指定每页显示数，显示样式，即可实现快速分页功能，在实际应用中，可对菜单、图片等进行分页，非常具有实用性，值得推荐。</p><p style="margin: 0px; padding: 0px; color: #454545; font-family: tahoma, helvetica, arial; background-color: #ffffff;"><a href="http://projects.allmarkedup.com/jquery_quick_paginate/" target="_blank" style="color: #1e375a;">点我下载jQuery插件QuickPaginate快速分页程序</a><br /><a href="http://projects.allmarkedup.com/jquery_quick_paginate/demo.html" target="_blank" style="color: #1e375a;">点我查看jQuery插件QuickPaginate快速分面演示</a></p><img src ="http://www.cppblog.com/sunrise/aggbug/198418.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cppblog.com/sunrise/" target="_blank">SunRise_at</a> 2013-03-14 14:54 <a href="http://www.cppblog.com/sunrise/archive/2013/03/14/198418.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>