移動端常用alert、confirm、toast等彈窗插件，兼容 jQuery/Zepto

khlbat 發布于2019-08-21 17:36 / 2674人閱讀

移動端彈窗插件第二版，包括常見的 alert、confirm、toast、notice 四種類型彈窗，支持 jQuery 和 Zepto 庫。

特性

支持常見的 alert、confirm、toast、notice 四種類型彈窗

可選擇使用 IOS 或者 Material Design 風格的彈窗

可自定義按鈕的文字、樣式、回調函數，支持多個按鈕

多個彈窗狀態改變回調函數

同時支持 jQuery 和 Zepto 庫

可擴展性強

新增

彈窗可選 IOS 或者 Material Design 風格

可自定義多個按鈕

按鈕排版樣式，并排或者堆疊

notice 彈窗的位置，居中或者底部

截圖

示例

查看效果，掃二維碼或者移步→：demo示例

使用說明

1、引入 CSS 文件

2、引入 JS 文件

3、HTML 結構

4、實例化

$(document).on("click", "#btn-01", function() {
    var dialog1 = $(document).dialog({
        content: "Dialog 移動端彈窗插件的自定義提示內容",
    });
});

參數

參數	默認值	說明
type	"alert"	彈窗的類型。alert: 確定; confirm: 確定/取消; toast: 狀態提示; notice: 提示信息
style	"default"	alert 與 confirm 彈窗的風格。 default: 根據訪問設備平臺; ios: ios 風格; android: MD design 風格
titleShow	true	是否顯示標題
titleText	"提示"	標題文字
closeBtnShow	false	是否顯示關閉按鈕
content	""	彈窗提示內容, 值可以是 HTML 內容
contentScroll	true	alert 與 confirm 彈窗提示內容是否限制最大高度, 使其可以滾動
dialogClass	""	彈窗自定義 class
autoClose	0	彈窗自動關閉的延遲時間(毫秒)。 0: 不自動關閉; 大于0: 自動關閉彈窗的延遲時間
overlayShow	true	是否顯示遮罩層
overlayClose	false	是否可以點擊遮罩層關閉彈窗
buttonStyle	"side"	按鈕排版樣式。side: 并排; stacked: 堆疊
buttonTextConfirm	"確定"	確定按鈕文字
buttonTextCancel	"取消"	取消按鈕文字
buttonClassConfirm	""	確定按鈕自定義 class
buttonClassCancel	""	取消按鈕自定義 class
buttons	[]	confirm 彈窗自定義按鈕組, 會覆蓋"確定"與"取消"按鈕; 單個 button 對象可設置 name [ 名稱 ]、class [ 自定義class ]、callback [ 點擊執行的函數 ]
infoIcon	""	toast 與 notice 彈窗的提示圖標, 值為圖標的路徑。不設置=不顯示
infoText	""	toast 與 notice 彈窗的提示文字, 會覆蓋 content 的設置
position	"center"	notice 彈窗的位置, center: 居中; bottom: 底部

回調函數

函數	默認值	說明
onClickConfirmBtn	function(){}	點擊“確定”按鈕的回調函數
onClickCancelBtn	function(){}	點擊“取消”按鈕的回調函數
onClickCloseBtn	function(){}	點擊“關閉”按鈕的回調函數
onBeforeShow	function(){}	彈窗顯示前的回調函數
onShow	function(){}	彈窗顯示后的回調函數
onBeforeClosed	function(){}	彈窗關閉前的回調函數
onClosed	function(){}	彈窗關閉后的回調函數

方法

方法	說明
obj.close	關閉對話框。用法：dialogObj.close()
obj.update	更改 toast 和 notice 類型彈窗內容 ( 圖標以及提示文字 ) 可傳入參數： content: 彈窗內容, 可以是HTML infoIcon: 彈窗提示圖標 infoText: 彈窗提示文字 autoClose: 自動關閉的延遲時間 onBeforeClosed: 關閉前回調函數 onClosed: 關閉后回調函數

目錄結構

.
├─dist ? ? ? ? ? ? ?  # 項目發布資源目錄, Grunt 生成
│  ├─css              # 項目 CSS 文件
│  ├─demos            # 項目示例頁面
│  ├─images           # 項目 image 文件
│  ├─js               # 項目 JS 文件
│  │  ├─dialog.js     # 彈窗 JS
│  │  ├─dialog.min.js # 彈窗最小版本 JS
│  │  └─example.js    # 示例 JS
│  └─lib              # 公共 JS 文件
│
├─src                 # 實際進行開發的目錄
│  ├─css              # 項目 CSS 文件, 由 Grunt 生成
│  ├─demos            # 項目示例頁面
│  ├─images           # 項目 image 文件
│  ├─js               # 項目 JS 文件
│  │  ├─dialog.js     # 彈窗主要 JS
│  │  ├─example.js    # 示例 JS
│  │  ├─ripple.js     # 點擊水波紋效果 JS
│  │  └─tapEvent.js   # 點擊事件 JS
│  ├─lib              # 公共 JS 文件
│  ├─scss             # 項目相關 SCSS 文件
│  └─templates        # 初始靜態 DMEO 資源目錄
│
├─Gruntfile.js        # Grunt任務配置
├─_config.json        # Grunt配置所需信息
└─package.json        # 項目信息以及依賴

Grunt 使用方法

1、安裝 Grunt

npm install

2、在本地運行項目

grunt serve

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89742.html

基于 Vue 2.0 實現的移動端彈窗 (Alert, Confirm, Toast)組件.

摘要：基于開發的插件包含仿照原生樣式來源一些想法剛開始的時候想要用現成的彈窗組件來著但是查找一圈沒有發現比較合適項目的所以才自己開發了一個包含四種并且可以單個引入的組件開發實際上比較簡單有興趣的可以看下源碼實現步驟很清晰關于樣式的問題是直接從魅 wc-messagebox 基于 vue 2.0 開發的插件包含 Alert, Confirm, Toast, Prompt 仿照 iOS 原生...

Darkgel 2019-08-21 11:41 評論0 收藏0
Vue.extend用法（主要用于需要動態渲染的組件，或者類似于window.alert() 提示

摘要：一簡單的使用主要用于需要動態渲染的組件，或者類似于提示組件注意創建的是一個組件構造器，而不是一個具體的組件實例屬于的全局，在實際業務開發中我們很少使用，因為相比常用的寫法使用步驟要更加繁瑣一些。最近在重構公司的項目，有些組件想要封裝的更靈活，例如toast、loading、messageBox等彈窗組件，模仿了mint-ui封裝此類組件的方式封裝了自己的彈窗組件； mint-UI的t...

masturbator 2019-08-23 18:35 評論0 收藏0
移動端開發（使用webuploader上傳圖片,客戶端交互,修改alert彈窗等）

摘要：之前實習做的一個移動端的頁面需要的功能有圖片上傳點擊客戶端的返回按鈕有提示即與客戶端有交互遇到不少的坑總結一下問題圖片上傳功能使用工具百度的暫時遇到的坑刪除圖片實際上并沒有完全刪除需要自己在源碼上添加詳情看的提問上傳的圖片旋轉角度有問題比之前實習做的一個移動端的頁面需要的功能有圖片上傳點擊客戶端的返回按鈕有提示(即與客戶端有交互）遇到不少的坑總結一下問題 1.圖片上傳功能 ...

李昌杰 2019-08-19 17:26 評論0 收藏0
移動彈窗基礎知識淺析——IOS彈窗體系

摘要：尤其是遇到二次確認等場景因此，打算從頭整理移動彈窗的基礎知識，以彈窗體系為切入點，從定義出發，對移動彈窗進行分類，然后分別分析每一類彈窗的應用場景，以及在使用過程中需要注意的點。摘要：最為常見的【彈窗】反而是最捉摸不定的東西。各種類型的彈窗傻傻分不清楚，不知道在什么場景下應該用哪種彈窗。尤其是遇到二次確認等場景…… 因此，打算從頭整理移動彈窗的基礎知識，以iOS彈窗體系為切入點，從...

jas0n 2019-06-28 10:58 評論0 收藏0
溫故js系列（11）-BOM

摘要：確定和取消彈框，按確定返回，按取消或者關閉按鈕返回。官方瀏覽器名返回所使用瀏覽器的名稱。對象有一個屬性，表示對象中的記錄數。屬性描述屏幕的寬度屏幕的高度窗口可以使用的屏幕的寬度窗口可以使用的屏幕的高度對象見溫故系列前端學習：教程&開發模塊化/規范化/工程化/優化&工具/調試&值得關注的博客/Git&面試-前端資源匯總歡迎提issues斧正：BOM JavaScript-BOM BO...

xorpay 2019-08-20 10:34 評論0 收藏0