[置顶] 利用jquery mobiscroll插件选择日期、select、treeList的具体运用

　　mobiscroll是个很好用的用于移动端滑动选择的插件，可以用来选择日期，也可以用来选择简单选项或者一些复杂的树形结构的选项，简单分享下。

　　依赖也比较简单，引入一个

mobiscroll-2.13.2.full.min.js

文件和一个

mobiscroll-2.13.2.full.min.css

文件即可。可直接下载mobiscroll-2.13.2 ，官网 http://docs.mobiscroll.com

1. 日期选择

　　先看效果图：

　　


　　
js代码：

var opt={};
opt.datetime = {};
opt.default = {
theme: 'ios7',
display: display,
mode: 'scroller',
dateFormat: 'yy-mm-dd',
dateOrder: 'yymmdd',
dayText: '日', monthText: '月', yearText: '年',hourText: '时',minuteText: '分',
lang: 'zh',
stepMinute: 10,
showNow: true,
nowText: "当前",
startYear: currYear,
endYear: currYear+1,
onSelect: function (value) {
//点击确定触发的事件
}
};
var optDateTime = $.extend(opt['datetime'], opt['default']);
$("#"+id).mobiscroll(optDateTime).datetime(optDateTime);
this.mscroller = jq;

2. 简单选项的滑动选择(select)

　　


　　js代码：

$('#' + id).mobiscroll().treelist({
theme: 'android-ics light',
mode: 'scroller',
display: 'bottom',
lang: 'zh',
labels: ['车辆'],
cancelText: null,
headerText: '选择车辆',
formatResult: function (array) {
//返回自定义格式结果
}
});

　　选项内容 以

<select> <option>

形式放在html页面中，代码：

<select id="car_select" data-type="selectP" style="display: none;">
<option>
　　<span>轿车 ******</span>
</option>
...
</select>

3. 树形结构选项的滑动选择(treelist)

　　


　　js代码：

$('#' + id).mobiscroll().treelist({
theme: 'android-ics light',
mode: 'scroller',
display: 'bottom',
lang: 'zh',
labels: ['车辆'],
cancelText: null,
headerText: '选择车辆',
formatResult: function (array) {
//返回自定义格式结果
}
});

　　选项内容 以

<ul> <li>

形式放在html页面中，代码：

<ul id="car_select" data-type="treeList" style="display: none;">
<li>
<span>宝马X7</span>
<ul>
<li>浙A 484816</li>
<li>浙A 178123</li>
<li>浙A 789654</li>
</ul>
</li>
<li>
<span>奥迪A8</span>
<ul>
<li>浙B 999888</li>
<li>浙B 528963</li>
<li>浙B 784511</li>
</ul>
</li>
<li>
<span>奔驰S600</span>
<ul>
<li>浙C 456925</li>
<li>浙C 555555</li>
<li>浙C 578411</li>
</ul>
</li>
</ul>

　　select，treelist控件显示：

$('#' + id).mobiscroll('show');

　　隐藏：

$('#' + id).mobiscroll('hide');