俗話說(shuō)的好，框架是服務(wù)與大家的，包含的功能比較多，代碼多。在現(xiàn)在追求速度的年代。應(yīng)該根據(jù)自己的需求去封裝自己所需要的組件。

下邊就給大家介紹一下自己封裝的一個(gè)小彈框組件，不依賴與jQuery，代碼少，適用于一般移動(dòng)端小項(xiàng)目。

這個(gè)插件名稱：MobileUi

包含功能：彈框，正在加載，tips1.5秒消失，清除正在加載。

如圖：

??

接下來(lái)我來(lái)告訴大家怎么用吧！！

第一步：配置<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:'確認(rèn)刪除', 4 text:'您確認(rèn)要?jiǎng)h除嗎？', 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 /*---第三種--數(shù)據(jù)加載中---*/ 22 MobileUi.init({ 23 type:3 24 }) 25 26 /*---第四種--提示消息自動(dòng)消失 ---*/ 27 MobileUi.init({ 28 type:4, 29 text:'您的手機(jī)號(hào)碼有誤' 30 }) 31 32 /*---第五種--移除數(shù)據(jù)加載 ---*/ 33 MobileUi.init({ 34 type:5 35 })

總結(jié)

以上是生活随笔為你收集整理的移动端（H5）弹框组件--简单--实用--不依赖jQuery的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。