最近做手机端的页面,用到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\select
theme: 'default', //皮肤样式,可选:default\android\android-ics light\android-ics\ios\jqm\sense-ui\wp light\wp
display: 'modal', //显示方式 ,可选:modal\inline\bubble\top\bottom
mode: 'scroller', //日期选择模式,可选:scroller\clickpick\mixed
lang:'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);
}
});
})
现在还想实现只显示年月的效果,但是经过测试还没有实现,希望有实现可以告诉我。谢谢!