开始使用
使用须知: 先引入以下css和js <link rel="stylesheet" href="http://style.woqukaoqin.com/ps/build/css/wqFrame.min.css"> <script src="https://cdnstyle.woqukaoqin.com/build/js/wqFrame/wqFrameLib.min.js"></script> <script src=" http://style.woqukaoqin.com/ps/build/js/wqFrame.min.js"></script>
字体部分
本框架已经集成部分字体图标,如果需要其他的图标,请自行生成图标自行引入。
wqIcon-prevMonth
wqIcon-nextMonth
wqIcon-prevYear
wqIcon-nextYear
wqIcon-calendar
wqIcon-checkBox
wqIcon-dep
wqIcon-selected
wqIcon-maxmin
wqIcon-treeItem_del
wqIcon-search
wqIcon-backUp
wqIcon-noline_close
wqIcon-noline_open
wqIcon-max
wqIcon-close
按钮部分
常规大小按钮样式
常规大小按钮禁用
大按钮样式
大按钮禁用
表单部分
~
提示信息
简单示例
警告示例
错误警告示例
成功示例
提示高级配置
bootbox
bootboxalert
bootboxconfirm
bootboxPrompt
bootPrompt with textarea
bootPrompt with time
bootboxCustomDialog
bootboxCustomDialog(带标题和关闭按钮)
bootboxDialog
日历组件(常规用法)
最简单的示例
最简单的示例(国际版)
年选择器
年月选择器
时间选择器
日期时间选择器
日历组件(范围选择)
日期范围
年范围
年月范围
时间范围
日期范围
日历组件(自定义格式)
日期(yyyy年MM月dd日)
日期(dd/MM/yyyy)
日期(yyyyMM)
日期(H点m分)
日期( ~ )
日期(2018年1月2日0时0分0秒 到 2018年2月24日0时0分0秒)
日历组件(自定义格式)
自定义特殊事件
控制可选的日期与时间
限定可选日期
前后若干天可选
限定可选时间
同时绑定多个
限定可选日期
其它功能示例
初始赋值
选中后的回调
日期切换的回调
不出现底部栏
只出现确定按钮
自定义事件
点我触发
双击我触发
日期只读
非input元素
分页部分

通过核心方法: wqPagination.render(options) 来设置基础参数。由于使用非常简单,本篇直接罗列核心接口的参数选项

参数选项 说明 类型 默认值
elem 指向存放分页的容器,值可以是容器ID、DOM对象。如:
1. elem: 'id' 注意:这里不能加 # 号
2. elem: document.getElementById('id')
String/Object -
count 数据总数。一般通过服务端得到 Number -
limit 每页显示的条数。wqPagination将会借助 count 和 limit 计算出分页数。 Number 10
limits 每页条数的选择项。如果 layout 参数开启了 limit,则会出现每页条数的select选择框 Array [10, 20, 30, 40, 50]
curr 起始页。一般用于刷新类型的跳页以及HASH跳页。如:

wqPagination

  1. //开启location.hash的记录
  2. wqPagination.render({
  3. elem: 'test1'
  4. ,count: 500
  5. ,curr: location.hash.replace('#!fenye=', '') //获取起始页
  6. ,hash: 'fenye' //自定义hash值
  7. });
Number 1
groups 连续出现的页码个数 Number 5
prev 自定义“上一页”的内容,支持传入普通文本和HTML String 上一页
next 自定义“下一页”的内容,同上 String 下一页
first 自定义“首页”的内容,同上 String 1
last 自定义“尾页”的内容,同上 String 总页数值
layout 自定义排版。可选值有: count(总条目输区域)、 prev(上一页区域)、 page(分页区域)、 next(下一页区域)、 limit(条目选项区域)、 、 skip(快捷跳页区域) Array ['prev', 'page', 'next']
hash 开启location.hash,并自定义 hash 值。如果开启,在触发分页时,会自动对url追加: #!hash值={curr} 利用这个,可以在页面载入时就定位到指定页 String/Boolean false
分页调用实例
总页数低于页码总数:
总页数大于页码总数:
自定义首页、尾页、上一页、下一页文本:
不显示首页尾页:
开启HASH:
只显示上一页、下一页:
显示完整功能:
自定义排版:
将一段已知数组分页展示
    表格部分
    示例