jQuery仿淘宝分页插件(原创)

所属分类： JQ特效导航分页

查看演示立即下载

插件描述：根据淘宝分页样式简洁美观功能全面兼容性好易用性好维护简单多个分页互不干扰的分页插件

更新时间：2018/11/8 下午2:44:43

更新说明：

1, 新增不合法页面值规避机制,输入页码小于1,会默认跳转到第1页,页码超过分页总数,默认跳转到最后一页;其他不合法字段,如文字等,都会跳转到第1页,具体逻辑,各位下载后可自行更改.

2, 分页内容的加载方法更改,改由调用时传入

3, 调用时需传递分页内容加载方法,如:

var obj = {
    obj_box: '.class/#id...', //翻页容器(css选择器均可)
    total_item: '自然数,必填', //条目总数
    per_num: '自然数,选填,默认10', //每页条目数
    current_page: '自然数,选填,默认1', //当前页
    change_content: function(per_num, current_page) {
        //内容加载方法,可参考示例
    }
};
page_ctrl(obj); //调用分页插件

发布时间:2018-9-12 8:34

插件使用(注意引入脚本路径)

举例说明:

1,html中引入分页样式文件

1	`<link` `rel="stylesheet"` `href="css/toPage.css">`

2,指定分页容器()数量不限,不同容器中的分页互不影响)

<!--分页容器_1-->
<div ></div>
<!--分页容器_2-->
<div ></div>
......

3,引入必要js

<!--先引入jquery-->
<script src="/"></script>
<!--再引入toPage.js-->
<script src="js/toPage.js"></script>

4,最后调用即可

 /*容器1参数*/
 var obj_1 = {
     obj_box: '.page_1', //翻页容器
     total_item: 72 //条目总数
     /*per_num:10,//每页条目数
     current_page:8//当前页*/
 };
 /*容器2参数*/
 var obj_2 = {
     obj_box: '.page_2', //翻页容器
     total_item: 372, //条目总数
     per_num: 20, //每页条目数
     current_page: 8 //当前页
 };
 /*调用分页方法,初始化数据*/
 page_ctrl(obj_1);
 page_ctrl(obj_2);

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jquery周日历展示可选择
下一个特效： jQuery年月日期区间选择