拓展组件
拓展组件是官方WeUI中暂时没有的组件。这些组件全部都是jQuery WeUI新增的。
下拉刷新
原生滚动实现的下拉刷新。
为了使用下拉刷新，首先你需要在被下拉的容器的最顶部加上下拉状态的代码(这里我们在 document.body 上进行下拉刷新)：
特别强调：下拉刷新一定要在真正发生滚动的那个元素上初始化，如果你发现下拉刷新导致页面无法滚动，那么几乎可以肯定是你初始化的容易搞错了，这个问题请不要随意发Issue。
<body>
<!-- body 顶部加上如下代码 -->
<div class="weui-pull-to-refresh__layer">
<div class='weui-pull-to-refresh__arrow'></div>
<div class='weui-pull-to-refresh__preloader'></div>
<div class="down">下拉刷新</div>
<div class="up">释放刷新</div>
<div class="refresh">正在刷新</div>
</div>
<!-- 其他内容 -->
</body>其中 down, up, refresh 分别是在下拉过程的不同状态下显示的。你可以随意修改其中的内容来定制自己的样式
然后通过JS初始化下拉刷新：
$(document.body).pullToRefresh(function () {
// 下拉刷新触发时执行的操作放这里。
// 从 v1.1.2 版本才支持回调函数，之前的版本只能通过事件监听
});注意，从 v0.4.0 版本之后，你可以在任何 DIV 内初始化下拉刷新操作。并且同一个页面可以初始化多个下拉刷新。
当下拉刷新的动作触发的时候，会在容器上触发一个 pull-to-refresh 事件.
$(document.body).on("pull-to-refresh", function() {
//do something
});完成下拉刷新
当下拉刷新的工作完成之后，需要重置下拉刷新的状态：
$(document.body).pullToRefreshDone();下拉过程
下拉刷新的整个过程分三步:
- 当用户正在拖动，并且未到达50px的时候，会在容器上增加一个
pull-down类 - 当用户正在拖动，并且已经达到或者超过50px的时候，会在容器上增加一个
pull-up类 - 当用户拖动超过50px并且释放之后，会在容器上增加一个
refreshing类
后续会在用户下拉的三个步骤都触发对应的事件，方便细粒度控制下拉刷新。
初始化参数
注意，这里的初始化参数都是 v1.1.2 才开始支持的。
在初始化的时候有两种方式：可以直接传入一个回调函数，或者传入一个对象
直接传入回调函数，则会在下拉刷新事件触发的时候执行这个回调。和监听 pull-to-refresh 事件是一样的效果，不过写起来更加方便而已。
$(document.body).pullToRefresh(function () {
// 下拉刷新触发时执行的操作放这里。
// 从 v1.1.2 版本才支持回调函数，之前的版本只能通过事件监听
});你还可以选择传入一个对象，会有更多的配置可选：
$(document.body).pullToRefresh({
onRefresh: function () { /* 当下拉刷新触发的时候执行的回调 */ },
onPull: function (percent) { /* 用户下拉过程中会触发，接收一个百分比表示用户下拉的比例 */ },
distance: 50 /* 下拉刷新的触发距离， 注意，如果你重新定义了这个值，那么你需要重载一部分CSS才可以，请参考下面的自定义样式部分 */
});JS 方法
除了用户手势触发，也可以通过JS方法来触发刷新操作：
$('xxxx').pullToRefresh('triggerPullToRefresh')自定义样式
下拉刷新组件提供了灵活的配置，你完全可以根据自己的需求去定义下拉的样式。这里提供一个简单的球形示例可供大家参考。
需要注意的是：
- 如果你定义了 distance 参数值，那么 相关的CSS也需要被重载，具体方式可以参见右侧demo的源码。下拉刷新的很多逻辑都在CSS中，如果你不熟悉请不要随便修改 distance 以免导致页面的样式错误。
- onPull 会在用户滑动的时候不断触发，请不要做复杂的DOM操作以免导致页面卡顿。
- onPull 的 percent 是一个百分比的值，如果用户拉动距离超过 distance 那么这个值是会超过 100 的，这是正常的。如果你不希望显示一个大于100的数值请参考右侧demo的做法。
JS 部分代码如下：
var $circle = $("#circle")
$(document.body).pullToRefresh({
distance: 80,
onRefresh: function() {
setTimeout(function() {
$("#time").text(new Date);
$(document.body).pullToRefreshDone();
}, 2000);
},
onPull: function (percent) {
if (percent > 100) percent = 100
$circle.html(percent);
$circle.css('background-image', 'linear-gradient(0deg, #3cc51f ' + percent + '%, #3cc51f ' + percent + '%, transparent 50%, transparent 100%)')
}
});下拉刷新结合TAB
可以在每一个 .weui-tab_bd-item 都初始化一个独立的下拉刷新：
<div class="weui-tab">
<div class="weui-navbar">
<div class="weui-navbar__item weui-navbar__item--on" href="#tab1">
选项一
</div>
<div class="weui-navbar__item" href="#tab2">
选项二
</div>
<div class="weui-navbar__item" href="#tab3">
选项三
</div>
</div>
<div class="weui-tab__bd">
<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active weui-pull-to-refresh">
<div class="weui-pull-to-refresh__layer">
<div class='weui-pull-to-refresh__arrow'></div>
<div class='weui-pull-to-refresh__preloader'></div>
<div class="down">下拉刷新</div>
<div class="up">释放刷新</div>
<div class="refresh">正在刷新</div>
</div>
<h1 class="doc-head">页面一</h1>
<div class="content-padded">
...
</div>
</div>
<div id="tab2" class="weui-tab__bd-item weui-pull-to-refresh">
<div class="weui-pull-to-refresh__layer">
<div class='weui-pull-to-refresh__arrow'></div>
<div class='weui-pull-to-refresh__preloader'></div>
<div class="down">下拉刷新</div>
<div class="up">释放刷新</div>
<div class="refresh">正在刷新</div>
</div>
<h1 class="doc-head">页面二</h1>
<div class="content-padded">
...
</div>
</div>
<div id="tab3" class="weui-tab__bd-item weui-pull-to-refresh">
<div class="weui-pull-to-refresh__layer">
<div class='weui-pull-to-refresh__arrow'></div>
<div class='weui-pull-to-refresh__preloader'></div>
<div class="down">下拉刷新</div>
<div class="up">释放刷新</div>
<div class="refresh">正在刷新</div>
</div>
<div class="content-padded">
<h1 class="doc-head">页面三</h1>
...
</div>
</div>
</div>
滚动加载
当用户滚动到页面底部的时候加载更多内容。
首先你需要把一段显示加载状态的代码放入需要滚动加载的容器中，这里我们默认是 document.body，加载指示器的代码如下：
<div class="weui-loadmore">
<i class="weui-loading"></i>
<span class="weui-loadmore__tips">正在加载</span>
</div>然后调用JS初始化滚动加载插件：
$(document.body).infinite();从 v0.4.0 版本开始，可以在任何div内初始化滚动加载组件，并且一个页面内可以初始化多个。
参数
infinite 方法接收一个 distance 参数：
$(document.body).infinite(100);默认的 distance 值是 50，表示滚动到距离底部 50 px 的时候会触发加载.
事件
当用户滚动到页面底部的时候，会在 body 上触发 infinite 事件。监听此事件即可:
var loading = false; //状态标记
$(document.body).infinite().on("infinite", function() {
if(loading) return;
loading = true;
setTimeout(function() {
$("#list").append("<p> 我是新加载的内容 </p>");
loading = false;
}, 1500); //模拟延迟
});注意一点，因为插件并不知道你是否正在加载，所以只要滚动到距离底部 50px 以内都会触发事件。因此 infinite 事件可能会触发多次。需要自己来控制不要同时进行多个加载。可以参考上面的代码通过一个 loading 标记位来控制。
销毁
如果你不需要滚动加载了，比如已经加载完了所有内容，调用 $(document.body).destroyInfinite() 可以销毁插件。之后你可以再次调用 $(document.body).infinite() 来重新初始化.
不过即使销毁插件，也不会把加载指示器的HTML代码删除，所以你需要自己来隐藏或者删除它。
滚动加载结合TAB
同样可以在每一个 .weui-tab__bd-item 都初始化一个独立的滚动加载：
<div class="weui-tab" id='page-infinite-navbar'>
<div class="weui-navbar">
<a href='#tab1' class="weui-navbar__item weui-bar__item--on">
选项一
</a>
<a href='#tab2' class="weui-navbar__item">
选项二
</a>
</div>
<div class="weui-tab__bd">
<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
<h1 class="doc-head">页面一</h1>
<div class="content-padded">
...
</div>
<div class="weui-infinite-scroll">
<div class="infinite-preloader"></div>
正在加载...
</div>
</div>
<div id="tab2" class="weui-tab__bd-item">
<h1 class="doc-head">页面二</h1>
<div class="content-padded">
...
</div>
<div class="weui-infinite-scroll">
<div class="infinite-preloader"></div>
正在加载...
</div>
</div>
</div>
</div>Count 计数器
从 V1.2.0 开始加入了计数器组件。可以用来显示和修改数值，比如可以用在购物车显示商品数目。
因为计数器的JS逻辑比较简单，所以这里只提供了一个CSS组件，如果你需要写对应的JS代码可以参考如下代码：
var MAX = 99, MIN = 1;
$('.weui-count__decrease').click(function (e) {
var $input = $(e.currentTarget).parent().find('.weui-count__number');
var number = parseInt($input.val() || "0") - 1
if (number < MIN) number = MIN;
$input.val(number)
})
$('.weui-count__increase').click(function (e) {
var $input = $(e.currentTarget).parent().find('.weui-count__number');
var number = parseInt($input.val() || "0") + 1
if (number > MAX) number = MAX;
$input.val(number)
})Swiper
为了使用幻灯片，你必须引用如下的JS文件：
<script type='text/javascript' src='/js/swiper.js' charset='utf-8'></script>在 Swiper 容器上调用 $(".swiper-container").swiper(config) 来初始化.
<div class="swiper-container" data-space-between='10' data-pagination='.swiper-pagination' data-autoplay="1000">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg" alt=""></div>
<div class="swiper-slide"><img src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i4/TB10rkPGVXXXXXGapXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg" alt=""></div>
<div class="swiper-slide"><img src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1kQI3HpXXXXbSXFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg" alt=""></div>
</div>
</div>配置
你可以通过 data-xxx 属性的方式在 .swiper-container 上写配置, 也可以通过 $().swiper(config) 的 config 参数来设置。Swiper 是对第三方插件的一个简单封装，更多文档请参阅 Swiper 官方文档
Photo Browser
为了使用图片浏览器，你必须引用如下的JS文件：
<script type='text/javascript' src='/js/swiper.js' charset='utf-8'></script>Photo Browser 是一个可以全屏浏览多张图片的插件，类似朋友圈中查看图片的功能。
Photo Browser 只能通过 JavaScript 进行调用:
var pb1 = $.photoBrowser({
items: [
"./images/swiper-1.jpg",
"./images/swiper-2.jpg",
"./images/swiper-3.jpg"
]
});如果图片带有文案，可以这样调用：
var pb2 = $.photoBrowser({
items: [
{
image: "./images/swiper-1.jpg",
caption: "描述文案"
},
{
image: "./images/swiper-2.jpg",
caption: "描述文案"
},
{
image: "./images/swiper-3.jpg",
caption: "描述文案"
}
]
});$.photoBrowser 方法会返回一个实例，这个实例可以调用方法打开和关闭弹层：
pb.open(); //打开
pb.close(); //关闭参数配置
$.photoBrowser(config) 有如下配置可用：
| 参数名 | 说明 | 示例 |
|---|---|---|
| items | 需要展示的图片 | items: ["./images/swiper-1.jpg", "./images/swiper-2.jpg", ...] |
| onSlideChange | 左右翻页的回调函数 | onSlideChange: function(index) { console.log(index); } |
| onOpen | 每次打开之后执行回调 | onOpen: function() { console.log(this); } |
| onClose | 每次关闭之后执行回调 | onClose: function() { console.log(this); } |
| tpl | 图片浏览器的HTML模板，除非非常熟悉，否则不建议直接修改模板 | |
| initIndex | 初始化显示第几张，从0开始。 V0.7.1版本开始才支持此参数。 |
注意，请不要使用上述列表没有列出来的配置，因为这些没有列出来的是下一个版本很可能会改动的，包括 swiper 对象可能会被删除。
属性和方法
$.photoBrowser 会返回一个 photos 实例，这个实例上有如下方法和属性可以使用：
| 方法/属性 | 说明 |
|---|---|
| open(index) | 打开图片浏览器，可以传入一个可选的 index 参数来指定打开后默认显示的图片(从0开始) |
| close() | 关闭图片浏览器 |
| slideTo(index, duration) | 滚动到指定图片 |
| slidePrev() | 滚动到上一张图片 |
| slideNext() | 滚动到下一张图片 |
| activeIndex | 当前显示的图片 |
| currentScale | 当前缩放比例 |
为了调用以上方法，请确保您的版本为 V0.8.0 或者更新。其中所有属性都是只读的，请不要随意修改。请不要调用上述未列出的任何方法，因为这些方法都是内部使用的。
注意，从 V0.7.0 开始才支持 photos 组件。
日历
日历组件用来选择年月日，可以代替系统原生的日历组件，提供更统一的视觉和交互以及更好的兼容性。
日历组件需要初始化才能使用，最简单的方式是通过一下JS代码来初始化，绑定到一个input元素上：
$("#my-input").calendar();当你点击input元素后，会自动弹出一个JS生成的日历组件。当用户选择日期之后，input的值会被设置为用户选择的日期。
如果你不想写js，可以通过以下方式来自动初始化：
<input type="text" data-toggle='date' />参数
你可以在初始化的时候指定如下参数：
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| multiple | boolean | false | 是否多选， V0.8.1+ |
| inputReadOnly | boolean | true | 是否自动在 input 元素上加上 readonly 属性 |
| closeByOutsideClick | boolean | true | 点击日历外面关闭 |
| toolbarTemplate | string | 参见源码 | Toolbar 的HTML结构 |
| value | array | 默认选择的日期，注意是个数组，比如 ["2016-12-12"] |
|
| formatValue | function (p, values) | 格式化函数. values 是用户选择的日期 | |
| monthNames | array | ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] | 月名称 |
| monthNamesShort | array | ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] | 月名称缩写 |
| dayNames | array | ['周日', '周一', '周二', '周三', '周四', '周五', '周六'] | 周名称 |
| dayNamesShort | array | ['周日', '周一', '周二', '周三', '周四', '周五', '周六'] | 周名称缩写 |
| dateFormat | 'yyyy-mm-dd' | 日期格式 | |
| minDate | undefined | 最小可选日期，比如 2015-06-01 |
|
| maxDate | undefined | 最大可选日期，比如 2015-08-01 |
|
| onChange | function(p, values, displayValues){} | 当用户选择日期时触发 | |
| closeOnSelect | boolean | true | 用户选择一个时间后就自动关闭 |
| yearPicker | boolean | true | Enable year picker in toolbar |
| 回调函数 | |||
| onChange | function (p, values, displayValues) | Callback function that will be executed when picker value changed. values and displayValues are arrays where each item represents value/display value of related column | |
| onMonthAdd | function (p, monthContainer) | Callback function that will be executed when newly generated month HTML element will be added to calendar. | |
| onDayClick | function (p, dayContainer, year, month, day) | Callback function that will be executed when user clicks/select any date | |
| onOpen | function (p) | Callback function that will be executed when picker is opened | |
| onClose | function (p) | Callback function that will be executed when picker is closed | |
当用户选择完日期之后，会在 input 上触发 change 事件，你可以监听此事件。
如果你只同时选择日期和时间，请使用 日期时间选择器
方法
通过 $("xxx").calendar("methodname", args) 可以调用method的方法，目前有如下方法可以调用：
$("#input").calendar("close"); //关闭弹窗
$("#input").calendar("open"); //打开弹窗
$("#input").calendar("setValue", ["2012-12-12"]); //设置日期
$("#input").calendar("destroy"); //销毁内联日历
在初始化 Calendar 的时候可以通过 container 参数来指定一个容器，如果把这个容器指定为页面上的一个元素，那么日历就会默认显示出来。
$("#inline-calendar").calendar({
container: "#inline-calendar",
input: "#date3"
});如果你在内联日历的时候，不希望有一个 input 会显示用户的输入值，那么只需要指定一个 type="hidden" 的input即可。但是千万注意不能不设置 input 参数。具体请参见右侧demo的写法
picker
picker是一个JS实现的类似select的组件，他可以代替原生的select组件，并且功能更加强大、样式更加统一。
picker 需要初始化才能使用，你可以在一个 input 元素上初始化picker，当用户点击input的时候会弹出picker的弹层
picker 会自动读取 input 的value作为初始值。对于有多个cols的情况，可能初始值无法正确解析，因为picker并不知道该如何进行分割。默认的规则是：多列模式下，会把input中的值以空格分隔作为每一列的值。如果你有多列并且不是以空格分隔的，那么你需要自己通过参数传入这个初始值，而不能通过 input 元素的 value属性设置。
<input type="text" id='picker'/>
<script>
$("#picker").picker({
title: "请选择您的手机",
cols: [
{
textAlign: 'center',
values: ['iPhone 4', 'iPhone 4S', 'iPhone 5', 'iPhone 5S', 'iPhone 6', 'iPhone 6 Plus', 'iPad 2', 'iPad Retina', 'iPad Air', 'iPad mini', 'iPad mini 2', 'iPad mini 3']
}
]
});
</script>关闭picker
在任何元素上加上一个 .close-picker 类，点击它就会关闭 Picker。
你也可以通过调用 $.closePicker() 或者 $("#input").picker("close")来关闭当前弹出的 Picker。
picker参数
你可以通过设置 toolbarTemplate 参数来自定义工具栏模板。在 cols 参数中可以传入多列值。
$("#picker-name").picker({
title: "请选择您的称呼",
cols: [
{
textAlign: 'center',
values: ['赵', '钱', '孙', '李', '周', '吴', '郑', '王']
//如果你希望显示文案和实际值不同，可以在这里加一个displayValues: [.....]
},
{
textAlign: 'center',
values: ['杰伦', '磊', '明', '小鹏', '燕姿', '菲菲', 'Baby']
},
{
textAlign: 'center',
values: ['先生', '小姐']
}
]
});所有可用参数如下：
| 参数名 | 默认值 | 说明 |
|---|---|---|
| title | "请选择" | Picker 的标题 |
| toolbarCloseText | 完成 | 关闭按钮的文案 |
| toolbarTemplate | 请参见源码 | 工具栏的模板，可以自己定义。 |
| value | Array with initial values. Each array item represents value of related column. Picker will auto read value from input if not set. | |
| rotateEffect | false | 是否启用3D效果，启用3D可能会影响性能 |
| toolbar | true | 是否显示工具栏 |
| inputReadOnly | true | 是否会在input上添加一个 readonly 属性 |
| cssClass | undefined | 为 picker 容器增加额外的类，可以用来自定义样式 |
| onChange | undefined | 当选择值改变的时候触发 |
| onClose | undefined | 当picker被关闭时触发 |
picker方法
你可以通过 $("#input").picker("method", args1, args2...) 的方式来调用相关的方法。
$("#picker-name").picker("open");
$("#picker-name").picker("close");
$("#picker-name").picker("setValue", ["2012", "12", "12"]);所有可用方法如下：
| 方法名 | 参数说明 | 方法说明 |
|---|---|---|
| open | 无 | 打开picker |
| close | 无 | 关闭picker |
| setValue | 一个字符串数组，其中每个字符串对应每一列 | 设置值，请注意，只能设置在 config 中配置的那些值，无法设置一个不存在的新值。 |
内联模式
从 V0.8.0 版本开始，可以使用内联模式，只需要在初始化的时候指定一个 container 参数即可，picker会自动在这个容器中初始化。时间日期选择器以及地址选择器等因为继承自 picker，因此也都支持完全相同的内联模式。
$.picker({
input: '#input',
container: '#container'
})注意，内联模式只是指定了容器，因此 input 参数还是必须的，而且强烈建议通过 input 来获取用户输入的值。如果你不希望显示一个输入框，可以把它设置成 type="hidden"。
日期时间选择器
V0.8.1 做了不兼容旧版本的更新，请一定仔细阅读更新日志。这是 v0.8.1 的文档。
日期时间选择器是一个定制的picker，因此他的用法和picker完全一致。
注意，从 V0.8.0 版本开始，在日期时间选择器中几乎可以配置任何 picker 中的配置，包括 onChange, title 等
datetime-picker 会自动解析 input 的 value 作为初始值，但是要注意初始值的格式一定要和自己定义的格式相同，不然会出现弹窗中的值和input初始值不相同的情况（因为无法解析）
<input type="text" id='datetime-picker'/>
<script>
$("#datetime-picker").datetimePicker();
</script>参数
除了 `Picker` 的所有参数外， 日期时间选择器还有自己的如下参数可用:
| 参数名 | 默认值 | 说明 |
|---|---|---|
| input | undefined | 输入框的默认值，优先级高于在 input 上通过 value 属性的设置。V0.8.0+ 版本起可用此配置 |
| minutes | undefined |
分钟的可选值，默认是 ['00' ~ '59']。比如想间隔15分钟可选，那么设置成 ['00', '15', '30', '45']。 只在 V0.8.0 版本可用（更高或者更低的版本均不可用）
|
| hours | undefined | 小时的可选值，默认是 ['00' ~ '23']。比如想设置成只能白天，那么设置成 ['08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18']。 只在 V0.8.0 版本起可用此配置（更高或者更低版本均不可用） |
| min | undefined | 最小可选时间，比如 2016-03-03，注意格式一定要严格正确。也可以是一个函数.但是只能是年月日不能带有时间 |
| max | undefined | 最大可选时间，比如 2016-12-12，注意格式一定要严格正确。也可以是一个函数.但是只能是年月日不能带有时间 |
| times | 参见源码 | 时间配置，这是一个 picker 的cols配置，因此可以非常灵活的配置成任意形式。 V0.8.1+ |
| yearSplit | '-' | 年和月之间的分隔符 |
| monthSplit | '-' | 月和日之间的分隔符 |
| dateSplit | '' | 日后面的分隔符 |
| datetimeSplit | ' ' | 日期和时间之间的分隔符 |
| years | 1950~2030 | v1.1.2 可选的年份 |
| monthes | 01~12 | v1.1.2 可选的月份 |
如果你只想选择年月日，建议使用 日历。
从 V0.8.0+ 版本开始，日期时间选择器支持内联模式，具体请参考 picker 关于内联模式的文档。
地址选择器
v0.8.1 的用户请尽快升级到 v0.8.2，修复了地址选择器 onChange 函数参数的bug。
地址选择器需要引入额外的JS文件：
<script type="text/javascript" src="js/city-picker.js" charset="utf-8"></script>地址选择器是一个定制的 picker，所以其用法和 Picker 是一样的。
从 v0.8.1+ 版本开始，可以设置除了 cols 和 cssClass 之外的全部picker中的参数。
<input type="text" id='city-picker'/>
<script>
$("#city-picker").cityPicker({
title: "请选择收货地址"
});
</script>input 的 value 属性可以设置默认值，以空格分割。
<input type="text" id='city-picker' value="浙江省 杭州市 拱墅区" />参数
除了 `Picker` 的全部参数可用之外，`city-picker` 还有如下参数可以配置:
| 参数名 | 默认值 | 说明 |
|---|---|---|
| showDistrict | true | 是否显示地区 |
比如如下设置可以不显示地区（只选择省市):
//禁用地区选择
$("#city-picker").cityPicker({
showDistrict: false
});你可以通过 $.fn.cityPicker.prototype.defaults 来改变默认值。
地区编码
从 v0.8.1 版本开始支持地区编码，编码来自 国家统计局发布的数据。
版本升级!重要！
特别注意， v0.8.1+ 版本除了增加了地区编码之外，省市的名字也发生了变化，主要变化是加上了 '省' 和 '市' 的后缀，所以以前的数据如果用在 v0.8.1+ 版本会导致无法匹配。
通知
模仿iOS风格的通知。你可以自定义标题，文案和图标。通过滑动手势可以关闭。
使用JS来打开和关闭通知:
$.notification({
title: "Baby",
text: "I miss you",
media: "<img src='...'>",
data: "123",
onClick: function(data) {
$.alert("Click" + data);
},
onClose: function(data) {
$.alert("Close "+data);
}
});
//close notification
$.closeNotification();一次只能显示一个通知，如果在前一个通知未消失的情况下显示下一个通知。则下一个通知会直接替换掉前一个通知
Params
| Param | Default | Description |
|---|---|---|
| title | undefined | 通知的标题 |
| text | undefined | 通知的文案 |
| media | undefined | 图标 |
| data | undefined | 点击通知后，这个data参数会传给 onClick |
| onClick | undefined | 点击回调 |
| onClose | undefined | 关闭通知的回调 |
| time | 4000 | 自动消失的时间 |
Select
Select 是一种支持单选或者多选的弹出层，它可以用来代替原生的 select 元素提供更好更一致的用户体验。Select 是一个JS组件，只能通过JS方法来调用.
简单用法
基本用法如下：
$("#job").select({
title: "选择职业",
items: ["法官", "医生", "猎人", "学生", "记者", "其他"]
});设置不同的显示值和实际值
Select 可以设置不用的显示值和实际值，很多时候显示给用户看的字符串和实际提交值是不同的，比如：
$("#mobile").select({
title: "选择手机",
items: [
{
title: "iPhone 3GS",
value: "001",
},
{
title: "iPhone 5",
value: "002",
},
{
title: "iPhone 5S",
value: "003",
},
{
title: "iPhone 6",
value: "004",
},
{
title: "iPhone 6S",
value: "005",
},
{
title: "iPhone 6P",
value: "006",
},
{
title: "iPhone 6SP",
value: "007",
},
{
title: "iPhone SE",
value: "008",
},
{
title: "iPhone 7",
value: "009"
}
]
});当设置了不同的显示值和实际值时请注意，这个时候 input 的 value 依然是显示值，而实际值存储在 data-values 属性中。如果你设置了初始值，请保证同时设置了 value 和 data-values 两个值。
多选
增加一个 multi: true 参数，就可以设置为多选:
$("#in").select({
title: "您的爱好",
multi: true,
items: [
{
title: "画画",
value: 1
},
{
title: "打球",
value: 2
},
{
title: "唱歌",
value: 3
},
{
title: "游泳",
value: 4
},
]
});默认配置
Select 的默认配置是 $.fn.select.prototype.defaults:
| 参数名 | 默认值 | 说明 |
|---|---|---|
| input | undefined |
输入框的初始值，如果设置了这个值，那么他会覆盖 input 本身的 value 值。 从 V0.7.0 开始支持此配置。 |
| autoClose | true | 自动关闭，只有在单选模式下才可用，选择完成之后自动关闭弹窗 |
| closeText | "关闭" | 关闭按钮的文案 |
| multi | false | 是否多选 |
| max | undefined | 多选模式下，最多可选个数, V0.7.2 |
| min | undefined | 多选模式下，最少可选个数, V0.7.2 |
| split | "," | 分隔符 |
| title | "请选择" | 弹窗的标题 |
| onChange | undefined |
用户选择之后的回调，注意从 V0.6.1 版本之后才支持。你也可以在 input 上监听 `change` 事件。 |
| onOpen | undefined |
弹层打开之后执行此回调函数。 V0.7.0 开始支持此配置 |
| onClose | undefined |
弹层关闭之后执行此回调函数。 V0.7.0 开始支持此配置 |
| beforeClose | undefined |
弹层关闭之前执行此回调函数，如果返回 false 则可以阻止关闭。 V0.7.2 |
你可以直接修改默认配置，但是建议通过 $().select(config) 的方式来配置。
方法
通过 $(xxx).select("method", args) 方式可以调用 已经初始化完成 的select组件的方法。
全部可用方法如下:
| 方法名 | 示例 | 说明 |
|---|---|---|
| update | $("input").select("update", { items: ["法官", "猎人", ...] }) |
动态更新配置，传入的参数是一个 config 对象，初始化时候设定的任何参数都可以通过这种方式进行修改。 |
| open | $("input").select("open") |
打开弹层 |
| close | $("input").select("close") |
关闭弹层 |
再次强调一点，必须是通过 $(input).select(config) 初始化之后才能调用对应的方法，否则请先初始化。
Popup
Popup 是一个覆盖式的弹出层，可以完全盖住当前页面。
Popup 需要一个模板，简单的模板如下:
<div id="" class="weui-popup__container">
<div class="weui-popup__overlay"></div>
<div class="weui-popup__modal">
你的内容放在这里...
</div>
</div>然后可以通过设置一个链接，当点击的时候就会打开这个模板:
<a href="javascript:;" class="open-popup" data-target="">About</a>其中 class='open-popup' 和 data-target="" 两个属性不可缺少，前者表示点击链接需要打开一个 popup，后者是这个popup的选择器
当然，你也可以通过调用 JS 方法来打开一个 popup：
$("#about").popup();非全屏模式
在容器上增加一个类 popup-bottom 即可：
<div id="" class="weui-popup__container popup-bottom">
<div class="weui-popup__overlay"></div>
<div class="weui-popup__modal">
你的内容放在这里...
</div>
</div>关闭 Popup
给任何链接加上 class='close-popup' 则点击之后可以关闭当前打开的 popup. 你也可以通过 $.closePopup() 来关闭。
注意，从 V0.8.0 版本开始，才可以可以加入 .weui-popup-overlay 这个半透明遮罩层。
fastclick
iOS 系统下默认的 click 事件会有300毫秒的延迟，这个延迟是iOS系统的特性而不是jQuery WeUI设定的，可以使用 fastclick 来消除这个延迟。
jQuery WeUI 是不包含 fastclick 的，你只需要按照标准的用法引用并初始化即可，可以参考以下代码：
<script src="../lib/fastclick.js"></script>
<script>
$(function() {
FastClick.attach(document.body);
});
</script>在官方 demos 中是引入了 fastclick ，可以参考其中的代码。
关于更多 fastclick 相关的文档，请移步其官网 https://github.com/ftlabs/fastclick
注意，从 V0.8.1 开始支持 fastclick，在以前版本引入会导致个别组件出现无法点击的情况。