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
- mobiscroll插件使用
- datetimepicker、mobiscroll日期插件使用demo
- mobiscroll插件集成成angularjs指令到项目中使用
- 移动端选择插件mobiscroll的使用demo
- 使用Mobiscroll插件 输入框初始化默认出错问题
- mobiscroll 日期插件 详解
- mobiscroll calendar插件
- mobiscroll 插件札记
- mobiscroll 触屏日期插件
- 手机版日期插件mobiscroll
- mobiscroll 插件札记(一)
- mobiscroll时间插件的用法
- 手机日期插件mobiscroll奇巧淫技&mobiscroll 中文API
- jquery mobile mobiscroll 日期插件使 用mobiscroll
- 手机日期插件mobiscroll奇巧淫技&mobiscroll 中文API
- 兼容PC和移动页面的mobiscroll日期插件之简单使用
- 在ionic中使用mobiscroll插件的问题记录及取值
- mobiscroll
- 30多条mysql数据库优化方法,千万级数据库记录查询轻松解决
- Redis总结
- TextView 画线(中间线、下划线)
- JAVA初学的体会
- 【Accelerated C++】重点回顾(续)
- mobiscroll插件使用
- GPG key generation: Not enough random bytes available.
- Jetty使用固定长度队列,导致无法服务
- 逻辑——真与假的世界
- Android 将类中的文字提取到String.xml中
- springmvc配置
- 实际上Java访问数据库的方式主要有四种
- codeforces 581d
- android学习之选择媒体库中的图片