jQuery Mobile開(kāi)發(fā)中日期插件Mobiscroll使用說(shuō)明

更新時(shí)間：2016年03月02日 11:08:22 作者：zock

這篇文章主要介紹了jQuery Mobile開(kāi)發(fā)中日期插件Mobiscroll使用說(shuō)明,需要的朋友可以參考下

近期在移動(dòng)方面的開(kāi)發(fā)，使用jQuery Mobile ，移動(dòng)方面的插件不如Web 方面的插件多，選擇的更少，有一些需要自己去封裝，但功力尚不足啊。

日期插件JQM也提供了內(nèi)置的，但樣式方面不好看，只好百度、Google啦，找到了兩款 jquery-mobile-datebox 和 mobiscroll-2.3

jqueryMobileDatebox 這個(gè)在板上的表現(xiàn)不好，性能方面有點(diǎn)卡

mobiscroll 性能方面比前者要好一些，效果更簡(jiǎn)潔，劃動(dòng)更流暢

放在一起對(duì)比下

各位看官，你們覺(jué)得哪個(gè)好看一些呢

反正我覺(jué)得 mobiscroll 效果比較好一些，好了來(lái)看一些這個(gè)家伙的使用方法吧

第一步：到官網(wǎng)去下載個(gè)壓縮包，下載需要先注冊(cè)然后才能下載。下載的時(shí)候你可以選擇你使用的框架及皮膚樣式等，看下圖

到此假設(shè)你已經(jīng)成功注冊(cè)并下載啦

第二步、新建一個(gè)HTML5文件，引jquery.js,jquerymobile.js 等等必須的文件，編寫(xiě)如下代碼到你的文件中：

 <div data-role="fieldcontain">
     <label for="txtBirthday">出生日期：</label>
     <input type="text" data-role="datebox"  id="txtBirthday" name="birthday" />
 </div>

我們可以這樣去初始化日期控件：

$('input:jqmData(role="datebox")').mobiscroll().date();

預(yù)覽下吧，是不是可以使用了呢！唯獨(dú)這個(gè)界面是英文的，對(duì)于國(guó)人來(lái)說(shuō)多少有點(diǎn)不爽，而官網(wǎng)又沒(méi)有提供中文語(yǔ)言包，但沒(méi)有關(guān)系，官網(wǎng)的API還是不錯(cuò)的，我們可以設(shè)置一些常用的屬性使之符合常規(guī)的日期格式。

//初始化日期控件
  var opt = {
    preset: 'date', //日期
    theme: 'jqm', //皮膚樣式
    display: 'modal', //顯示方式 
    mode: 'clickpick', //日期選擇模式
    dateFormat: 'yy-mm-dd', // 日期格式
    setText: '確定', //確認(rèn)按鈕名稱
    cancelText: '取消',//取消按鈕名籍我
    dateOrder: 'yymmdd', //面板中日期排列格式
    dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字
    endYear:2020 //結(jié)束年份
  };
  
  $('input:jqmData(role="datebox")').mobiscroll(opt);

這樣就OK啦看下效果圖吧

這下看的清楚了吧。不寫(xiě)啦，就這寫(xiě)這么多吧，官網(wǎng)的DOCS 寫(xiě)的很詳細(xì)啦，在此不一一列出啦，有興趣的朋友可以去研究下。

您可能感興趣的文章:

相關(guān)文章

jquery實(shí)現(xiàn)的提示浮層跟隨鼠標(biāo)移動(dòng)
提示浮層跟隨鼠標(biāo)移動(dòng)(jquery版)
2010-02-02
jquery批量控制form禁用的代碼
這篇文章介紹了jquery批量控制form禁用的代碼，有需要的朋友可以參考一下
2013-08-08
基于jquery的二級(jí)聯(lián)動(dòng)菜單實(shí)現(xiàn)代碼
基于jquery的二級(jí)聯(lián)動(dòng)菜單實(shí)現(xiàn)代碼，腳本之家簡(jiǎn)單整理了幾種。需要的朋友可以參考下，主要是思路
2011-04-04
jQuery如何解決IE輸入框不能輸入的問(wèn)題
在IE10以上版本，微軟為了提高IE輸入框的便利性，增加了文本內(nèi)容全部刪除和密碼眼睛功能，但是有些時(shí)候打開(kāi)新的頁(yè)面里，輸入框卻被鎖定無(wú)法編輯，需要刷新一下頁(yè)面，或者如果輸入框有內(nèi)容需要點(diǎn)擊一下輸入框后面的叉叉后才能輸入，怎么解決呢，下面小編給大家解答下
2016-10-10
jQuery解析json數(shù)據(jù)實(shí)例分析
這篇文章主要介紹了jQuery解析json數(shù)據(jù)的具體實(shí)現(xiàn)方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery解析json格式數(shù)據(jù)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-11-11
jQuery查找節(jié)點(diǎn)方法完整實(shí)例
這篇文章主要介紹了jQuery查找節(jié)點(diǎn)方法,結(jié)合完整實(shí)例形式分析了jQuery針對(duì)DOM節(jié)點(diǎn)屬性的相關(guān)操作技巧,需要的朋友可以參考下
2016-09-09
jQuery實(shí)現(xiàn)動(dòng)畫(huà)效果的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)jQuery實(shí)現(xiàn)動(dòng)畫(huà)效果的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-01-01
jQuery on()方法綁定動(dòng)態(tài)元素的點(diǎn)擊事件無(wú)響應(yīng)的解決辦法
這篇文章主要介紹了jQuery on()方法綁定動(dòng)態(tài)元素的點(diǎn)擊事件無(wú)響應(yīng)的解決辦法的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-07-07
jQuery實(shí)用技巧
使用jquery最重要的就是熟悉它的屬性，方法等，下面總結(jié)的真不錯(cuò)，經(jīng)常用的都總結(jié)出來(lái)了
2008-06-06
在easyUI開(kāi)發(fā)中，出現(xiàn)jquery.easyui.min.js函數(shù)庫(kù)問(wèn)題的解決辦法
easyUI是jquery的一個(gè)插件，是民間的插件，easyUI使用起來(lái)很方便，里面有網(wǎng)頁(yè)制作的最重要的三大方塊：javascript代碼、html代碼和Css樣式，但是很容易出現(xiàn)jquery.easyui.min.js函數(shù)庫(kù)問(wèn)題，小編教大家如何解決問(wèn)題，需要的朋友可以參考下
2015-09-09