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

Created at 2017-05-13 Category programming Tag jQuery times read

  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代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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代码:

1
2
3
4
5
6
7
8
9
10
11
$('#' + id).mobiscroll().select({
theme: 'android-ics light',
mode: 'scroller',
display: 'bottom',
lang: 'zh',
cancelText: null,
headerText: '选择车辆',
onSelect: function(value) {
//点击确定触发事件
}
});

  选项内容 以<select> <option>形式放在html页面中,代码:

1
2
3
4
5
6
<select id="car_select" data-type="selectP" style="display: none;">
<option>
  <span>轿车 ******</span>
</option>
...
</select>

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

  
  js代码:

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

  选项内容 以<ul> <li>形式放在html页面中,代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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控件显示:

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

  隐藏:

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

© 冷泉 Since 2017 - 2018

Total times visits. visitors.

Kwin's Blog | 个人网站