對話框

MDUI 中的對話框是一個用途非常廣的組件，經(jīng)常被用來向用戶詢問信息，通知或警告用戶。

同一時間只會有一個對話框處于顯示狀態(tài)。若當前對話框還未關(guān)閉就打開下一個對話框，那么下一個對話框會被加入隊列，等當前對話框關(guān)閉后再打開。

調(diào)用方式

• 通過自定義屬性調(diào)用
  
• 通過 JavaScript 調(diào)用
  

相關(guān)資料

Material Design 對話框設(shè)計規(guī)范

樣式

標準對話框

這是一個標準的對話框。

在線運行

不含標題欄

這個對話框不含標題欄。

在線運行

豎排按鈕

對話框底部的按鈕默認水平排列。只需在 <div class="mdui-dialog-actions"></div> 上添加類 .mdui-dialog-actions-stacked 即可將按鈕設(shè)置為豎直排列。

在線運行

固定標題和按鈕

在對話框內(nèi)容超出對話框高度時，.mdui-dialog-content 中的內(nèi)容會產(chǎn)生滾動條。

如果將 .mdui-dialog-title 和 .mdui-dialog-actions 放到 .mdui-dialog-content 內(nèi)部， 標題和底部按鈕就會隨著滾動條滾動；反之標題和按鈕將分別固定在頂部和底部，不隨滾動條滾動。

在線運行

自定義內(nèi)容

對話框中只有 <div class="mdui-dialog"></div> 是必須的，該元素內(nèi)的內(nèi)容可以替換為任意 HTML。

下面例子中在對話框中放了一個 Tab 選項卡：

在線運行

調(diào)用方式

通過自定義屬性調(diào)用

使用該方式無需編寫 JavaScript 代碼。只需在一個起控制作用的元素（例如：按鈕）上添加 mdui-dialog="options" 屬性即可。通過自定義屬性調(diào)用時，需要額外添加一個 target 參數(shù)，用于指定被控制的對話框，它的值為被控制的對話框的 CSS 選擇器。

在線運行

在對話框內(nèi)的元素上可以添加一些屬性來綁定事件，這些屬性在使用 JavaScript 調(diào)用時也可以使用。

通過 JavaScript 調(diào)用

實例化組件：

// selector 為對話框的 CSS 選擇器或 DOM 元素或 HTML 字符串
// options 為配置參數(shù)，見下面的參數(shù)列表
var inst = new mdui.Dialog(selector, options);

在線運行

參數(shù)

方法

事件

預(yù)定義對話框

MDUI 針對常用場景封裝了幾個預(yù)定義的對話框函數(shù)，這些預(yù)定義的對話框只通過 JavaScript 調(diào)用，無需編寫 HTML 代碼。

這些函數(shù)都返回對話框?qū)嵗?/p>

mdui.dialog()

打開一個對話框，標題、內(nèi)容、按鈕等都可以自定義。該方法比較通用，后面的 mdui.alert()、mdui.confirm()、mdui.prompt() 都是使用該方法進行的封裝。

mdui.dialog(options)

在線運行

參數(shù)：

按鈕的參數(shù)：

mdui.alert()

打開一個警告框，可以包含標題、內(nèi)容和一個確認按鈕：

mdui.alert(text, onConfirm, options)

mdui.alert(text, title, onConfirm, options)

• text: 文本
  
• title: （可選）標題
  
• onConfirm: （可選）點擊確認按鈕的回調(diào)。參數(shù)是對話框的實例。
  
• options: （可選）參數(shù)，見下表。
  

在線運行

mdui.confirm()

打開一個確認框，可以包含標題、內(nèi)容、一個確認按鈕和一個取消按鈕：

mdui.confirm(text, onConfirm, onCancel, options)

mdui.confirm(text, title, onConfirm, onCancel, options)

• text: 文本
  
• title: （可選）標題
  
• onConfirm: （可選）點擊確認按鈕的回調(diào)。參數(shù)為對話框的實例。
  
• onCancel: （可選）點擊取消按鈕的回調(diào)。參數(shù)為對話框的實例。
  
• options: （可選）參數(shù)，見下表。
  

在線運行

mdui.prompt()

打開一個提示用戶輸入的對話框，可以包含標題、內(nèi)容、文本框、一個確認按鈕和一個取消按鈕：

mdui.prompt(label, onConfirm, onCancel, options)

mdui.prompt(label, title, onConfirm, onCancel, options)

• label: 文本框浮動標簽的文本
  
• title: （可選）標題
  
• onConfirm: （可選）點擊確認按鈕的回調(diào)。含兩個參數(shù)，分別為文本框的值和對話框的實例。
  
• onCancel: （可選）點擊取消按鈕的回調(diào)。含兩個參數(shù)，分別人文本框的值和對話框的實例。
  
• options: （可選）參數(shù)，見下表
  

在線運行

CSS 類名列表