mobiscroll插件使用

来源:互联网 发布:windows正版镜像 编辑:程序博客网 时间:2024/05/22 05:11

最近做手机端的页面,用到mobiscroll插件,现在总结一下:

http://docs.mobiscroll.com/2-13-2 可以在这里参考学习。

在之前,要先下载mobiscroll.custom-2.5.0.min.css和mobiscroll.custom-2.5.0.min.js  ,然后分别引入。再引入一个jquery库。

 写一个效果,带注释:


日期选择:<input id="scroller" name="scroller" />

 $(function(){        $("#scroller").mobiscroll().date();       // $("#scroll2").mobiscroll().image_text();var currYear = (new Date()).getFullYear();        //初始化日期控件var opt = {preset: 'date', //日期,可选:date\datetime\time\tree_list\image_text\selecttheme: 'default', //皮肤样式,可选:default\android\android-ics light\android-ics\ios\jqm\sense-ui\wp light\wpdisplay: 'modal', //显示方式 ,可选:modal\inline\bubble\top\bottommode: 'scroller', //日期选择模式,可选:scroller\clickpick\mixedlang:'zh',dateFormat: 'yyyy-mm-dd', // 日期格式setText: '确定', //确认按钮名称cancelText: '取消',//取消按钮名籍我dateOrder: 'yyyymmdd', //面板中日期排列格式dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字showNow: false,             nowText: "今",              startYear:currYear, //开始年份              endYear:currYear + 100 //结束年份              //endYear:2099 //结束年份};        $("#scroller").mobiscroll(opt);    });


例子2:时间,用24小时格式
默认时间:<input id="scroller2" name="scroller2">
<pre name="code" class="javascript">$(function(){    // create a datepicker with default settings    $("#scroller").mobiscroll().date(); // Shorthand for: $("#scroller").mobiscroll({ preset: 'date' });  $("#scroller2").mobiscroll().time({ //24小时显示格式,默认为12小时显示 timeWheels: 'HHii',   timeFormat: 'HH:ii', });})


例子3:treelist

<span id="a" style="color:red"></span><ul id="treelist">      <li>普通班</li><li>VIP班</li><li>特色班</li><li>至尊班</li><li>女子特训班</li>  </ul>    

$(function () {      $("#treelist").mobiscroll().treelist({          theme: "android-ics light",          lang: "zh",          defaultValue: [Math.floor($('#treelist li').length/2)],         // defaultValue: '普通班',          cancelText: null,          headerText: function (valueText) { return "选择班级"; } ,        onSelect: function (valueText, inst) {var select_text =  $('#treelist li:eq('+valueText+')').text();$('#treelist_dummy').val(select_text);$('#a').val(select_text);                     }    });  })   

现在还想实现只显示年月的效果,但是经过测试还没有实现,希望有实现可以告诉我。谢谢!



0 0