web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
导航菜单
jquery分页插件am-pagination.js
分类:
导航菜单
日期:
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
在页面中引入am-pagination.css和jquery、am-pagination.js文件,Bootstrap和amazeui文件为可选的。 ```html
//Or theme:'amazeui'
//Or //
//Or theme:'bootstrap' ``` ##### HTML结构 使用一个块级元素作为分页条的容器: ```html
``` ##### 初始化插件 在页面DOM元素加载完毕之后,通过pagination()方法来初始化该jquery分页插件。 ```html var pager = jQuery('#ampagination-demo').pagination({ // 配置参数 }); ``` ##### 配置参数 该jquery分页插件的可用配置参数如下: ```html var pagerOpts={ maxSize: 7, // Limit number for pagination size. default:7 totals: 100, //Total number of items in all pages. page: 1, //select page index 1....total page pageSize: 10, //Maximum number of items per page. A value less than one indicates all items on one page. default :10 lastText: '»»', //Text for Last button. default: '»»' firstText: '««', //Text for First button. default: '««' prevText: '«',//« //Text for Previous button. default:'«' nextText: '»', //Text for next button. default:'»' rotate: true,//Whether to keep current page in the middle of the visible ones default:true directionLinks: true,// Whether to display Previous / Next buttons. default:true boundaryLinks: true,// Whether to display first / last buttons. default:true theme:'', // 'bootstrap' or 'amazeui' defalut:'' default ui only modify background color from bootstrap pagination btnSize:'' // 'sm' or 'lg' defalut : '' }; ``` ##### 事件 可以为分页条绑定事件。 ```html var pger =jQuery('#ampager') .pagination(pagerOpts) .onChangePage(function(e){ console.info('pager bind envent :selected page:'+e.page+' current pageSize:'+e.pageSize+' number of items'+e.totals); }); // 或者 jQuery('#ampager').on('am.pagination.change',function(e){ console.info('jquery bind event :selected page:'+e.page+' current pageSize:'+e.pageSize+' number of items'+e.totals); }); ``` 也可以动态的改变分页效果。 ```html jQuery('.rderch').on('click',function(){ var rdrOpts={ totals:100,/*optional*/ //default:current totals pageSize:10,/*optional*/ //default:current pageSize page:2/*optional*/ //default:current selected page } pger.render(rdrOpts); }); jQuery('.newch').on('click',function(){ jQuery('#ampager').pagination({ page:5 }); }); ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告