当前位置：首页 > 网页特效 > 导航菜单

jquery分页插件am-pagination.js

分类：导航菜单日期：2024-05-14 点击(0) 评论(0)

简介

在页面中引入am-pagination.css和jquery、am-pagination.js文件，Bootstrap和amazeui文件为可选的。

```html
<link rel="stylesheet" href="../amazeui/dist/css/amazeui.flat.css"> //Or theme:'amazeui'  
<link rel="stylesheet" href="./dist/css/am-pagination.css"> //Or    //  
<link rel="stylesheet" href="../bootstrap/dist/css/bootstrap.css"> //Or theme:'bootstrap'  
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="/am-pagination.js"></script>       
```
##### HTML结构 
使用一个块级元素作为分页条的容器：

```html
<div id="ampagination-demo"></div>
```
#####  初始化插件
在页面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
        });
 });      
```

web299.com

jquery分页插件am-pagination.js

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果