成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

khlbat / 2692人閱讀

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

特性

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

可選擇使用 IOS 或者 Material Design 風(fēng)格的彈窗

可自定義按鈕的文字、樣式、回調(diào)函數(shù)，支持多個(gè)按鈕

多個(gè)彈窗狀態(tài)改變回調(diào)函數(shù)

同時(shí)支持 jQuery 和 Zepto 庫

可擴(kuò)展性強(qiáng)

新增

彈窗可選 IOS 或者 Material Design 風(fēng)格

可自定義多個(gè)按鈕

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

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

截圖



示例

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

使用說明

1、引入 CSS 文件

2、引入 JS 文件

3、HTML 結(jié)構(gòu)

4、實(shí)例化

$(document).on("click", "#btn-01", function() {
    var dialog1 = $(document).dialog({
        content: "Dialog 移動(dòng)端彈窗插件的自定義提示內(nèi)容",
    });
});
參數(shù)
參數(shù) 默認(rèn)值 說明
type "alert" 彈窗的類型。alert: 確定; confirm: 確定/取消; toast: 狀態(tài)提示; notice: 提示信息
style "default" alert 與 confirm 彈窗的風(fēng)格。
default: 根據(jù)訪問設(shè)備平臺(tái); ios: ios 風(fēng)格; android: MD design 風(fēng)格
titleShow true 是否顯示標(biāo)題
titleText "提示" 標(biāo)題文字
closeBtnShow false 是否顯示關(guān)閉按鈕
content "" 彈窗提示內(nèi)容, 值可以是 HTML 內(nèi)容
contentScroll true alert 與 confirm 彈窗提示內(nèi)容是否限制最大高度, 使其可以滾動(dòng)
dialogClass "" 彈窗自定義 class
autoClose 0 彈窗自動(dòng)關(guān)閉的延遲時(shí)間(毫秒)。
0: 不自動(dòng)關(guān)閉; 大于0: 自動(dòng)關(guān)閉彈窗的延遲時(shí)間
overlayShow true 是否顯示遮罩層
overlayClose false 是否可以點(diǎn)擊遮罩層關(guān)閉彈窗
buttonStyle "side" 按鈕排版樣式。side: 并排; stacked: 堆疊
buttonTextConfirm "確定" 確定按鈕文字
buttonTextCancel "取消" 取消按鈕文字
buttonClassConfirm "" 確定按鈕自定義 class
buttonClassCancel "" 取消按鈕自定義 class
buttons [] confirm 彈窗自定義按鈕組, 會(huì)覆蓋"確定"與"取消"按鈕;
單個(gè) button 對(duì)象可設(shè)置 name [ 名稱 ]、class [ 自定義class ]、callback [ 點(diǎn)擊執(zhí)行的函數(shù) ]
infoIcon "" toast 與 notice 彈窗的提示圖標(biāo), 值為圖標(biāo)的路徑。不設(shè)置=不顯示
infoText "" toast 與 notice 彈窗的提示文字, 會(huì)覆蓋 content 的設(shè)置
position "center" notice 彈窗的位置, center: 居中; bottom: 底部
回調(diào)函數(shù)
函數(shù) 默認(rèn)值 說明
onClickConfirmBtn function(){} 點(diǎn)擊“確定”按鈕的回調(diào)函數(shù)
onClickCancelBtn function(){} 點(diǎn)擊“取消”按鈕的回調(diào)函數(shù)
onClickCloseBtn function(){} 點(diǎn)擊“關(guān)閉”按鈕的回調(diào)函數(shù)
onBeforeShow function(){} 彈窗顯示前的回調(diào)函數(shù)
onShow function(){} 彈窗顯示后的回調(diào)函數(shù)
onBeforeClosed function(){} 彈窗關(guān)閉前的回調(diào)函數(shù)
onClosed function(){} 彈窗關(guān)閉后的回調(diào)函數(shù)
方法
方法 說明
obj.close 關(guān)閉對(duì)話框。
用法：dialogObj.close()
obj.update 更改 toast 和 notice 類型彈窗內(nèi)容 ( 圖標(biāo)以及提示文字 )
可傳入?yún)?shù)：
content: 彈窗內(nèi)容, 可以是HTML
infoIcon: 彈窗提示圖標(biāo)
infoText: 彈窗提示文字
autoClose: 自動(dòng)關(guān)閉的延遲時(shí)間
onBeforeClosed: 關(guān)閉前回調(diào)函數(shù)
onClosed: 關(guān)閉后回調(diào)函數(shù)
目錄結(jié)構(gòu) 
.
├─dist ? ? ? ? ? ? ?  # 項(xiàng)目發(fā)布資源目錄, Grunt 生成
│  ├─css              # 項(xiàng)目 CSS 文件
│  ├─demos            # 項(xiàng)目示例頁面
│  ├─images           # 項(xiàng)目 image 文件
│  ├─js               # 項(xiàng)目 JS 文件
│  │  ├─dialog.js     # 彈窗 JS
│  │  ├─dialog.min.js # 彈窗最小版本 JS
│  │  └─example.js    # 示例 JS
│  └─lib              # 公共 JS 文件
│
├─src                 # 實(shí)際進(jìn)行開發(fā)的目錄
│  ├─css              # 項(xiàng)目 CSS 文件, 由 Grunt 生成
│  ├─demos            # 項(xiàng)目示例頁面
│  ├─images           # 項(xiàng)目 image 文件
│  ├─js               # 項(xiàng)目 JS 文件
│  │  ├─dialog.js     # 彈窗主要 JS
│  │  ├─example.js    # 示例 JS
│  │  ├─ripple.js     # 點(diǎn)擊水波紋效果 JS
│  │  └─tapEvent.js   # 點(diǎn)擊事件 JS
│  ├─lib              # 公共 JS 文件
│  ├─scss             # 項(xiàng)目相關(guān) SCSS 文件
│  └─templates        # 初始靜態(tài) DMEO 資源目錄
│
├─Gruntfile.js        # Grunt任務(wù)配置
├─_config.json        # Grunt配置所需信息
└─package.json        # 項(xiàng)目信息以及依賴
Grunt 使用方法

1、安裝 Grunt

npm install

2、在本地運(yùn)行項(xiàng)目

grunt serve

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89742.html

相關(guān)文章

  • 基于 Vue 2.0 實(shí)現(xiàn)的移動(dòng)端彈窗 (Alert, Confirm, Toast)組件.

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

    Darkgel 評(píng)論0 收藏0

  • Vue.extend用法（主要用于需要 動(dòng)態(tài)渲染的組件，或者類似于window.alert() 提示

    摘要：一簡(jiǎn)單的使用主要用于需要?jiǎng)討B(tài)渲染的組件，或者類似于提示組件注意創(chuàng)建的是一個(gè)組件構(gòu)造器，而不是一個(gè)具體的組件實(shí)例屬于的全局，在實(shí)際業(yè)務(wù)開發(fā)中我們很少使用，因?yàn)橄啾瘸Ｓ玫膶懛ㄊ褂貌襟E要更加繁瑣一些。 最近在重構(gòu)公司的項(xiàng)目，有些組件想要封裝的更靈活，例如toast、loading、messageBox等彈窗組件，模仿了mint-ui封裝此類組件的方式封裝了自己的彈窗組件； mint-UI的t...

    masturbator 評(píng)論0 收藏0

  • 移動(dòng)端開發(fā)（使用webuploader上傳圖片,客戶端交互,修改alert彈窗等）

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

    李昌杰 評(píng)論0 收藏0

  • 移動(dòng)彈窗基礎(chǔ)知識(shí)淺析——IOS彈窗體系

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

    jas0n 評(píng)論0 收藏0

  • 溫故js系列（11）-BOM

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

    xorpay 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<