jQuery WEUI

下拉刷新

原生滚动实现的下拉刷新。

为了使用下拉刷新，首先你需要在被下拉的容器的最顶部加上下拉状态的代码(这里我们在 document.body 上进行下拉刷新)：

<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();

注意，从 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 类

后续会在用户下拉的三个步骤都触发对应的事件，方便细粒度控制下拉刷新。

下拉刷新结合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>

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>

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	' '	日期和时间之间的分隔符

如果你只想选择年月日，建议使用日历。

从 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，在以前版本引入会导致个别组件出现无法点击的情况。

拓展组件