移動端常用alert、confirm、toast等彈窗外掛，相容 jQueryZepto
移動端彈窗外掛第二版，包括常見的 alert、confirm、toast、notice 四種類型彈窗，支援 jQuery 和 Zepto 庫。
特性
- 支援常見的 alert、confirm、toast、notice 四種類型彈窗
- 可選擇使用 IOS 或者 Material Design 風格的彈窗
- 可自定義按鈕的文字、樣式、回撥函式，支援多個按鈕
- 多個彈窗狀態改變回調函式
- 同時支援 jQuery 和 Zepto 庫
- 可擴充套件性強
新增
- 彈窗可選 IOS 或者 Material Design 風格
- 可自定義多個按鈕
- 按鈕排版樣式，並排或者堆疊
- notice 彈窗的位置，居中或者底部
截圖
示例
檢視效果，掃二維碼或者移步→：demo示例
使用說明
1、引入 CSS 檔案
<link
rel="stylesheet"
href="../css/dialog.css">
|
2、引入 JS 檔案
<script
src="../lib/zepto.min.js"></script>
<script
src="../js/dialog.js"></script>
|
3、HTML 結構
<button
id="btn-01">顯示彈窗</button>
|
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 檔案
|