时间:2021-07-01 10:21:17 帮助过:3人阅读
CSS
.pageplugin { display: inline-block; border: 1px solid #CDCDCD; border-radius: 3px; } .pageplugin a { cursor: pointer; display: block; float: left; width: 20px; height: 20px; outline: none; border-right: 1px solid #CDCDCD; border-left: 1px solid #CDCDCD; color: #767676; vertical-align: middle; text-align: center; text-decoration: none; font-weight: bold; font-size: 16px; font-family: Times, 'Times New Roman', Georgia, Palatino; background-color: #f7f7f7; /* ATTN: need a better font stack background-color: #f7f7f7; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f3f3f3), color-stop(100%, lightgrey)); background-image: -webkit-linear-gradient(#f3f3f3, lightgrey); background-image: linear-gradient(#f3f3f3, lightgrey); */} .pageplugin a:hover, .pageplugin a:focus, .pageplugin a:active { color:#0099CC; background-color: #cecece; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e4e4e4), color-stop(100%, #cecece)); background-image: -webkit-linear-gradient(#e4e4e4, #cecece); background-image: linear-gradient(#e4e4e4, #cecece); } .pageplugin a.disabled, .pageplugin a.disabled:hover, .pageplugin a.disabled:focus, .pageplugin a.disabled:active { background-color: #f3f3f3; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f3f3f3), color-stop(100%, lightgrey)); background-image: -webkit-linear-gradient(#f3f3f3, lightgrey); background-image: linear-gradient(#f3f3f3, lightgrey); color: #A8A8A8; cursor: default; } .pageplugin a:first-child { border: none; border-radius: 2px 0 0 2px; } .pageplugin a:last-child { border: none; border-radius: 0 2px 2px 0; } .pageplugin .present { float: left; margin: 0; padding: 0; width: 120px; height: 20px; outline: none; border: none; vertical-align: middle; text-align: center; }
jquery分页插件cypager
cypager是网友分享到JquerySchool网站上的一款作品,非常实用,经过测试,插件兼容 IE8+,Chrome,Firefox 浏览器,核心文件仅 5KB。。。
调用方式
由于是 jquery插件,所以在引人 cypager.min.js 之前,要引人 jquery.min.js 本人使用的是 1.7.2 版本的,低版本的没试过。
引入css :
引人js :
参数说明
pgerId //插件的ID 默认 : cy_pager
pg_size //每页显示记录数 默认:10条
pg_cur_count //当前页数(如果需要默认显示指定页面,则设置)
pg_total_count //总记录数
pg_nav_count //显示多少个导航数 默认:7个
pg_prev_name //上一页按钮名称(默认:PREV)
pg_next_name //下一页按钮名称 (默认:NEXT)
pg_call_fun(page_count) //回调函数,点击按钮执行
高效JQUERY分页插件源代码JQUERY.PAGER.JS
本文将给大家分享一个非常不错的分页插件、jQuery.pager.js、该插件的优点是可以内容索引、使用了jQuery、也同时调用了jquery.pager.js文件、分页都是基于Ajax的、当然、如果你不打算使用Ajax来实现分页的话、那么你最好不要使用本插件、若使用的话反而很麻烦、本插件主要是为使用Ajax技术交互的网站所准备、可以很方便的嵌入到网站系统中、实现Ajax分页功能、如果大家觉得这个效果不是很好看的话、可以自己重写分页按钮的样式哈
HTML代码很简单、只要准备一个用于分页代码的DIV就可以了
通过jQuery的方式调用即可