Blog Garden Homepage New Essay Contact Management Subscription Essay - 14 Articles - 1 Comment - 0 Use the jquery mobiscroll plugin to select date, select, treeList tools

mobiscroll is a very useful plugin for sliding selection on the mobile side. It can be used to select dates, and can also be used to select simple options or some complex tree-structured options. Simply share.

 

The dependencies are also relatively simple, just introduce a mobiscroll-2.13.2.full.min.js file and a mobiscroll-2.13.2.full.min.css file.

Refer to the official website http://docs.mobiscroll.com

 

1. Select the date, 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: 'Hour',minuteText: 'Minute' ,
                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. Swipe selection of simple options:

js code:

1 $('#' + id).mobiscroll().select({
 2                      theme: 'android-ics light' ,
 3                      mode: 'scroller' ,
 4                      display: 'bottom' ,
 5                      lang: 'zh' ,
 6                      cancelText : null ,
 7                      headerText: 'Select vehicle' ,
 8                      onSelect: function (value) {
 9                          //Click OK to trigger event 12                      }
 13                  });

选项内容select option 形式放在html页面中，代码：

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

 

3.树形结构的选项：

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>浙C 555555</li></li>
                <li>
                    <span>奔驰S600</span>
                    <ul>
                        <li>浙C 456925</li>
                        
                        <li>浙C 578411</li>
                    </ul>
                </li>
            </ul>

 

select, treeList makes the control display:

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

hide:

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

 

 

end