俗話說的好,框架是服務與大家的,包含的功能比較多,代碼多。在現在追求速度的年代。應該根據自己的需求去封裝自己所需要的組件。 下邊就給大家介紹一下自己封裝的一個小彈框組件,不依賴與jQuery,代碼少,適用於一般移動端小項目。 這個插件名稱:MobileUi 包含功能:彈框,正在載入,tips1.5秒 ...
俗話說的好,框架是服務與大家的,包含的功能比較多,代碼多。在現在追求速度的年代。應該根據自己的需求去封裝自己所需要的組件。
下邊就給大家介紹一下自己封裝的一個小彈框組件,不依賴與jQuery,代碼少,適用於一般移動端小項目。
這個插件名稱:MobileUi
包含功能:彈框,正在載入,tips1.5秒消失,清除正在載入。
如圖:
接下來我來告訴大家怎麼用吧!!
第一步:配置<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
第二步:載入 mobile-ui1.0-compress.js
第三步:用
1 /*---第一種--帶--確定與取消的彈出框 ---*/ 2 MobileUi.init({ 3 title:'確認刪除', 4 text:'您確認要刪除嗎?', 5 type:1, 6 callbak:function(){ 7 console.log('callbak'); 8 } 9 }); 10 11 /*---第二種--帶--確定的彈出框 ---*/ 12 MobileUi.init({ 13 type:2, 14 title:'提示', 15 text:'您的操作有誤', 16 callbak:function(){ 17 console.log('callbak'); 18 } 19 }) 20 21 /*---第三種--數據載入中---*/ 22 MobileUi.init({ 23 type:3 24 }) 25 26 /*---第四種--提示消息自動消失 ---*/ 27 MobileUi.init({ 28 type:4, 29 text:'您的手機號碼有誤' 30 }) 31 32 /*---第五種--移除數據載入 ---*/ 33 MobileUi.init({ 34 type:5 35 })