下拉刷新
原生滚动实现的下拉刷新。
为了使用下拉刷新,首先你需要在被下拉的容器的最顶部加上下拉状态的代码(这里我们在 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>
配置
你可以通过 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 | ' ' | 日期和时间之间的分隔符 |
如果你只想选择年月日,建议使用 日历。
从 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,在以前版本引入会导致个别组件出现无法点击的情况。