html5手机页面日历控件_触屏滑动日期选择器



124 493 165



特效描述:html5手机页面 日历控件 触屏滑动 日期选择器,jQuery Mobile 移动网站开发之日期控件Mobiscroll 2.17.1全部示例

代码结构

1. 引入CSS

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/mobiscroll.custom-2.17.1.min.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/mobiscroll.custom-2.17.1.min.js" type="text/javascript"></script>

3. HTML代码

    <!-- ------------------------------------------------------------------ -->
    <!-- Demo configurator markup START, ignore this in your implementation -->
    <div class="header">
        <h1>Mobiscroll</h1>
    </div>
    <div id="main">
        <div>
            <label for="theme">Theme</label>
            <select name="theme" id="theme" class="settings">
                <option value="">Default / Auto</option>
                <option value="mobiscroll">Mobiscroll</option>
                <option value="jqm">jQuery Mobile</option>
                <option value="ios-classic">iOS Classic</option>
                <option value="android-holo">Android Holo</option>
                <option value="android">Android</option>
                <option value="sense-ui">Sense UI</option>
                <option value="wp">Windows Phone</option>
                <option value="ios">iOS</option>
                <option value="bootstrap">Bootstrap</option>
                <option value="sense">Sense</option>
                <option value="android-holo-light">Android Holo Light</option>
                <option value="wp-light">Windows Phone Light</option>
                <option value="sense-dark">Sense Dark</option>
                <option value="mobiscroll-dark">Mobiscroll Dark</option>
                <option value="material">Material</option>
                <option value="material-dark">Material Dark</option>
            </select>
        </div>
        <div>
            <label for="mode">Mode</label>
            <select name="mode" id="mode" class="settings">
                <option value="scroller">Scroller</option>
                <option value="clickpick">Clickpick</option>
                <option value="mixed">Mixed</option>
            </select>
        </div>
        <div>
            <label for="display">Display</label>
            <select name="display" id="display" class="settings">
                <option value="modal">Modal</option>
                <option value="inline">Inline</option>
                <option value="bubble">Bubble</option>
                <option value="top">Top</option>
                <option value="bottom">Bottom</option>
            </select>
        </div>
        <div>
            <label for="language">Language</label>
            <select name="language" id="language" class="settings">
                <option value="">English</option>
                <option value="zh">Chinese</option>
            </select>
        </div>
        <div>
            <label for="demo">Demo</label>
            <select name="demo" id="demo" class="settings">
                <optgroup label="Datetime">
                    <option value="datetimeDate" selected>Basic usage date</option>
                    <option value="datetimeInvalid" >Datetime with invalids</option>
                    <option value="datetimeTime" >Basic usage time</option>
                    <option value="datetimeMinmax" >Date with min and max</option>
                </optgroup>
                <optgroup label="Select">
                    <option value="selectBasic" >Basic usage</option>
                    <option value="selectGroupselect" >Group options</option>
                    <option value="selectMultiple" >Multiple select</option>
                </optgroup>
                <optgroup label="Rating">
                    <option value="ratingStars" >Basic usage</option>
                    <option value="ratingGrades" >Grades</option>
                    <option value="ratingIcons" >Custom Icons</option>
                </optgroup>
                <optgroup label="Distance">
                    <option value="distanceDistance" >Distance</option>
                </optgroup>
                <optgroup label="Speed">
                    <option value="speedSpeed" >Speed</option>
                </optgroup>
                <optgroup label="Temperature">
                    <option value="temperatureTemperature" >Temperature</option>
                </optgroup>
                <optgroup label="Mass">
                    <option value="massMass" >Mass</option>
                </optgroup>
                <optgroup label="Force">
                    <option value="forceForce" >Force</option>
                </optgroup>
                <optgroup label="List">
                    <option value="listTreelist" >Basic usage</option>
                    <option value="listUnordered" >Unordered list</option>
                </optgroup>
                <optgroup label="Image">
                    <option value="imageText" >Image and Text</option>
                    <option value="imageBasic" >Image Only</option>
                    <option value="imageIcons" >Icon and Text</option>
                </optgroup>
                <optgroup label="Calendar">
                    <option value="calendarTime" >With time scroller</option>
                    <option value="calendarBasic" >Basic usage</option>
                    <option value="calendarMultiday" >Multi day select</option>
                </optgroup>
                <optgroup label="Timespan">
                    <option value="timespanBasic" >Basic usage</option>
                    <option value="timespanDhm" >Day/Hour/Minute span</option>
                </optgroup>
                <optgroup label="Timer">
                    <option value="timerCountdown" >Countdown</option>
                </optgroup>
                <optgroup label="Color">
                    <option value="colorHx" >Basic usage</option>
                </optgroup>
                <optgroup label="Range">
                    <option value="rangeBasic" >Basic usage</option>
                    <option value="rangeTime" >Time range</option>
                    <option value="rangeTwoinputs" >Two inputs</option>
                </optgroup>
                <optgroup label="Listview">
                    <option value="listviewUpdate" >Create, remove, update</option>
                    <option value="listviewSorthandle" >Sort handle</option>
                    <option value="listviewActionmenu" >Action menu</option>
                </optgroup>
                <optgroup label="Number">
                    <option value="numberDecimal" >Decimal</option>
                    <option value="numberStep" >Step</option>
                </optgroup>
                <optgroup label="Numpad">
                    <option value="numpadDecimal" > Decimal</option>
                    <option value="numpadCurrency" >Currency</option>
                    <option value="numpadTime" >Time</option>
                    <option value="numpadPin" >Masked Entry - PIN</option>
                </optgroup>
                <optgroup label="Menustrip">
                    <option value="menustripTabs" >Tab menu</option>
                </optgroup>
                <optgroup label="Widget">
                    <option value="widgetDialog" >Dialog</option>
                    <option value="widgetMessage" >Alert message</option>
                </optgroup>
                <optgroup label="Scroller">
                    <option value="scrollerCustomunits" >Custom Units</option>
                </optgroup>
                <optgroup label="Forms">
                    <option value="formsTextfields" >Text Fields</option>
                    <option value="formsSelect" >Select</option>
                    <option value="formsCheckbox" >Checkbox</option>
                    <option value="formsSwitch" >Switch</option>
                    <option value="formsRadiobtn" >Radio buttons</option>
                    <option value="formsButtons" >Buttons</option>
                    <option value="formsTypography" >Typography</option>
                    <option value="formsSlider" >Slider</option>
                    <option value="formsStepper" >Stepper</option>
                    <option value="formsProgress" >Progress</option>
                    <option value="formsSegmented" >Segmented</option>
                </optgroup>
            </select>
        </div>
    </div>
    <!-- Demo configurator markup END -->
    <!-- ------------------------------------------------------------------ -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage date START -->
    <div class="demo-wrapper demo-wrapper-datetimeDate">
        <input id="datetimeDate-demo" placeholder="Please Select ..." />
        <button id="datetimeDate-clear">Clear</button>
        <button id="datetimeDate-show">Show</button>
    </div>
    <!-- Basic usage date END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Datetime with invalids START -->
    <div class="demo-wrapper demo-wrapper-datetimeInvalid">
        <input id="datetimeInvalid-demo" placeholder="Please Select ..." />
        <button id="datetimeInvalid-clear">Clear</button>
        <button id="datetimeInvalid-show">Show</button>
    </div>
    <!-- Datetime with invalids END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage time START -->
    <div class="demo-wrapper demo-wrapper-datetimeTime">
        <input id="datetimeTime-demo" placeholder="Please Select ..." />
        <button id="datetimeTime-clear">Clear</button>
        <button id="datetimeTime-show">Show</button>
    </div>
    <!-- Basic usage time END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage START -->
    <div class="demo-wrapper demo-wrapper-selectBasic">
        <select name="City" id="selectBasic-demo">
            <option value="1">Atlanta</option>
            <option value="2">Berlin</option>
            <option value="3">Boston</option>
            <option value="4">Chicago</option>
            <option value="5">London</option>
            <option value="6">Los Angeles</option>
            <option value="7">New York</option>
            <option value="8">Paris</option>
            <option value="9">San Francisco</option>
        </select>
        <button id="selectBasic-clear">Clear</button>
        <button id="selectBasic-show">Show</button>
    </div>
    <!-- Basic usage END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Group options START -->
    <div class="demo-wrapper demo-wrapper-selectGroupselect">
        <select id="selectGroupselect-demo">
            <optgroup label="USA">
                <option value="1">Atlanta</option>
                <option value="2">Boston</option>
                <option value="3">Chicago</option>
                <option value="4">Los Angeles</option>
                <option value="5">New York</option>
                <option value="6">San Francisco</option>
            </optgroup>
            <optgroup label="UK">
                <option value="7">Bath</option>
                <option value="8">Bristol</option>
                <option value="9">Cambridge</option>
                <option value="10">London</option>
                <option value="11">Leeds</option>
                <option value="12">Manchester</option>
                <option value="13">Newcastle</option>
                <option value="14">Oxford</option>
            </optgroup>
            <optgroup label="China">
                <option value="15">Beijing</option>
                <option value="16">Chongqing</option>
                <option value="17">Shanghai</option>
                <option value="18">Shenzhen</option>
                <option value="19">Tianjin</option>
            </optgroup>
        </select>
        <button id="selectGroupselect-clear">Clear</button>
        <button id="selectGroupselect-show">Show</button>
    </div>
    <!-- Group options END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage START -->
    <div class="demo-wrapper demo-wrapper-ratingStars">
        <ul class="md-products">
            <li>
                <div class="md-product">
                    <img src="images/product1.png" />
                    <h3>Chocolate sticks</h3>
                    <p>Chocolate sticks</p>
                    <span class="md-rate">
                        <span class="md-rating">4 of 5</span>
                    </span>
                </div>
            </li>
            <li>
                <div class="md-product">
                    <img src="images/product2.png" />
                    <h3>Chocolate chips</h3>
                    <p>Chocolate chips</p>
                    <span class="md-rate">
                        <span class="md-rating">4 of 5</span>
                    </span>
                </div>
            </li>
            <li>
                <div class="md-product">
                    <img src="images/product3.png" />
                    <h3>Milk chocolate</h3>
                    <p>Milk chocolate</p>
                    <span class="md-rate">
                        <span class="md-rating">3 of 5</span>
                    </span>
                </div>
            </li>
            <li>
                <div class="md-product">
                    <img src="images/product4.png" />
                    <h3>Chocolate cupcake</h3>
                    <p>Chocolate cupcake</p>
                    <span class="md-rate">
                        <span class="md-rating">5 of 5</span>
                    </span>
                </div>
            </li>
            <li>
                <div class="md-product">
                    <img src="images/product5.png" />
                    <h3>Chocolate with air</h3>
                    <p>Chocolate with air bubbles</p>
                    <span class="md-rate">
                        <span class="md-rating">5 of 5</span>
                    </span>
                </div>
            </li>
            <li>
                <div class="md-product">
                    <img src="images/product6.png" />
                    <h3>Chocolate truffles</h3>
                    <p>Chocolate truffles</p>
                    <span class="md-rate">
                        <span class="md-rating">5 of 5</span>
                    </span>
                </div>
            </li>
        </ul>
    </div>
    <!-- Basic usage END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Grades START -->
    <div class="demo-wrapper demo-wrapper-ratingGrades">
        <input id="ratingGrades-demo" placeholder="Please Select ..." />
        <button id="ratingGrades-clear">Clear</button>
        <button id="ratingGrades-show">Show</button>
    </div>
    <!-- Grades END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Distance START -->
    <div class="demo-wrapper demo-wrapper-distanceDistance">
        <input id="distanceDistance-demo" placeholder="Please Select ..." />
        <button id="distanceDistance-clear">Clear</button>
        <button id="distanceDistance-show">Show</button>
    </div>
    <!-- Distance END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Speed START -->
    <div class="demo-wrapper demo-wrapper-speedSpeed">
        <input id="speedSpeed-demo" placeholder="Please Select ..." />
        <button id="speedSpeed-clear">Clear</button>
        <button id="speedSpeed-show">Show</button>
    </div>
    <!-- Speed END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Temperature START -->
    <div class="demo-wrapper demo-wrapper-temperatureTemperature">
        <input id="temperatureTemperature-demo" placeholder="Please Select ..." />
        <button id="temperatureTemperature-clear">Clear</button>
        <button id="temperatureTemperature-show">Show</button>
    </div>
    <!-- Temperature END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Mass START -->
    <div class="demo-wrapper demo-wrapper-massMass">
        <input id="massMass-demo" placeholder="Please Select ..." />
        <button id="massMass-clear">Clear</button>
        <button id="massMass-show">Show</button>
    </div>
    <!-- Mass END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Force START -->
    <div class="demo-wrapper demo-wrapper-forceForce">
        <input id="forceForce-demo" placeholder="Please Select ..." />
        <button id="forceForce-clear">Clear</button>
        <button id="forceForce-show">Show</button>
    </div>
    <!-- Force END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage START -->
    <div class="demo-wrapper demo-wrapper-listTreelist">
        <ul id="listTreelist-demo" style="display:none">
            <li data-val="Eastern Division">East
                <ul>
                    <li data-val="Marketing">Marketing
                        <ul>
                            <li data-val="Eden E">Eden E</li>
                            <li data-val="Milda J">Milda J</li>
                            <li data-val="Porfirio R">Porfirio R</li>
                        </ul>
                    </li>
                    <li data-val="Research & Development">R&D
                        <ul>
                            <li data-val="Frances P">Frances P</li>
                            <li data-val="Frank D">Frank D</li>
                            <li data-val="Gianny P">Gianny P</li>
                            <li data-val="Ivan F">Ivan F</li>
                            <li data-val="John M">John M</li>
                            <li data-val="Mildred S">Mildred S</li>
                            <li data-val="Sam P">Sam P</li>
                        </ul>
                    </li>
                    <li data-val="Sales">Sales
                        <ul>
                            <li data-val="Edelmira R">Edelmira R</li>
                            <li data-val="Francie S">Francie S</li>
                            <li data-val="Lean F">Lean F</li>
                            <li data-val="Kirby C">Kirby C</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li data-val="Western Division">West
                <ul>
                    <li data-val="Marketing">Marketing
                        <ul>
                            <li data-val="Cliff B">Cliff B</li>
                            <li data-val="Helen D">Helen D</li>
                            <li data-val="Stephan V">Stephan V</li>
                        </ul>
                    </li>
                    <li data-val="Research & Development">R&D
                        <ul>
                            <li data-val="Andy G">Andy G</li>
                            <li data-val="Danny A">Danny A</li>
                            <li data-val="Ennio M">Ennio M</li>
                            <li data-val="Emil E">Emil E</li>
                            <li data-val="Frank S">Frank S</li>
                            <li data-val="Gonzo G">Gonzo G</li>
                            <li data-val="Hal A">Hal A</li>
                            <li data-val="Jack G">Jack G</li>
                            <li data-val="John A">John A</li>
                            <li data-val="Simon D">Simon D</li>
                            <li data-val="Victor S">Victor S</li>
                        </ul>
                    </li>
                    <li data-val="Sales">Sales
                        <ul>
                            <li data-val="Dana A">Dana A</li>
                            <li data-val="Frank D">Frank D</li>
                            <li data-val="Leanna S">Leanna S</li>
                            <li data-val="Michael D">Michael D</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
        <button id="listTreelist-clear">Clear</button>
        <button id="listTreelist-show">Show</button>
    </div>
    <!-- Basic usage END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Image and Text START -->
    <div class="demo-wrapper demo-wrapper-imageText">
        <ul id="imageText-demo" style="display:none">
            <li data-val="BMW">
              <img src="images/BMW_logo.png" />
              <p>BMW</p>
            </li>
            <li data-val="Dacia">
              <img src="images/Dacia_logo.png" />
              <p>Dacia</p>
            </li>
            <li data-val="Ferrari">
              <img src="images/ferrari_logo.png" />
              <p>Ferrari</p>
            </li>
            <li data-val="Mercedes">
              <img src="images/mercedes_logo.png" />
              <p>Mercedes</p>
            </li>
            <li data-val="Opel">
              <img src="images/opel_logo.png" />
              <p>Opel</p>
            </li>
            <li data-val="Renault">
              <img src="images/renault_logo.png" />
              <p>Renault</p>
            </li>
            <li data-val="Volkswagen">
              <img src="images/volkswagen_logo.png" />
              <p>Volkswagen</p>
            </li>
        </ul>
        <button id="imageText-clear">Clear</button>
        <button id="imageText-show">Show</button>
    </div>
    <!-- Image and Text END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Image Only START -->
    <div class="demo-wrapper demo-wrapper-imageBasic">
        <ul id="imageBasic-demo" style="display:none">
            <li data-val="1">
              <img src="http://mobiscroll.com/content/img/fruit-1.png" />
            </li>
            <li data-val="2">
              <img src="http://mobiscroll.com/content/img/fruit-2.png" />
            </li>
            <li data-val="3">
              <img src="http://mobiscroll.com/content/img/fruit-3.png" />
            </li>
            <li data-val="4">
              <img src="http://mobiscroll.com/content/img/fruit-4.png" />
            </li>
            <li data-val="5">
              <img src="http://mobiscroll.com/content/img/fruit-5.png" />
            </li>
            <li data-val="6">
              <img src="http://mobiscroll.com/content/img/fruit-1.png" />
            </li>
            <li data-val="7">
              <img src="http://mobiscroll.com/content/img/fruit-2.png" />
            </li>
            <li data-val="8">
              <img src="http://mobiscroll.com/content/img/fruit-3.png" />
            </li>
            <li data-val="9">
              <img src="http://mobiscroll.com/content/img/fruit-4.png" />
            </li>
            <li data-val="10">
              <img src="http://mobiscroll.com/content/img/fruit-5.png" />
            </li>
            <li data-val="11">
              <img src="http://mobiscroll.com/content/img/fruit-1.png" />
            </li>
            <li data-val="12">
              <img src="http://mobiscroll.com/content/img/fruit-2.png" />
            </li>
            <li data-val="13">
              <img src="http://mobiscroll.com/content/img/fruit-3.png" />
            </li>
            <li data-val="14">
              <img src="http://mobiscroll.com/content/img/fruit-4.png" />
            </li>
            <li data-val="15">
              <img src="http://mobiscroll.com/content/img/fruit-5.png" />
            </li>
            <li data-val="16">
              <img src="http://mobiscroll.com/content/img/fruit-1.png" />
            </li>
            <li data-val="17">
              <img src="http://mobiscroll.com/content/img/fruit-2.png" />
            </li>
            <li data-val="18">
              <img src="http://mobiscroll.com/content/img/fruit-3.png" />
            </li>
            <li data-val="19">
              <img src="http://mobiscroll.com/content/img/fruit-4.png" />
            </li>
            <li data-val="20">
              <img src="http://mobiscroll.com/content/img/fruit-5.png" />
            </li>
        </ul>
        <button id="imageBasic-clear">Clear</button>
        <button id="imageBasic-show">Show</button>
    </div>
    <!-- Image Only END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Unordered list START -->
    <div class="demo-wrapper demo-wrapper-listUnordered">
        <ul id="listUnordered-demo" style="display:none">
            <li>Sugar</li>
            <li>Salt</li>
            <li>Butter</li>
            <li>Flour</li>
            <li>Chocolate</li>
        </ul>
        <button id="listUnordered-clear">Clear</button>
        <button id="listUnordered-show">Show</button>
    </div>
    <!-- Unordered list END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- With time scroller START -->
    <div class="demo-wrapper demo-wrapper-calendarTime">
        <input id="calendarTime-demo" placeholder="Please Select ..." />
        <button id="calendarTime-clear">Clear</button>
        <button id="calendarTime-show">Show</button>
    </div>
    <!-- With time scroller END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage START -->
    <div class="demo-wrapper demo-wrapper-calendarBasic">
        <input id="calendarBasic-demo" placeholder="Please Select ..." />
        <button id="calendarBasic-clear">Clear</button>
        <button id="calendarBasic-show">Show</button>
    </div>
    <!-- Basic usage END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Multi day select START -->
    <div class="demo-wrapper demo-wrapper-calendarMultiday">
        <input id="calendarMultiday-demo" placeholder="Please Select ..." />
        <button id="calendarMultiday-clear">Clear</button>
        <button id="calendarMultiday-show">Show</button>
    </div>
    <!-- Multi day select END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Multiple select START -->
    <div class="demo-wrapper demo-wrapper-selectMultiple">
        <select name="Category" id="selectMultiple-demo" multiple>
            <option value="1">Books</option>
            <option value="2">Movies, Music & Games</option>
            <option value="3" selected>Electronics & Computers</option>
            <option value="4" selected>Home, Garden & Tools</option>
            <option value="5">Health & Beauty</option>
            <option value="6">Toys, Kids & Baby</option>
            <option value="7">Clothing & Jewelry</option>
            <option value="8">Sports & Outdoors</option>
            <option value="9">Automotive & Industrial</option>
        </select>
        <button id="selectMultiple-clear">Clear</button>
        <button id="selectMultiple-show">Show</button>
    </div>
    <!-- Multiple select END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage START -->
    <div class="demo-wrapper demo-wrapper-timespanBasic">
        <input id="timespanBasic-demo" placeholder="Please Select ..." />
        <button id="timespanBasic-clear">Clear</button>
        <button id="timespanBasic-show">Show</button>
    </div>
    <!-- Basic usage END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Day/Hour/Minute span START -->
    <div class="demo-wrapper demo-wrapper-timespanDhm">
        <input id="timespanDhm-demo" placeholder="Please Select ..." />
        <button id="timespanDhm-clear">Clear</button>
        <button id="timespanDhm-show">Show</button>
    </div>
    <!-- Day/Hour/Minute span END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Countdown START -->
    <div class="demo-wrapper demo-wrapper-timerCountdown">
        <input id="timerCountdown-demo" placeholder="Please Select ..." />
    </div>
    <!-- Countdown END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage START -->
    <div class="demo-wrapper demo-wrapper-colorHx">
        <b>Please choose color</b><br/>
        <div id="colorHx-demo" class="md-color">#ff0000</div>
    </div>
    <!-- Basic usage END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage START -->
    <div class="demo-wrapper demo-wrapper-rangeBasic">
        <input id="rangeBasic-demo" placeholder="Please Select ..." />
        <button id="rangeBasic-clear">Clear</button>
        <button id="rangeBasic-show">Show</button>
    </div>
    <!-- Basic usage END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Time range START -->
    <div class="demo-wrapper demo-wrapper-rangeTime">
        <input id="rangeTime-demo" placeholder="Please Select ..." />
        <button id="rangeTime-clear">Clear</button>
        <button id="rangeTime-show">Show</button>
    </div>
    <!-- Time range END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Two inputs START -->
    <div class="demo-wrapper demo-wrapper-rangeTwoinputs">
        <label for="rangeTwoinputs-startDate">Start</label><br/>
        <input id="rangeTwoinputs-startDate" placeholder="Please Select ..." readonly/>
        <label for="rangeTwoinputs-endDate">End</label><br/>
        <input id="rangeTwoinputs-endDate" placeholder="Please Select ..." readonly/>
        <div id="rangeTwoinputs-demo"></div>
    </div>
    <!-- Two inputs END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Create, remove, update START -->
    <div class="demo-wrapper demo-wrapper-listviewUpdate">
        <div id="listviewUpdate-demo_note" class="md-demo-note demo-note" style="display:none;">
            Whooa, list is empty. Tap here to refresh!
            &nbsp;<span class="mbsc-ic mbsc-ic-loop2"></span>
        </div>
        <ul id="listviewUpdate-demo" class="md-wo-list" style="display:none">
            <li data-id="listviewUpdate-1">Work order #0001<div class="md-wo-status">Assigned</div></li>
            <li data-id="listviewUpdate-2">Work order #0002<div class="md-wo-status">Assigned</div></li>
            <li data-id="listviewUpdate-3">Work order #0003<div class="md-wo-status">Assigned</div></li>
            <li data-id="listviewUpdate-4">Work order #0004<div class="md-wo-status">Assigned</div></li>
            <li data-id="listviewUpdate-5">Work order #0005<div class="md-wo-status">Assigned</div></li>
            <li data-id="listviewUpdate-6">Work order #0006<div class="md-wo-status">Assigned</div></li>
        </ul>
    </div>
    <!-- Create, remove, update END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Sort handle START -->
    <div class="demo-wrapper demo-wrapper-listviewSorthandle">
        <ul id="listviewSorthandle-demo" style="display:none">
            <li><img src="images/m1.png" /><h3>Barry Lyon</h3><p>(202) 555-0193</p></li>
            <li><img src="images/f1.png" /><h3>Hortense Tinker</h3><p>(202) 555-0127</p></li>
            <li><img src="images/m2.png" /><h3>Carl Hambledon</h3><p>(202) 555-0147</p></li>
            <li><img src="images/f2.png" /><h3>Arlene Sharman</h3><p>(202) 555-0190</p></li>
            <li><img src="images/m3.png" /><h3>Noble Blythe</h3><p>(202) 555-0176</p></li>
            <li><img src="images/f3.png" /><h3>Angelica Geary</h3><p>(202) 555-0107</p></li>
            <li><img src="images/m4.png" /><h3>Lowell Christophers</h3><p>(202) 555-0120</p></li>
            <li><img src="images/f4.png" /><h3>Leilah Gregory</h3><p>(202) 555-0189</p></li>
        </ul>
    </div>
    <!-- Sort handle END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Action menu START -->
    <div class="demo-wrapper demo-wrapper-listviewActionmenu">
        <ul id="listviewActionmenu-demo" style="display:none">
            <li data-type="folder" data-icon="folder">Music
               <ul>
                   <li data-type="music" data-icon="music">Track 1</li>
                   <li data-type="music" data-icon="music">Track 2</li>
                   <li data-type="music" data-icon="music">Track 3</li>
               </ul>
            </li>
            <li data-type="folder" data-icon="folder">Photos
               <ul>
                   <li data-type="picture" data-icon="image2">Image 1</li>
                   <li data-type="picture" data-icon="image2">Image 2</li>
                   <li data-type="picture" data-icon="image2">Image 3</li>
               </ul>
            </li>
            <li data-type="folder" data-icon="folder">Videos
               <ul>
                   <li data-type="movie" data-icon="play">Movie 1</li>
                   <li data-type="movie" data-icon="play">Movie 2</li>
                   <li data-type="movie" data-icon="play">Movie 3</li>
               </ul>
            </li>
            <li data-type="picture" data-icon="image2">Image 1</li>
            <li data-type="picture" data-icon="image2">Image 2</li>
            <li data-type="picture" data-icon="image2">Image 3</li>
            <li data-type="picture" data-icon="image2">Image 4</li>
            <li data-type="picture" data-icon="image2">Image 5</li>
            <li data-type="picture" data-icon="file4">File 1</li>
            <li data-type="picture" data-icon="file4">File 2</li>
        </ul>
    </div>
    <!-- Action menu END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Custom Icons START -->
    <div class="demo-wrapper demo-wrapper-ratingIcons">
        <input id="ratingIcons-demo" placeholder="Please Select ..." />
        <button id="ratingIcons-clear">Clear</button>
        <button id="ratingIcons-show">Show</button>
    </div>
    <!-- Custom Icons END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Decimal START -->
    <div class="demo-wrapper demo-wrapper-numberDecimal">
        <input id="numberDecimal-demo" placeholder="Please Select ..." />
        <button id="numberDecimal-clear">Clear</button>
        <button id="numberDecimal-show">Show</button>
    </div>
    <!-- Decimal END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!--  Decimal START -->
    <div class="demo-wrapper demo-wrapper-numpadDecimal">
        <input id="numpadDecimal-demo" placeholder="Please Select ..." />
        <button id="numpadDecimal-clear">Clear</button>
        <button id="numpadDecimal-show">Show</button>
    </div>
    <!--  Decimal END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Currency START -->
    <div class="demo-wrapper demo-wrapper-numpadCurrency">
        <input id="numpadCurrency-demo" placeholder="Please Select ..." />
        <button id="numpadCurrency-clear">Clear</button>
        <button id="numpadCurrency-show">Show</button>
    </div>
    <!-- Currency END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Time START -->
    <div class="demo-wrapper demo-wrapper-numpadTime">
        <input id="numpadTime-demo" placeholder="Please Select ..." />
        <button id="numpadTime-clear">Clear</button>
        <button id="numpadTime-show">Show</button>
    </div>
    <!-- Time END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Masked Entry - PIN START -->
    <div class="demo-wrapper demo-wrapper-numpadPin">
        <input id="numpadPin-demo" placeholder="Please Select ..." />
        <button id="numpadPin-clear">Clear</button>
        <button id="numpadPin-show">Show</button>
    </div>
    <!-- Masked Entry - PIN END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Date with min and max START -->
    <div class="demo-wrapper demo-wrapper-datetimeMinmax">
        <input id="datetimeMinmax-demo" placeholder="Please Select ..." />
        <button id="datetimeMinmax-clear">Clear</button>
        <button id="datetimeMinmax-show">Show</button>
    </div>
    <!-- Date with min and max END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Tab menu START -->
    <div class="demo-wrapper demo-wrapper-menustripTabs">
        <ul id="menustripTabs-demo" style="display:none;">
            <li data-tab="tab-downloaded" data-selected="true">Downloaded</li>
            <li data-tab="tab-all">All</li>
            <li data-tab="tab-external">External storage</li>
            <li data-tab="tab-running">Running</li>
            <li data-tab="tab-disabled">Disabled</li>
        </ul>
        <div id="menustripTabs-tab-downloaded" class="md-tab-h md-tab-sel">
            <ul class="md-apps-ul" style="display:none;">
                <li><span class="md-app-ic mbsc-ic mbsc-ic-calendar"></span>Calendar<span class="md-app-detail"><span class="md-app-size">26.71MB</span><span class="md-app-date">19/11/2014</span></span></li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-camera"></span>Camera<span class="md-app-detail"><span class="md-app-size">43.11MB</span><span class="md-app-date">10/11/2014</span></span></li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-folder"></span>File Manager<span class="md-app-detail"><span class="md-app-size">12.66MB</span><span class="md-app-date">9/11/2014</span></span></li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-earth"></span>Maps<span class="md-app-detail"><span class="md-app-size">46.21MB</span><span class="md-app-date">21/10/2014</span></span></li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-newspaper"></span>News<span class="md-app-detail"><span class="md-app-size">24.00MB</span><span class="md-app-date">20/11/2014</span></span></li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-play"></span>Youtube<span class="md-app-detail"><span class="md-app-size">26.47MB</span><span class="md-app-date">18/10/2014</span></span></li>
            </ul>
        </div>
        <div id="menustripTabs-tab-external" class="md-tab-h">
            <ul class="md-apps-ul" style="display:none;">
                <li><span class="md-app-ic mbsc-ic mbsc-ic-calendar"></span>Calendar<span class="md-app-detail"><span class="md-app-size">26.71MB</span><span class="md-app-date">09/09/2014</span></span></li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-earth"></span>Maps<span class="md-app-detail"><span class="md-app-size">46.21MB</span><span class="md-app-date">19/08/2014</span></span></li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-newspaper"></span>News<span class="md-app-detail"><span class="md-app-size">24.00MB</span><span class="md-app-date">17/11/2014</span></span></li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-play"></span>Youtube<span class="md-app-detail"><span class="md-app-size">26.47MB</span><span class="md-app-date">16/11/2014</span></span></li>
            </ul>
        </div>
        <div id="menustripTabs-tab-running" class="md-tab-h">
            <ul class="md-apps-ul" style="display:none;">
                <li><span class="md-app-ic mbsc-ic mbsc-ic-clock"></span>Clock<span class="md-app-detail"><span class="md-app-size">1.52MB</span><span class="md-app-date">16/10/2014</span></span></li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-folder"></span>File Manager<span class="md-app-detail"><span class="md-app-size">12.66MB</span><span class="md-app-date">10/11/2014</span></span></li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-bubble"></span>Messages<span class="md-app-detail"><span class="md-app-size">25.57MB</span><span class="md-app-date">09/11/2014</span></span></li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-newspaper"></span>News<span class="md-app-detail"><span class="md-app-size">24.00MB</span><span class="md-app-date">08/11/2014</span></span></li>
            </ul>
        </div>
        <div id="menustripTabs-tab-all" class="md-tab-h">
            <ul class="md-apps-ul" style="display:none;">
                <li><span class="md-app-ic mbsc-ic mbsc-ic-globe"></span>Browser<span class="md-app-detail"><span class="md-app-size">74.68MB</span><span class="md-app-date">18/11/2014</span></span></li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-calendar"></span>Calendar<span class="md-app-detail"><span class="md-app-size">26.71MB</span><span class="md-app-date">17/11/2014</span></span></li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-camera"></span>Camera<span class="md-app-detail"><span class="md-app-size">43.11MB</span><span class="md-app-date">19/10/2014</span></span></li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-clock"></span>Clock<span class="md-app-detail"><span class="md-app-size">1.52MB</span><span class="md-app-date">10/10/2014</span></span></li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-user4"></span>Contacts<span class="md-app-detail"><span class="md-app-size">5.43MB</span><span class="md-app-date">11/08/2014</span></span></li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-copy3"></span>Docs<span class="md-app-detail"><span class="md-app-size">32.41MB</span><span class="md-app-date">19/11/2014</span></span></li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-folder"></span>File Manager<span class="md-app-detail"><span class="md-app-size">12.66MB</span><span class="md-app-date">18/11/2014</span></span></li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-image2"></span>Gallery<span class="md-app-detail"><span class="md-app-size">1.68MB</span><span class="md-app-date">17/11/2014</span></span></li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-earth"></span>Maps<span class="md-app-detail"><span class="md-app-size">46.21MB</span><span class="md-app-date">18/11/2014</span></span></li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-phone"></span>Phone<span class="md-app-detail"><span class="md-app-size">1.28MB</span><span class="md-app-date">19/11/2014</span></span></li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-foundation-mail"></span>Email<span class="md-app-detail"><span class="md-app-size">6.65MB</span><span class="md-app-date">05/07/2014</span></span></li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-bubble"></span>Messages<span class="md-app-detail"><span class="md-app-size">25.57MB</span><span class="md-app-date">06/06/2014</span></span></li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-newspaper"></span>News<span class="md-app-detail"><span class="md-app-size">24.00MB</span><span class="md-app-date">20/10/2014</span></span></li>
                <li><span class="md-app-ic mbsc-ic mbsc-ic-play"></span>Youtube<span class="md-app-detail"><span class="md-app-size">26.47MB</span><span class="md-app-date">18/11/2014</span></span></li>
            </ul>
        </div>
        <div id="menustripTabs-tab-disabled" class="md-tab-h">
            <ul class="md-apps-ul" style="display:none;">
                <li><span class="md-app-ic mbsc-ic mbsc-ic-user4"></span>Contacts<span class="md-app-detail"><span class="md-app-size">26.71MB</span><span class="md-app-date">17/11/2014</span></span></li>
            </ul>
        </div>
    </div>
    <!-- Tab menu END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Icon and Text START -->
    <div class="demo-wrapper demo-wrapper-imageIcons">
        <ul id="imageIcons-demo" style="display:none">
            <li data-val="Share" data-icon="share"><p>Share</p></li>
            <li data-val="Bookmark" data-icon="star"><p>Bookmark</p></li>
            <li data-val="Flag" data-icon="flag"><p>Flag</p></li>
            <li data-val="Tag" data-icon="tag"><p>Tag</p></li>
            <li data-val="Download" data-icon="download"><p>Download</p></li>
            <li data-val="Delete" data-icon="remove"><p>Delete</p></li>
        </ul>
        <button id="imageIcons-clear">Clear</button>
        <button id="imageIcons-show">Show</button>
    </div>
    <!-- Icon and Text END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Step START -->
    <div class="demo-wrapper demo-wrapper-numberStep">
        <input id="numberStep-demo" placeholder="Please Select ..." />
        <button id="numberStep-clear">Clear</button>
        <button id="numberStep-show">Show</button>
    </div>
    <!-- Step END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Dialog START -->
    <div class="demo-wrapper demo-wrapper-widgetDialog">
        <div id="widgetDialog-demo" style="display: none;">
             <div class="md-dialog">
                <h3 class="md-text-center">Hi Molly</h3>
                <p class="md-text-center">How are you feeling today?</p>
            </div>
        </div>
        <button id="widgetDialog-show">How are you feeling?</button>
    </div>
    <!-- Dialog END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Alert message START -->
    <div class="demo-wrapper demo-wrapper-widgetMessage">
        <div id="widgetMessage-demo" style="display: none;">
            <div class="md-body">
                <h3>Use Google's location service?</h3>
                <p>Let Google help apps determine location. This meas sending anonymus location data to Google, even when no apps are running.</p>
            </div>
        </div>
        <button id="widgetMessage-show">Use Location Services?</button>
    </div>
    <!-- Alert message END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Custom Units START -->
    <div class="demo-wrapper demo-wrapper-scrollerCustomunits">
        <input id="scrollerCustomunits-demo" placeholder="Please Select ..." />
        <button id="scrollerCustomunits-clear">Clear</button>
        <button id="scrollerCustomunits-show">Show</button>
    </div>
    <!-- Custom Units END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Text Fields START -->
    <div class="demo-wrapper demo-wrapper-formsTextfields">
        <div id="formsTextfields-demo" style="display:none" mbsc-enhance>
            <div class="mbsc-divider">Single-line text</div>
            <div>
                <label for="formsTextfields-name">Label</label>
                <input id="formsTextfields-name" type="text" placeholder="Text field label" />
            </div>
            <label>
                Password
                <input type="password" placeholder="Text field with icon" data-icon="lock2" />
            </label>
            <label>
                Password Toggle
                <input type="password" placeholder="Text field with icon" data-icon="lock2" data-password-toggle="true" />
            </label>
            <label>
                <input type="text" placeholder="Text field with right icon" data-icon="pencil" data-icon-align="right" />
            </label>
            <label>
                <input type="text" placeholder="Text field disabled" disabled/>
            </label>
            <label class="mbsc-err">
                <input type="text" placeholder="Text field with error style"  />
            </label>
            <label class="mbsc-err">
                <input type="text" placeholder="Text field with error style and message"  />
                <span class="mbsc-err-msg">Error message!</span>
            </label>
            <div class="mbsc-divider">Multi-line text</div>
            <label>
                Label
                <textarea></textarea>
            </label>
            <label>
                <textarea data-icon="pencil" data-icon-align="right"></textarea>
            </label>
            <label>
                Label
                <textarea data-icon="bubble" data-icon-align="left"></textarea>
            </label>
            <label>
                <textarea placeholder="disabled" disabled></textarea>
            </label>
            <label class="mbsc-err">
                <textarea></textarea>
                <span class="mbsc-err-msg">Error message!</span>
            </label>
        </div>
    </div>
    <!-- Text Fields END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Select START -->
    <div class="demo-wrapper demo-wrapper-formsSelect">
        <div id="formsSelect-demo" style="display:none" mbsc-enhance>
            <div class="mbsc-divider">Select</div>
            <label>
                Label
                <select class="md-select">
                    <option>Select</option>
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="mercedes">Mercedes</option>
                    <option value="audi">Audi</option>
                </select>
            </label>
            <label>
                <select class="md-select" data-icon="plus" data-icon-align="right">
                    <option>Select with icon</option>
                    <option value="opel">Opel</option>
                    <option value="renault">Renault</option>
                    <option value="Citroen">Citroen</option>
                    <option value="Lotus">Lotus</option>
                </select>
            </label>
            <label>
                <select class="md-select" data-icon="plus" data-icon-align="left">
                    <option>Select with right icon</option>
                    <option value="Peugeot">Peugeot</option>
                    <option value="Porsche">Porsche</option>
                    <option value="Fiat">Fiat</option>
                    <option value="Volkswagen">Volkswagen</option>
                </select>
            </label>
            <label class="mbsc-err">
                <select class="md-select">
                    <option>Select error</option>
                    <option value="Ferrari">Ferrari</option>
                    <option value="Honda">Honda</option>
                    <option value="Suzuki">Suzuki</option>
                    <option value="Lamborghini">Lamborghini</option>
                </select>
            </label>
            <label>
                <select disabled>
                    <option>Select disabled</option>
                    <option value="Bentley">Bentley</option>
                    <option value="Morgan">Morgan</option>
                    <option value="Chevrolet">Chevrolet</option>
                    <option value="Dodge">Dodge</option>
                </select>
            </label>
        </div>
    </div>
    <!-- Select END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Checkbox START -->
    <div class="demo-wrapper demo-wrapper-formsCheckbox">
        <div id="formsCheckbox-demo" style="display:none" mbsc-enhance>
            <div class="mbsc-divider">Checkbox</div>
            <label>
                <input type="checkbox" checked>
                Option 1
                <span class="mbsc-desc">Checked checkbox</span>
            </label>
            <label>
                <input type="checkbox">
                Option 2
                <span class="mbsc-desc">Empty checkbox</span>
            </label>
            <label>
                <input type="checkbox" disabled> 
                Option 3
                <span class="mbsc-desc">Disabled checkbox</span>
            </label>
            <label>
                <input type="checkbox" checked disabled>
                Option 4
                <span class="mbsc-desc">Disabled and checked checkbox</span>
            </label>
        </div>
    </div>
    <!-- Checkbox END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Switch START -->
    <div class="demo-wrapper demo-wrapper-formsSwitch">
        <div id="formsSwitch-demo" style="display:none" mbsc-enhance>
            <div class="mbsc-divider">Switch</div>
            <label>
                <input data-role="switch" type="checkbox"> Switch Off
                <span class="mbsc-desc">This is description for Switch</span>
            </label>
            <label>
                <input data-role="switch" type="checkbox" checked> Switch On
                <span class="mbsc-desc">This is description for Switch 2</span>
            </label>
            <label>
                <input data-role="switch" type="checkbox" disabled> Disabled Switch Off
            </label>
            <label>
                <input data-role="switch" type="checkbox" disabled checked> Disabled Switch On
            </label>
        </div>
    </div>
    <!-- Switch END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Radio buttons START -->
    <div class="demo-wrapper demo-wrapper-formsRadiobtn">
        <div id="formsRadiobtn-demo" style="display:none" mbsc-enhance>
            <div class="mbsc-divider">Radio buttons</div>
            <label>
                <input type="radio" name="group" checked> Radio Option 1
                <span class="mbsc-desc">This is description for radio 1</span>
            </label>
            <label>
                <input type="radio" name="group"> Radio Option 2
                <span class="mbsc-desc">This is description for radio 2</span>
            </label>
            <label>
                <input type="radio" name="group"> Radio Option 3
            </label>
            <label>
                <input type="radio" name="group" disabled> Disabled
            </label>
        </div>
    </div>
    <!-- Radio buttons END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Buttons START -->
    <div class="demo-wrapper demo-wrapper-formsButtons">
        <div id="formsButtons-demo" style="display:none" mbsc-enhance>
            <div class="mbsc-divider">Buttons</div>
            <div class="mbsc-btn-group">
                <button>Button</button>
                <button disabled>Disabled</button>
            </div>
            <div class="mbsc-padding">
                <button class="mbsc-btn-block">Full width button</button>
                <button class="mbsc-btn-block" disabled>Disabled full width</button>
            </div>
        <div class="mbsc-divider">Icons</div>
            <div class="mbsc-btn-group">
                <button data-icon="tag"></button>
                <button data-icon="heart"></button>
                <button data-icon="flag" disabled></button>
            </div>
            <div class="mbsc-btn-group">
                <button data-icon="tag">Tag</button>
                <button data-icon="heart">Favorite</button>
                <button data-icon="flag" disabled>Flag</button>
            </div>
            <div class="mbsc-divider">Flat Buttons</div>
            <div class="mbsc-btn-group">
                <button class="mbsc-btn-flat">Flat</button>
                <button class="mbsc-btn-flat" data-icon="arrow-left5">Flat & Icon</button>
                <button class="mbsc-btn-flat" data-icon="arrow-left5"></button>
                <button class="mbsc-btn-flat" data-icon="key2" disabled></button>
                <button class="mbsc-btn-flat" disabled>Flat disabled</button>
            </div>
        </div>
    </div>
    <!-- Buttons END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Typography START -->
    <div class="demo-wrapper demo-wrapper-formsTypography">
        <div id="formsTypography-demo" style="font-family: inherit;" mbsc-enhance>	
            <div class="mbsc-padding">
                <h1>Heading 1</h1>
                <h2>Heading 2</h2>
                <h3>Heading 3</h3>
                <h4>Heading 4</h4>
                <h5>Heading 5</h5>
                <h6>Heading 6</h6>
                <p class="mbsc-bold"> Bold paragraph with a <a href="#">link</a> inside.</p>
                <p class="mbsc-medium"> Medium paragraph with a <a href="#">link</a> inside.</p>
                <p class="mbsc-thin"> Thin paragraph with a <a href="#">link</a> inside.</p>
                <p class="mbsc-italic"> Italic paragraph with a <a href="#">link</a> inside.</p>
            </div>
        </div>
    </div>
    <!-- Typography END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Slider START -->
    <div class="demo-wrapper demo-wrapper-formsSlider">
        <div id="formsSlider-demo" style="display:none" mbsc-enhance>
            <div class="mbsc-divider">Sound settings</div>
            <label>
                <input type="range" value="30" data-icon='{ "left": "volume-mute2", "right": "volume-high" }' />
            </label>
            <label>
                <input type="range" value="50" data-icon="alarm2" disabled />
            </label>
            <label>
                Weight
                <input type="range" value="130" min="80" max="300" data-val="left" data-template="{value} lbs" data-highlight="false" />
            </label>
            <label>
                Price
                <input type="range" value="100" min="0" max="500" step="25" data-tooltip="true" data-step-labels="[0, 100, 200, 300, 400, 500]">
                <input type="range" value="400" min="0" max="500" step="25" />
            </label>
            <label>
                Steps
                <input type="range" value="50" min="0" max="100" step="25" data-step-labels="[0, 25, 50, 75, 100]">
            </label>
            <label>
                Multiple
                <input type="range" value="100" min="0" max="3000" data-tooltip="true" data-step-labels="[0, 500, 1000, 1500, 2000, 2500, 3000]">
                <input type="range" value="500" min="0" max="3000" />
                <input type="range" value="2000" min="0" max="3000" />
                <input type="range" value="2800" min="0" max="3000" />
            </label>
        </div>
    </div>
    <!-- Slider END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Stepper START -->
    <div class="demo-wrapper demo-wrapper-formsStepper">
        <div id="formsStepper-demo" style="display:none" mbsc-enhance>
            <div class="mbsc-divider">Passengers</div>
            <div>
                <label for="formsStepper-md-adults">Adults</label>
                <span class="mbsc-desc">From 14 years</span>
                <input id="formsStepper-md-adults" type="number" data-role="stepper" min="1" value="1" max="15" />
            </div>
            <div>
                <label for="formsStepper-md-children">Children</label>
                <span class="mbsc-desc">2-14 years</span>
                <input id="formsStepper-md-children" type="number" data-role="stepper" max="15" data-val="left" />
            </div>
            <div>
                <label for="formsStepper-md-infant">Infant</label>
                <span class="mbsc-desc">0-2 years</span>
                <input id="formsStepper-md-infant" type="number" data-role="stepper" data-val="left"  max="10" />
            </div>
                <div class="mbsc-divider">Luggage</div>
            <label>
                Allow overweight luggage
                <input class="md-allow" type="checkbox" />
            </label>
            <div>
                <label for="formsStepper-md-luggage">Weight</label>
                <span class="mbsc-desc">(kg)</span>
                <input id="formsStepper-md-luggage" type="number" class="md-luggage" data-role="stepper" data-val="left" min="30" max="80" step="5" value="30" disabled />
            </div>
            <div class="mbsc-divider">Stepper with Numpad</div>
            <div>
                <label for="formsStepper-md-luggage">Consumption</label>
                <div class="mbsc-desc">(mpg)</div>
                <input id="formsStepper-md-consumption" class="md-consumption" type="number" data-role="stepper" data-val="left" min="5" max="120" step=".5" value="30" readonly />
                <div class="md-numpad"></div>
            </div>
        </div>
    </div>
    <!-- Stepper END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Progress START -->
    <div class="demo-wrapper demo-wrapper-formsProgress">
        <div id="formsProgress-demo" style="display:none" mbsc-enhance>
            <div class="mbsc-divider">Downloading file</div>
            <label>
                <progress id="formsProgress-download" value="0" max="100" data-icon='{ "left": "cloud-download" }' data-val="right"></progress>
            </label>
            <div class="mbsc-btn-group">
                <button class="mbsc-btn md-restart">Restart download</button>
            </div>
            <label>
                <progress id="formsProgress-progress" value="0" max="100" data-step-labels="[0, 25, 50, 75, 100]"></progress>
            </label>
            <div class="mbsc-btn-group">
                <button class="mbsc-btn md-update">Update progress</button>
            </div>
            <div class="mbsc-divider">Cloud upload</div>
            <label class="md-upload">
                <progress  value="0" id="formsProgress-uploadProg" max="100" data-step-labels="[0, 33, 66, 100]" data-icon='{ "left": "cloud-upload" }'></progress>
            </label>
            <div class="mbsc-btn-group">
                <button class="mbsc-btn md-restart-up">Restart upload</button>
            </div>
            <div class="mbsc-divider">Checkout process</div>
            <label class="md-demo">
                <progress id="formsProgress-cartProg" value="0" max="100" data-step-labels="[0, 33, 66, 100]"></progress>
            </label>
            <div class="mbsc-btn-group">
                <button class="mbsc-btn md-next-step">Next step</button>
            </div></div>
    </div>
    <!-- Progress END -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- ------------------------------------------------------------------------------- -->
    <!-- Segmented START -->
    <div class="demo-wrapper demo-wrapper-formsSegmented">
        <div id="formsSegmented-demo" style="display:none" mbsc-enhance>
        <div class="mbsc-divider">Single select</div>
            <label>
                Day
                <input type="radio" data-role="segmented" name="range">
            </label>
            <label>
                Week
                <input type="radio" data-role="segmented" name="range" checked>
            </label>
            <label>
                Month
                <input type="radio" data-role="segmented" name="range">
            </label>
            <label>
                Year
                <input type="radio" data-role="segmented" name="range" checked>
            </label>
            <div class="mbsc-divider">Multiple select</div>
            <label>
                S
                <input type="checkbox" data-role="segmented" name="week" disabled>
            </label>
            <label>
                M
                <input type="checkbox" data-role="segmented" name="week" checked>
            </label>
            <label>
                T
                <input type="checkbox" data-role="segmented" name="week" >
            </label>
            <label>
                W
                <input type="checkbox" data-role="segmented" name="week" >
            </label>
            <label>
                T
                <input type="checkbox" data-role="segmented" name="week" checked>
            </label>
            <label>
                F
                <input type="checkbox" data-role="segmented" name="week" >
            </label>
            <label>
                S
                <input type="checkbox" data-role="segmented" name="week" disabled>
            </label>
            <div class="mbsc-divider">Text and Icon</div>
            <label>
                Featured
                <input type="radio" data-role="segmented" data-icon="material-star" name="app" checked>
            </label>
            <label>
                Explore
                <input type="radio" data-role="segmented" data-icon="material-explore" name="app">
            </label>
            <label>
                Updates
                <input type="radio" data-role="segmented" data-icon="material-system-update" name="app">
            </label>
            <div class="mbsc-divider">Icon</div>
            <label>
                <input type="radio" data-role="segmented" data-icon="fa-mail-reply" name="settings">
            </label>
            <label>
                <input type="radio" data-role="segmented" data-icon="fa-retweet" name="settings">
            </label>
            <label>
                <input type="radio" data-role="segmented" data-icon="star3" name="settings" checked>
            </label>
            <label>
                <input type="radio" data-role="segmented" data-icon="cogs" name="settings">
            </label>
            <div class="mbsc-divider">Disabled</div>
            <label>
                Idividual
                <input type="radio" data-role="segmented" name="org" disabled checked>
            </label>
            <label>
                Team
                <input type="radio" data-role="segmented" name="org" disabled>
            </label>
            <label>
                Company
                <input type="radio" data-role="segmented" name="org" disabled>
            </label>
        </div>
    </div>
    <!-- Segmented END -->
    <!-- ------------------------------------------------------------------------------- -->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动滑过 拖动拽动 弹出层拖动 窗口提示框 切换按钮 日历日期时间 form表单 文字拖动 日历选择器 提示框/弹出层 时间日期插件 文字滑动 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到