mobiscroll 外掛札記（一）
阿新 • • 發佈：2019-01-03
文章參照 http://www.cnblogs.com/headwolf/archive/2013/12/23/3487207.html
最近切一個移動頁面，需要使用彈出日期控制元件，在網上搜了很多控制元件，覺得mobiscroll這個外掛的效果是最好的，但問題是該控制元件是收費的，並且API沒有統一給出，我自己總結了一下，僅供學習
例子：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="../js/jquery.min.js"></script> <title>mobiscroll 日期控制元件例子</title> <script type="text/javascript"> $(document).ready(function(){ function init() { $('#demo_date').mobiscroll().date({ theme: 'ios', /* scroller —— 以wheel滑動方式選擇 clickpick —— 顯示 - + 按鈕選擇 mixed —— 相容以上兩種方式 * */ mode: 'scroller', /* modal —— 顯示在中間 inline —— 直接顯示在頁面中 bubble —— 類似於tip彈出顯示 top —— 顯示在頂部 bottom —— 顯示在底部 */ display: 'bottom', //設定按鈕顯示的樣式 btnClass : 'sqh_color_56 font_16 sqh_line_height_15 margin_10 sqh_font_type', minDate:new Date() , //點選確定按鈕，觸發事件。 onSelect:mobiscroll_select, //當時間選擇的內容發生變化觸發的事件 onChange:mobiscroll_change, //被呼叫之前觸發該方法，可以在顯示之前修改配置檔案 onBeforeShow:mobiscroll_beforeShow, //點選取消按鈕觸發的事件 onCancel:mobiscroll_cancel, //當彈出效果退出的時候執行該方法，在onSelect 和 onCancel之前執行 onClose:mobiscroll_close, // onDestroy:mobiscroll_destroy, //生成完HTML程式碼之後還有顯示程式碼之前執行這個函式，可以自定義HTML內容 onMarkupReady:mobiscroll_markupReady, //顯示位置之前呼叫該方法 onPosition:mobiscroll_position, //改變一個值之後觸發的時間，引數是其中一個的值 //Gets called when the user taps on a value on the wheel. onValueTap:mobiscroll_valueTap, //顯示之前觸發的時間 onShow:mobiscroll_show, //Gets called on initialization and on every wheel change validate:mobiscroll_validate, lang: 'zh' }); } $("#show").click(function(){ $("#demo_date").mobiscroll("show"); }); $("#clear").click(function(){ $("#demo_date").mobiscroll("clear"); }); init(); }); function mobiscroll_validate(item, inst){ } function mobiscroll_show(html, valueText, inst){ } function mobiscroll_valueTap(html, inst){ //html是變化值控制元件的HTML程式碼，與mobiscroll_position中的第一個引數不一致， console.log("valueText : " + html[0].outerHTML); //mobiscroll物件 console.log("inst : " + inst); } function mobiscroll_position(html, inst){ //html是一個數組物件，使用者顯示HTML的內容，代表的是整個顯示控制元件的內容 console.log("html : " + html[0].outerHTML); console.log("inst : " + inst); } function mobiscroll_markupReady(html, inst){ console.log("html : " + html); console.log("inst : " + inst); //inst._markup 就是生成的html 物件 console.log(inst._markup == html); } function mobiscroll_destroy(valueText, btn, inst){ //valueText是選中的值 console.log("valueText : " + valueText); console.log("btn : " + btn); //mobiscroll物件 console.log("inst : " + inst); } function mobiscroll_close(valueText, btn, inst){ //valueText是選中的值 console.log("valueText : " + valueText); console.log("btn : " + btn); //mobiscroll物件 console.log("inst : " + inst); } function mobiscroll_cancel(valueText, inst){ //valueText是選中的值 console.log("valueText : " + valueText); //mobiscroll物件 console.log("inst : " + inst); } function mobiscroll_beforeShow(inst){ //mobiscroll物件 console.log("inst : " + inst); } function mobiscroll_select(valueText,inst){ //valueText是選中的值 console.log("valueText : " + valueText); //mobiscroll物件 console.log("inst : " + inst); } function mobiscroll_change(valueText,inst){ //valueText是選中的值 console.log("valueText : " + valueText); //mobiscroll物件 console.log("inst : " + inst); } </script> </head> <body> <input id="demo_date" placeholder="Please Select ..." /> <button id="clear">Clear</button> <button id="show">Show</button> </body> </html> <script src="../package/mobiscroll/js/mobiscroll.core.js"></script> <script src="../package/mobiscroll/js/mobiscroll.frame.js"></script> <script src="../package/mobiscroll/js/mobiscroll.scroller.js"></script> <script src="../package/mobiscroll/js/mobiscroll.util.datetime.js"></script> <script src="../package/mobiscroll/js/mobiscroll.datetimebase.js"></script> <script src="../package/mobiscroll/js/mobiscroll.datetime.js"></script> <script src="../package/mobiscroll/js/mobiscroll.select.js"></script> <script src="../package/mobiscroll/js/mobiscroll.listbase.js"></script> <script src="../package/mobiscroll/js/mobiscroll.image.js"></script> <script src="../package/mobiscroll/js/mobiscroll.treelist.js"></script> <script src="../package/mobiscroll/js/mobiscroll.frame.ios.js"></script> <script src="../package/mobiscroll/js/mobiscroll.frame.sense-ui.js"></script> <script src="../package/mobiscroll/js/mobiscroll.frame.wp.js"></script> <script src="../package/mobiscroll/js/mobiscroll.mobiscroll-dark.js"></script> <script src="../package/mobiscroll/js/i18n/mobiscroll.i18n.zh.js"></script> <link rel="stylesheet" href="../package/mobiscroll/css/import.css">