Use jquery mobiscroll plugin to select Date, select, treelist specific application

Mobiscroll is a very useful plug-in for mobile swipe selection, can be used to select dates, or to choose simple options or some complex tree structure options, simple sharing.

Dependency is also relatively simple, the introduction of a Mobiscroll-2.13.2.full.min.js file and a mobiscroll-2.13.2.full.min.css file can be.

Reference official website http://docs.mobiscroll.com

1. Select a date to see first:

JS Code:

varopt={};Opt.datetime= {};opt.default={theme:' iOS7 ', Display:display, mode:' Scroller ', DateFormat:' Yy-mm-dd ', DateOrder:' YYMMDD ', Daytext:' Day ', Monthtext: ' Month ', Yeartext: ' Year ', Hourtext: ' When ', Minutetext: ' min ', Lang:' En ', Stepminute:10, Shownow:true, Nowtext:Current, Startyear:curryear, Endyear:curryear+1, OnSelect:function(value) {//Click OK to trigger the event                }            }; varOptdatetime = $.extend (opt[' datetime '), opt[' default ']); $("#"+ID). Mobiscroll (Optdatetime). DateTime (Optdatetime);  This. Mscroller = JQ;

2. Sliding selection of simple options:

JS Code:

1$ (' # ' +ID). mobiscroll (). Select ({2Theme: ' Android-ics light ',3Mode: ' Scroller ',4Display: ' Bottom ',5Lang: ' En ',6Canceltext:NULL,7HeaderText: ' Select Vehicle ',8OnSelect:function(value) {9Click OK to trigger the event A                     } -});

The option content is placed in the HTML page in the form of select option, code:

1 <SelectID= "Car_select"Data-type= "SELECTP"style= "Display:none;">3        <option>4         　　 <span>sedan ******</span>5        </option>7 </Select>

3. Tree-shaped structure options:

JS Code:

 $ (' # ' + ID). Mobiscroll (). Treelist ({theme:  ' Android-ics light                    ' , Display:  ' bottom '  ' zh ' , Labels: [ ' vehicle '  null   ' select vehicle ' 

Option content ul li form placed in HTML page, code:

<ulID= "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>Mercedes S600</span>                    <ul>                        <Li>Zhejiang c 456925</Li>                        <Li>Zhejiang c 555555</Li>                        <Li>Zhejiang c 578411</Li>                    </ul>                </Li>            </ul>

Select,treelist the control to display:

$ (' # ' + ID). Mobiscroll (' show ');

Hide:

$ (' # ' + ID). Mobiscroll (' hide ');

End

This article for Bo Master Original, reproduced please indicate the source.

Use jquery mobiscroll plugin to select Date, select, treelist specific application