第二百零五節，jQuery EasyUI，Messager(消息窗口)組件

jQuery EasyUI，Messager(消息窗口)組件

 

學習要點：

　　1.加載方式

　　2.屬性列表

　　3.方法列表

 

本節課重點了解 EasyUI 中 Messager(消息窗口)組件的使用方法，這個組件依賴於 Window(窗口)組件、progressbar(進度條)組件。

 

一．加載方式

消息窗口提供了不同的消息框風格，包含 alert(警告框)、confirm(確認框)、 prompt(提示框)、progress(進度框)等。所有消息框都是異步的，用戶可以在交互消息之 后使用回調函數去處理結果。

由於這個組件的特殊性，沒有 class 加載方式，全部在 JS 端完成！不需要獲取html區塊元素，是直接在js里寫的

 

二．屬性列表，自定義所有消息框的確認和取消兩個按鈕的文字

$(function () {
    $.messager.defaults = { ok: "是", cancel: "否" }; //自定義所有消息框的確認和取消兩個按鈕的文字
    $.messager.show({
        title: '我的消息',
        msg: '消息在 5 秒后關閉',
        timeout: 5000,
        showType: 'slide'
    });
});

 

 

 

三．方法列表

方法就是定義消息框的類型

$.messager.show   options  使用消息框

在屏幕右下角顯示一條消息窗口。該選項參數是一個可配置的對象：
showType：定義將如何顯示該消息。可用值有：null,slide,fade,show。默認：slide。消息框出現的方式
showSpeed：定義窗口顯示的過度時間。默認：600 毫秒。
width：定義消息窗口的寬度。默認：250px。
height：定義消息窗口的高度。默認：100px。
title：在頭部面板顯示的標題文本。
msg：顯示的消息文本。
style：定義消息窗體的自定義樣式。

timeout：如果定義為 0，消息窗體將不會自動關閉，除非用戶關閉他。如果定義成非 0 的數，消息窗體將在超時后自動關閉。默認：4 秒。設置對少時間自動關閉

$(function () {
    $.messager.show({
        title: '我的消息',
        msg: '消息在 5 秒后關閉',
        timeout: 5000,
        showType: 'slide',
    });
});

style：定義消息窗體的自定義樣式。

$(function () {
    $.messager.show({
        title: '我的消息',
        msg: '消息在 5 秒后關閉',
        timeout: 5000,
        showType: 'slide',
        style: {
            top: 0
        }
    });
});

 

 

 

$.messager.alert   title, msg, icon, fn  使用警告框，四個參數均為可選

顯示警告窗口。參數：

title：在頭部面板顯示的標題文本。

msg：顯示的消息文本。

icon：顯示的圖標圖像。可用值有：error,question,info,warning。

fn: 在窗口關閉的時候觸發該回調函數。

$(function () {
    $.messager.alert('警告框','這是一個警告框！','warning',function () {
        alert('點擊確定后觸發');
    });
});

 

 

$.messager.confirm   title, msg, fn  使用確認框，三個參數均可選

顯示一個包含“確定”和“取消”按鈕的確認消息窗口。參數：

title：在頭部面板顯示的標題文本。

msg：顯示的消息文本。

fn(b): 當用戶點擊“確定”按鈕的時侯將傳遞一個 true 值給回調函數，否則傳遞一個 false 值。函數的參數可以自定義

$(function () {
    $.messager.confirm('確認對話框','你真的要刪除嗎？',function (jesho) {
        if (jesho){
            alert('點擊的確定');
        }else {
            alert('點擊的取消');
        }
    });
});

 

 

$.messager.prompt   title, msg, fn  使用提示框，三個參數均可選

顯示一個用戶可以輸入文本的並且帶“確定”和“取消”按鈕的消息窗體。參數：

title：在頭部面板顯示的標題文本。

msg：顯示的消息文本。

fn(val): 在用戶輸入一個值參數的時候執行的回調函數。參數接收用戶輸入的值

$(function () {
    $.messager.prompt('提示信息框','請輸入你的名字：',function (val) {
        if (val){   //判斷如果有輸入值
            alert(val);
        }
    });
});

 

 

$.messager.progress   options or method  進度條信息框

顯示一個進度消息窗體。 屬性定義為：

title：在頭部面板顯示的標題文本。默認：空。

msg：顯示的消息文本。默認：空。

text：在進度條上顯示的文本。默認：undefined。

interval：每次進度更新的間隔時間。默認：300 毫秒。

 方法定義為：

bar：獲取進度條對象。$.messager.progress('bar');

close：關閉進度窗口。$.messager.progress('close');

$(function () {
    $.messager.progress({
        title: '執行中',
        msg: '努力加載中...',
        text: '{value}%',
        interval: 100,
    });
    // $.messager.progress('bar');
    // $.messager.progress('close');
});