js手机移动端选择插件 mobileSelect.js

一、mobileSelect获取方法

  mobileSelect支持单选、多级联动、自定义回调函数、二次渲染。最新版本下载地址[2017-09-21更新]: https://github.com/onlyhom/mobileSelect.js

二、特性
  1、原生js移动端选择控件,不依赖任何库
  2、可传入普通数组或者json数组
  3、可根据传入的参数长度,自动渲染出对应的列数,支持单项到多项选择
  4、自动识别是否级联
  5、选择成功后,提供自定义回调函数callback() 返回当前选择索引位置、以及选择的数据(数组/json)
  6、每次手势滑动结束后,也提供一个回调函数transitionEnd() 返回当前选择索引位置、以及选择的数据(数组/json)
  7、能够在已经实例化控件后,提供update函数,传其他参数再次渲染
  8、提供重定位函数

三、动态图

js手机移动端选择插件 mobileSelect.js

四、使用方法

<link rel="stylesheet" type="text/css" href="css/mobileSelect.css">
<script src="js/mobileSelect.js" type="text/javascript"></script>

五、示例

<div class="weui-cell">
<div class="weui-cell__hd">
<label for="" class="weui-label width-40"><span style="color: #ff0000;">*</span>房屋类型</label>
</div>
<div class="weui-cell__bd">
<input class="weui-input" type="text" id="house_type" name="house_type" value="" required readonly>
</div>
</div>
var houseTypeObj = new MobileSelect({
trigger: '#house_type',
title: '请选择房屋类型',
wheels: [
{data:['小区房','自建房','商品房']}
],
position:[0],
callback:function(indexArr, data){
$("#house_type").val(data[0]);
$("#house_type").blur();
}
});
上一篇:NW.js将网站打包成桌面应用


下一篇:全面理解Java内存模型