移動端(H5)彈框組件--簡單--實用--不依賴jQuery

来源:http://www.cnblogs.com/xiaoxiaokun/archive/2017/02/25/6441926.html
-Advertisement-
Play Games

俗話說的好,框架是服務與大家的,包含的功能比較多,代碼多。在現在追求速度的年代。應該根據自己的需求去封裝自己所需要的組件。 下邊就給大家介紹一下自己封裝的一個小彈框組件,不依賴與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             })

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • display:none和visible:hidden都能把網頁上某個元素隱藏起來,但兩者有區別: display:none 不為被隱藏的對象保留其物理空間,即該對象在頁面上徹底消失。 visible:hidden 使對象在網頁上不可見,但該對象在網頁上扔占據著空間。 例子: <html><head ...
  • 大學畢業以後,因為一些個人瑣事沒有找到自己專業的對口工作,整天混混沌沌得過著也沒有打破現狀的決心和機會。但是每當獨自思考的時候總是一陣陣的害怕,怕自己從此一事無成一無所有。於是在某個心潮澎湃的瞬間開始在網上看一些學習資源,開始自學一些web方面的知識。 經過小段時間的學習,發現自己之前真的是孤陋寡聞 ...
  • 談論jquery中bind(),live(),delegate(),on()綁定事件方式 1. Bind() $(selector).bind(event,data,function) Event:必須項;添加到元素的一個或多個事件。 Data:可選;需要傳遞的參數 Function:必需;當綁定事 ...
  • ▓▓▓▓▓▓ 大致介紹 除了Object之外,Array類型恐怕就是JavaScript種最常用的類型了,JavaScript中的數組與其他語言中的數組有很大的區別,例如,數組的每一項可以存放任何值,並且數組的大小事可以動態調整的 ▓▓▓▓▓▓ 創建數組的兩種方法 創建數組有兩種方法:一是用構造函數 ...
  • -html概念:hyper Text Markup Language (超文本標記語言) Html標簽分類: 1 雙標簽 2 單標簽 Html標簽之間的關係: 1 嵌套關係 2 併列關係 Html單標記: 橫線標記 <hr> 換行標記<br> 註釋標記<!– 註釋文本--> ctrl+/ Html雙 ...
  • css的border屬性相信大家都不陌生了,就是給元素加個邊框嘛,在不同的盒模型下,會給元素的寬高帶來怎樣的影響,相信大家也都很熟悉了,這裡就不再贅述,只說說大家平時沒有怎麼留意的東西。 0.border-color與color 大家平時使用border屬性的時候,通常應該是直接寫border:1p ...
  • JavaScript 數據類型 JavaScript 變數 Javascript 運算符 JavaScript 流程式控制制 JavaScript 數組 JavaScript 函數基礎 JavaScript 字元串函數 JavaScript 正則表達式 DOM 基本操作 Window 對象 ...
  • 第一部分 HTML 第一章 職業規劃和前景 職業方向規劃定位: web前端開發工程師 web網站架構師 自己創業 轉崗管理或其他 web前端開發的前景展望: 未來IT行業企業需求最多的人才 結合最新的html5搶占移動端的市場 自己創業做老闆 隨著互聯網的普及web開發成為企業的寵兒和核心 web職 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...