很简洁的分页控件 适合MVC
2016-07-07 11:58
381 查看
<!DOCTYPE html> <html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>一个非常简单的jQuery分页插件</title> <style> *{ margin:0; padding:0; list-style:none;} a{ text-decoration:none;} a:hover{ text-decoration:none;} .tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;} .tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px; line-height: 25px; padding: 0 10px;border: 1px solid #ddd; margin: 0 2px;border-radius: 4px;vertical-align: middle;} .tcdPageCode a:hover{text-decoration: none;border: 1px solid #428bca;} .tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #428bca; border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;} .tcdPageCode span.disabled{ display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px; color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;} </style> </head> <body> <!-- 代码部分begin --> <div class="tcdPageCode"> </div> <pre> 调用方法: $(".tcdPageCode").createPage({ pageCount:10, current:1, backFn:function(p){ //单击回调方法,p是当前页码 } }); pageCount:总页数 current:当前页 </pre> </body> <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script> <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.page.js"></script> <script> $(".tcdPageCode").createPage({ pageCount:6, current:1, backFn:function(p){ console.log(p); } }); </script> <!-- 代码部分end --> </html>
相关文章推荐
- (C)位字段(bit-field)
- mac 安装tomcat8
- Object和Function
- 【Python】学习selenium自动化测试:操作浏览器
- 关于如何使用 chroot, 为程序设置新的执行环境chroot & schroot etc.(文件系统虚拟化)
- SAXParseException:cvc-elt.1:找不到元素“beans”的声明
- leetcode No31. Next Permutation
- $().click(function(){}) 不管用 live()替代品 append之后
- (C)位字段(bit-field)
- python 中颜色的表示
- 吐槽啊
- (C)非局部跳转语句(setjmp和longjmp)
- iOS ARC下OC对象和CF对象之间的桥接(bridge)
- html5页面简单判断当前有无网络
- 数据结构与算法简记:根据广义表构建二叉树
- js location使用范例
- 加入JNI文件需要注意的问题
- 手机站常用的基本css
- BZOJ1547 周末晚会
- Android支付宝和微信支付集成