移動端網頁新增ios風格日曆控制元件

         我們在進行手機端網頁開發的時候,往往電腦上那些控制元件就不再適用了,不是很小看不清,就是風格不合適.

         下面就推薦一個適合手機端網頁開發適用的js外掛  ,製作ios風格的日曆控制元件

mobiscroll.all.min.js 

設定ios風格的 日曆控制元件

html 頁面:

 <ul class="title-list">
            <li style="overflow:hidden;">
                <span style="margin-right:20px; float:left;">生 日</span>
                <div style="background:url(static/images/wechathelper/txl_script.png) no-repeat 0px -32px; background-size:18px; padding-left:20px; float:left;">
                    <input id="birthday" name="birthday"  placeholder="點選輸入生日" class="txt formOptions premium" validata="required" type="text" value="" style="font-family:'微軟雅黑';"/>
                </div>
            </li>
        </ul>

 

匯入mobiscroll.all.min.js  及 birthday_component.js 外掛(程式碼連線見文章最後.) 

mobiscroll.all.min.js 是基礎 ,birthday_component.js 是使我們的html程式碼 和 mobiscroll.all.min.js 關聯起來的js 程式碼 .

在birthday_component.js 中設定各種詳細資訊,再將id="birthday" 的input 元件 掛上 日曆控制元件 :$("#birthday").mobiscroll(optDate).date(optDate);

mobiscroll.all.min.js的地址:http://download.csdn.net/detail/yubin2009m/9454657

birthday_component.js 的地址 :http://download.csdn.net/detail/yubin2009m/9454664