1. 程式人生 > >Mobiscroll的介紹【一款相容PC和移動裝置的滑動外掛】

Mobiscroll的介紹【一款相容PC和移動裝置的滑動外掛】


  Mobiscroll是一個用於觸控裝置的日期和時間選擇器,它的使用不會改變HTML5、PhoneGap以及混合應用的原生使用者體驗。作為一款jQuery滑動選擇外掛,使用者可以自定義主題樣式,為自己的移動專案UI元件添色。Mobiscroll支援所有主流平臺:iOS、Android、BlackBerry, Windows Phone 8以及Amazon Kindle。

它具有如下優點:
1.觸控式UI介面
    在智慧手機和平板的移動裝置上,使用大量的手勢和觸控與mobiscroll進行互動。
2.主題化
    完全的主體化。有各種各樣的主題,但是要經過簡單的額外定製以匹配裝置中使用的主題。
3.整合外掛
    在最受歡迎的MVVM框架和平臺中整合諸如Angular.JS, Knockout, Backbone, Bootstrap, Kendo UI等UI外掛。
4.跨平臺
    真正的跨平臺和跨瀏覽器。可以在主流的移動和桌面瀏覽器上工作。支援iOS, Android, Windows Phone 8, Windows8, Blackberry, Amazon Kindle等平臺。
5.支援多種框架
    不管是使用jQuery, jQuery Mobile, Zepto.JS還是Intel App Framework,Mobiscroll都為上述四種框架提供完美支援。
6.使用者體驗
    所有的元件設計都密切關注使用者體驗和效能。高階控制元件不會讓使用者感到失望。

程式碼示例:

$(function () {
	$('#demo').mobiscroll().treelist({
		theme: 'mobiscroll',//樣式
		display: 'bottom',//指定顯示模式
		fixedWidth: [160,160,160],//三組滾動框的寬度
		placeholder: '請選擇...',//空白等待提示
		lang: 'zh', //語言
		mode:'scroller',//選擇模式  scroller  clickpick  mixed
		rtl:false,//按鈕是否靠右
		headerText:'',//頭部提示文字
		rows:5,//滾動區域內的行數
	//	defaultValue: ['', '', ''],//設定初始值
		labels: ['省', '市', '區'],
		showLabel:true,//是否顯示labels
		closeOnOverlay:false,//如果為ture覆蓋點選將滾動條內資料將關閉遮罩層
		tap:true,
		onSelect: function (valueText, inst) {
			var val = inst.getVal(); // Call the getVal method 
			var value = inst.getValue(); //			
			var arryVal = inst.getArrayVal(); 
			//alert(valueText);  
		},
		formatResult: function (data) { 	
			return data[0] + '_' + data[1]+ '_'+ data[2];
		}
		 
	});
	
});

也可以自定義樣式