Pager - 分页器控件

pager控件,此控件是ui控件,已经生成了相关的html结构,你需要将其添加到dom中的任何位置,pager将自动生效,传入clazz参数来定制你的分页器

如:

分页器控件

Allocate

ui pager控件所在脚本 {lib}ui/pager/pager.js

页面结构如下:

<html>
    <body>
        <div id="pager"></div>
    </body>
</html>

简单调用实现如下:

var f = function(){
    var _  = NEJ.P,
        _e = _('nej.e'),
        _tu = _('t.u');
        _p = _('nej.ui');
        _v = _('nej.v')

    var _pagerInfo = _e._$get("pagerInfo")
    // 初始化 简单 pager
    var _pager = _p._$$Pager._$allocate({
      parent:_e._$get("pager"),
      // 初始化当前页
      index:3,
      // 初始化总页数
      total:12,
      // 传入自定义的样式
      clazz:"pager1",
      /**
       * [onchange description]
       * @param  {Object} _info 每次点击分页器都会触发
       *         _info 中包含:
       *               index    [Number]   - 当前页码
       *               last     [Number]   - 最近一次触发页
       *               total    [Function] -  总页码
       * @return {[type]}
       */
      onchange:function(_info){
        _pagerInfo.innerHTML = "当前页码:"+ _info.index +"  最近一次触发页:" +(_info.last?_info.last:"没有")+
             "  总页码:"+ _info.total;
      }
    })   
    //绑定联动 pager
    _pager._$bind("pager2");

    //启动代码高亮 
    _tu._$processCode();
}
define(['{lib}ui/pager/pager.js', '{pro}js/extend.js'],f);

Explain

参数 index [Number] - 当前页码

total [Number] - 总页码数

onchange [Function] - 页码切换事件,输入{last:3,index:1,total:12}

更多的参数信息请参照pager.js api说明

Recycle

pager.$recycle();

pager external interface

_$bind(_parent) - 绑定一个联动分页器的父容器

_$unbind() - 解除联动分页器

_$setIndex(_index) - 跳转到制定页码

_$getIndex() - 获得当前页码

_$getTotal() - 获得页码总数

_$updatePage() - 更新页码信息

tips: 基本是调用内部的util.page实例的对应方法 查看更多请参考 util/page.js

Known Issues

Demo

pager控件demo

© 1997-2013 Netease. All Rights Reserved.
comments powered by Disqus