jQuery基于EasyHelper分页插件.zip资源-CSDN文库

共6个文件

js：4个

html：1个

css：1个

版权申诉

jquery代码

jquery特效

jquery插件

96 浏览量 2023-09-22 00:15:06 上传评论收藏 73KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery基于EasyHelper分页插件.zip （6个子文件）

easyhelper.min.js 53KB

es6-shim.min.js 49KB

jquery.min.js 85KB

jquery.transit.min.js 7KB

css

easyhelper.min.css 35KB

index.html 3KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>jQuery基于EasyHelper分页插件</title> <link rel="stylesheet" href="css/easyhelper.min.css"> <style> .title { text-align: center; font-size: 24px; margin-top: 50px; } .content { margin: 30px auto; width: 1000px; height: 409px; border: #dfdfdf solid 1px; overflow: hidden; } .content li { display: block; height: 40px; line-height: 40px; text-align: center; font-size: 14px; border-bottom: #e8e8e8 solid 1px; } .page { text-align: center; margin-bottom: 200px; } </style> </head> <body><script src="/demos/googlegg.js"></script> <p class="title">基础版分页</p> <div class="content"> <ul> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> </div> <div class="page" id="page-1"></div> <p class="title">显示总数据量</p> <div class="content"> <ul> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> </div> <div class="page" id="page-2"></div> <p class="title">显示总数据量和跳转快捷方式</p> <div class="content"> <ul> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> </div> <div class="page" id="page-3"></div> <p class="title">默认处于指定页码</p> <div class="content"> <ul> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> </div> <div class="page" id="page-4"></div> <script src="js/jquery.min.js"></script> <script src="js/jquery.transit.min.js"></script> <script src="js/es6-shim.min.js"></script> <script src="js/easyhelper.min.js"></script> <script> // 本地模拟的内容生成函数 var $content = $( ".content" ); function createContent ( i, index ) { $content.eq( index ).empty().html( ('<li>' + i + '</li>').repeat(10) ); } // 调用分页功能 [ 基础版 ] Helper.ui.page("#page-1", { total: 2000, pageSize: 10, change: function ( i ) { createContent( i, 0 ); } }); Helper.ui.page("#page-2", { total: 2000, pageSize: 10, showTotal: true, change: function ( i ) { createContent( i, 1 ); } }); Helper.ui.page("#page-3", { total: 2000, pageSize: 10, showTotal: true, showTo: true, change: function ( i ) { createContent( i, 2 ); } }); Helper.ui.page("#page-4", { total: 2000, pageSize: 10, showTotal: true, showTo: true, currentPage: 25, change: function ( i ) { createContent( i, 3 ); } }); </script> <div style="text-align:center;margin:-100px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> <p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉