WUI v1.1.0

基础说明

开始使用 Getting Started
底层方法 基础支撑
页面元素 规范 / 公共类
模块规范 使用 / 扩展
常见问题 FAQ
更新日志

页面元素

布局 容器 / 栅格 / 后台布局
颜色 主题色 / 内置背景色
图标 字体图标
动画 内置 CSS3 动画
按钮 button 组
表单 form 元素集合
导航 菜单 / 面包屑
选项卡 Tabs 切换
进度条 progress
面板 折叠 / 手风琴
表格 静态 table
徽章 小圆点 / 小边框
时间线 timeline
区块 引用 / 字段集
文字 颜色 / 链接 / 位置
辅助 边距 / 填充 / 横线等

内置模块

弹出层 layer
日期与时间选择 wdate
分页 wpage
模板引擎 wtpl
数据表格 table
表单 form
文件上传 upload
穿梭框 transfer
树形组件 tree
颜色选择器 colorpicker
常用元素操作 element
滑块 slider
评分 rate
轮播 carousel
流加载 flow
工具集 util
简单编辑器 wedit
富文本编辑器 tinymce
下拉菜单 menu
拖动排序 dragsort
自动完成 autocomplete
代码修饰器 code
通知控件 notice
下拉多选控件 xmSelect
滑块验证 sliderVerify
无限级联选择器 cascader
分页组件 - wui.wpage 更多 wpage 示例

模块加载名称:wpage
wpage 的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>wpage快速使用</title>
    <link rel="stylesheet" href="wui.css" media="all">
</head>
<body>

<div id="test1"></div>

<script src="wui.js"></script>
<script>
    wui.use('wpage', function(){
        var wpage = wui.wpage;

        //执行一个wpage实例
        wpage.render({
            elem: 'test1' //注意,这里的 test1 是 ID,不用加 # 号
            ,count: 50 //数据总数,从服务端得到
        });
    });
</script>
</body>
</html>
通过核心方法:wpage.render(options) 来设置基础参数。由于使用非常简单,本篇直接罗列核心接口的参数选项
参数选项 说明 类型 默认值
elem 指向存放分页的容器,值可以是容器ID、DOM对象。如:
1. elem: 'id' 注意:这里不能加 # 号
2. elem: document.getElementById('id')
String/Object -
count 数据总数。一般通过服务端得到 Number -
limit 每页显示的条数。wpage将会借助 count 和 limit 计算出分页数。 Number 10
limits 每页条数的选择项。如果 layout 参数开启了 limit,则会出现每页条数的select选择框 Array [10, 20, 30, 40, 50]
curr 起始页。一般用于刷新类型的跳页以及HASH跳页。如:
//开启location.hash的记录
wpage.render({
  elem: 'test1'
  ,count: 500
  ,curr: location.hash.replace('#!fenye=', '') //获取起始页
  ,hash: 'fenye' //自定义hash值
});          
Number 1
groups 连续出现的页码个数 Number 5
prev 自定义“上一页”的内容,支持传入普通文本和HTML String 上一页
next 自定义“下一页”的内容,同上 String 下一页
first 自定义“首页”的内容,同上 String 1
last 自定义“尾页”的内容,同上 String 总页数值
layout 自定义排版。可选值有:count(总条目输区域)、prev(上一页区域)、page(分页区域)、next(下一页区域)、limit(条目选项区域)、refresh(页面刷新区域) 、skip(快捷跳页区域) Array ['prev', 'page', 'next']
theme 自定义主题。支持传入:颜色值,或任意普通字符。如:
1. theme: '#c00'
2. theme: 'xxx' //将会生成 class="wui-wpage-xxx" 的CSS类,以便自定义主题
String -
hash 开启location.hash,并自定义 hash 值。如果开启,在触发分页时,会自动对url追加:#!hash值={curr} 利用这个,可以在页面载入时就定位到指定页 String/Boolean false
当分页被切换时触发,函数返回两个参数:obj(当前分页的所有选项值)、first(是否首次,一般用于初始加载的判断)
wpage.render({
  elem: 'test1'
  ,count: 70 //数据总数,从服务端得到
  ,jump: function(obj, first){
    //obj包含了当前分页的所有参数,比如:
    console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
    console.log(obj.limit); //得到每页显示的条数

    //首次不执行
    if(!first){
      //do something
    }
  }
});
© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile