利用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');