当前位置: 首页 > 工具软件 > Mobiscroll > 使用案例 >

mobiscroll插件使用

卓学智
2023-12-01

最近做手机端的页面,用到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);
             	
        }		
    });  
})   

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



 类似资料: