page - 分页器控件

pager控件,此控件是Util功能脚本,封装分页逻辑实现,你需要定义自己的样式和html节点,并且传入实现分页器逻辑所需的dom节点

如:

分页器控件

Allocate

util page控件所在脚本 {lib}util/page/page.js

页面结构以page.js为例:

<html>
    <body>
         <!-- 分页器容器 -->
          <div class="pager" id="page">
              <a class="btn s" href="#">首页</a>
              <a class="btn p" href="#">上一页</a>
              <a class="pgi" href="#"></a>
              <a class="pgi" href="#"></a>
              <a class="pgi" href="#"></a>
              <a class="pgi" href="#"></a>
              <a class="btn n" href="#">下一页</a>
              <a class="btn e" href="#">尾页</a>
          </div>
    </body>
</html>

简单调用实现如下:

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

    var _simpleInfo = _e._$get("simplePageInfo")
    // 这是简单分页器可以提供简单的分页功能,没有首尾的truncate功能
     var _list = nej.e._$getChildren('simplePage');
     _ut._$$SimplePage._$allocate({
     /* 
     参数说明如下 , 其他参数请参考 ui/page/page.base.js
     *list     [Array]       - 页码节点列表【长度保持奇数】
     *event    [String]      - 触发页码切换事件,默认为click
     *pbtn     [String|Node] - 上一页按钮
     *nbtn     [String|Node] - 下一页按钮
     *sbtn     [String|Node] - 首页按钮
     *ebtn     [String|Node] - 尾页按钮
     */
        pbtn:_list.shift()
        ,nbtn:_list.pop()
        ,list:_list
        ,index:10
        ,total:15
        ,onchange:function(_event){
            _simpleInfo.innerHTML='go -> '+_event.index;
        }
     });
    //启动代码高亮 
    _tu._$processCode();
    // 这里是初始化 带 truncate功能的分页器
    var _list2 = nej.e._$getChildren("page");
    // 参数请参考page.base.js
    var _pageInfo =_e._$get("pageInfo")
    _ut._$$Page._$allocate({
         sbtn:_list2.shift()
        ,pbtn:_list2.shift()
        ,ebtn:_list2.pop()
        ,nbtn:_list2.pop()
        ,list:_list2
        ,index:10
        ,total:100
        ,onchange:function(_event){
            _pageInfo.innerHTML='go -> '+_event.index;
        }
    })

Explain

参数

list [Array] - 页码节点列表【长度保持奇数】

event [String] - 触发页码切换事件,默认为click

pbtn [String|Node] - 上一页按钮

nbtn [String|Node] - 下一页按钮

sbtn [String|Node] - 首页按钮

ebtn [String|Node] - 尾页按钮

index [Number] - 当前页码

total [Number] - 总页码数

selected [String] - 选中样式,默认为js-selected

disabled [String] - 禁用样式,默认为js-disabled

onchange [Function] - 页码变化触发事件,输入{last:3,index:1,total:12}

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

Recycle

page.$recycle();

page external interface

e._$page(parent,options) : 提供给nej.e的接口 供快捷生成分页器,如下所述

  // 构建一个pager控件
  nej.e._$page('abc',{
      index:2,
      total:10,
      onchange:function(_event){}
  });
  // 调用page控件接口
  nej.e._$page('abc')._$setIndex(5);
  // 回收page控件
  nej.e._$page('abc')._$recycle();

 @param  {String|Node} _parent  分页器容器节点

 @param  {Object}      _options 可选配置参数,参见nej.ut._$$Page控件的可选配置参数

 clazz  [String] - 需要做Page控件封装的节点标识,如没有此参数则选取父节点下的所有子节点

Known Issues

Demo

page逻辑控件Demo

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