Mobiscrol is a very useful plug-in for mobile terminal sliding selection. It can be used to select dates, simple options or some complex tree structure options. Simple sharing.
The dependency is also relatively simple, just introduce a mobiscrol-2.13.2.full.min.js file and a mobiscrol-2.13.2.full.min.css file. Download directly mobiscroll-2.13.2 , official website http://docs.mobiscroll.com
1. Date selection
First look at the renderings:
js code:
var opt={};
opt.datetime = {};
opt.default = {
theme: 'ios7',
display: display,
mode: 'scroller',
dateFormat: 'yy-mm-dd',
dateOrder: 'yymmdd',
dayText: 'day', monthText: 'month', yearText: 'year',hourText: 'Time',minuteText: 'branch',
lang: 'zh',
stepMinute: 10,
showNow: true,
nowText: "current",
startYear: currYear,
endYear: currYear+1,
onSelect: function (value) {
//Click OK to trigger the event
}
};
var optDateTime = $.extend(opt['datetime'], opt['default']);
$("#"+id).mobiscroll(optDateTime).datetime(optDateTime);
this.mscroller = jq;2. Slide selection of simple options
js code:
$('#' + id).mobiscroll().treelist({
theme: 'android-ics light',
mode: 'scroller',
display: 'bottom',
lang: 'zh',
labels: ['vehicle'],
cancelText: null,
headerText: 'Select vehicle',
formatResult: function (array) {
//Return custom format results
}
});Option content is placed in html page in the form of < Select > < option >. Code:
<select id="car_select" data-type="selectP" style="display: none;">
<option>
<span>Sedan ******</span>
</option>
...
</select>3. Tree list
js code:
$('#' + id).mobiscroll().treelist({
theme: 'android-ics light',
mode: 'scroller',
display: 'bottom',
lang: 'zh',
labels: ['vehicle'],
cancelText: null,
headerText: 'Select vehicle',
formatResult: function (array) {
//Return custom format results
}
});The option content is placed in the html page in the form of < UL > < li >. Code:
<ul id="car_select" data-type="treeList" style="display: none;">
<li>
<span>BMW X7</span>
<ul>
<li>Zhejiang A 484816</li>
<li>Zhejiang A 178123</li>
<li>Zhejiang A 789654</li>
</ul>
</li>
<li>
<span>Audi A8</span>
<ul>
<li>Zhejiang B 999888</li>
<li>Zhejiang B 528963</li>
<li>Zhejiang B 784511</li>
</ul>
</li>
<li>
<span>Benz S600</span>
<ul>
<li>Zhejiang C 456925</li>
<li>Zhejiang C 555555</li>
<li>Zhejiang C 578411</li>
</ul>
</li>
</ul>select, treelist control displays:
$('#' + id).mobiscroll('show');
Hide:
$('#' + id).mobiscroll('hide');