> Message消息窗口組件依賴于Window(窗口)組件、progressbar(進度條)組件 # 加載方式 > 消息窗口提供了不同的消息框風格，包含 alert(警告框)、confirm(確認框)、prompt(提示框)、progress(進度框)等。所有消息框都是異步的，用戶可以在交互消息之后使用回調函數去處理結果。 由于這個組件的特殊性，沒有 class 加載方式，全部在 JS 端完成。 # 屬性列表 | 屬性名 | 值 | 說明| | --- | --- | | ok | String | 確認按鈕文本。Ok| | cancel | String | 取消按鈕文本。Cancel| *** ``` <script> $(function () { //屬性設置 $.messager.defaults = {"ok":"是","cancel":"否"} }); </script> ``` # 方法列表 | 方法名 | 參數| | --- | | $.messager.show | options| | $.messager.alert title, | msg, icon, fn| | $.messager.confirm | title, msg, fn| | $.messager.prompt| title, msg, fn| | $.messager.progress | options or method| *** ``` <script> $(function () { //屬性設置 $.messager.defaults = {"ok":"是","cancel":"否"} //使用警告框，四個參數均為可選 //顯示警告窗口。參數： //title：在頭部面板顯示的標題文本。 //msg：顯示的消息文本。 //icon：顯示的圖標圖像。可用值有：error,question,info,warning。 //fn: 在窗口關閉的時候觸發該回調函數。 $.messager.alert('警告框','這是一個信息框','info', function () {alert('確認后的回調！'); }); //使用確認框，三個參數均可選 //顯示一個包含“確定”和“取消”按鈕的確認消息窗口。參數： //title：在頭部面板顯示的標題文本。 //msg：顯示的消息文本。 //fn(b): 當用戶點擊“確定”按鈕的時侯將傳遞一個 true 值給回調函數，否則傳遞一個false 值。 $.messager.confirm('確認對話框','你真的要刪除嗎？', function (flag) { if (flag) { alert('刪除成功！'); } }); //使用提示框，三個參數均可選 //顯示一個用戶可以輸入文本的并且帶“確定”和“取消”按鈕的消息窗體。參數： //title：在頭部面板顯示的標題文本。 //msg：顯示的消息文本。 //n(val): 在用戶輸入一個值參數的時候執行的回調函數。 $.messager.prompt('提示信息','請輸入你的名字：', function (flag) { if (flag) { alert(flag); } }); //進度條信息 //屬性定義為： // title：在頭部面板顯示的標題文本。默認：空。 //msg：顯示的消息文本。默認：空。 //text：在進度條上顯示的文本。默認：undefined。 //interval：每次進度更新的間隔時間。默認：300 毫秒。 $.messager.progress({ title : '執行中', msg : '努力加載中...', text : '{value}%', interval : 100, }); //方法定義為： //bar：獲取進度條對象。$.messager.progress('bar'); //close：關閉進度窗口。$.messager.progress('close'); //使用消息框 //在屏幕右下角顯示一條消息窗口。該選項參數是一個可配置的對象： //showType：定義將如何顯示該消息。可用值有：null,slide,fade,show。默認：slide。 //showSpeed：定義窗口顯示的過度時間。默認：600 毫秒。 //width：定義消息窗口的寬度。默認：250px。 //height：定義消息窗口的高度。默認：100px。 //title：在頭部面板顯示的標題文本。 //msg：顯示的消息文本。 //style：定義消息窗體的自定義樣式。 //timeout：如果定義為 0，消息窗體將不會自動關閉，除非用戶關閉他。 // 如果定義成非0 的樹，消息窗體將在超時后自動關閉。默認：4 秒 $.messager.show({ title : '我的消息', msg : '消息在 5 秒后關閉', timeout : 5000, showType : 'slide', }); //將消息框顯示在頂部 $.messager.show({ title : '我的消息', msg : '消息在 5 秒后關閉', timeout : 5000, showType : 'slide', style:{ top : 0, } }); }); </script> ```