··············EasyUI中messager的學習使用·········
目錄
一、基本說明
方法：
| 名稱 | 參數 | 描述 |
|---|---|---|
| $.messager.show | options |
在屏幕的右下角顯示一個消息窗口，options 參數是一個配置對象：
|
| $.messager.alert | title, msg, icon, fn | 顯示一個警告提示窗口。參數： title：顯示在頭部面板上的標題文本。 msg：要顯示的消息文本。 icon：要顯示的圖標圖片。可用的值是：error、question、info、warning。 fn：當窗口關閉時觸發的回調函數。 |
| $.messager.confirm | title, msg, fn | 顯示一個帶"確定"和"取消"按鈕的確認消息窗口。參數： title：顯示在頭部面板上的標題文本。 msg：要顯示的消息文本。 fn(b)：回調函數，當用戶點擊確認按鈕時傳遞一個 true 參數給函數，否則給它傳遞一個 false 參數。 |
| $.messager.prompt | title, msg, fn | 顯示一個帶"確定"和"取消"按鈕的消息窗口，提示用戶輸入一些文本。參數： title：顯示在頭部面板上的標題文本。 msg：要顯示的消息文本。 fn(val)：帶有用戶輸入的數值參數的回調函數。 |
| $.messager.progress | options or method | 顯示一個進度的消息窗口。 options 定義如下： title：顯示在頭部面板上的標題文本，默認值是 '' 。 msg：消息框的主體文本，默認值是 '' 。 text：顯示在進度條裏的文本，默認值是 undefined 。 interval：每次進度更新之間以毫秒爲單位的時間長度。默認值是 300。 方法定義如下： bar：獲取進度條（progressbar）對象。 close：關閉進度窗口。 |
屬性：
$.messager.defaults方法可自定義消息框的ok按鈕和cancel按鈕上顯示的文字。
| 名稱 | 類型 | 描述 | 默認值 |
|---|---|---|---|
| ok | string | 確定按鈕的文本。 | Ok |
| cancel | string | 取消按鈕的文本。 | Cancel |
二、實例演示
全部代碼親測可行。很多屬性其實可以共用的，像style、width、height等，根據個人需求多去試試，就瞭解了。
<script type="text/javascript" src="${ctx}/js/jquery-1.6.4.js"></script>
<script type="text/javascript" src="${ctx}/easyui/jquery.easyui.min.js"></script>
<link id="easyuiTheme" rel="stylesheet" type="text/css" href="${ctx}/easyui/themes/default/easyui.css">
（1）$.messager.show
<script type="text/javascript">
$(function(){
//寫法一：
$.messager.show({
title:'溫馨提示',
msg:'沒有設置timeout,小白默認四秒後開溜.',
showType:'show',
style:{//默認右下角，現設置樣式在瀏覽器頂部中間show出
right:'',
top:document.body.scrollTop+document.documentElement.scrollTop,
bottom:''
}
});
//寫法二：
$(function(){
var options = {
title:'溫馨提示',
msg:'設置了小白五秒後開溜,彈出方式爲slide',
showType:'slide',
timeout:5000
};
$.messager.show(options);
});
});
</script>
（2）$.messager.alert
<script type="text/javascript">
$(function(){
//寫法一：
$.messager.alert('結果','已完結！','info',function(){
alert("小白要離開了哦！")
});
//寫法二：
$.messager.alert({
width: 520,
height: 280,
title: '注意',
msg: '已完結！',
icon: 'warning',
fn: function(){
alert("小白要離開了哦！");
}
});
});
</script>
（3）$.messager.confirm
<script type="text/javascript">
$(function(){
//寫法一:
$.messager.confirm('Confirm', '確定嗎？', function(b){
if (b){
alert("小白點確定！");
}
});
//寫法二：
$.messager.confirm({
title:'Confirm',
msg:'確定嗎？',
fn:function(b){
if(b){
alert("小白點確定！");
}
}
});
});
</script>
（4）$.messager.prompt
<script type="text/javascript">
$(function(){
//寫法一：
$.messager.prompt('必填','請填寫領養小白原因',function(data){
if(data){//判斷是否填寫內容
alert(data);
}
});
//寫法二：
$.messager.prompt({
title:'必填',
msg:'請填寫領養小白原因',
fn:function(data){
if(data){//判斷是否填寫內容
alert(data);
}
}
});
});
</script>
（5）$.messager.progress
<script type="text/javascript">
$(function(){
//顯示進度消息窗口。
$.messager.progress();
//寫法二：
$.messager.progress({
title:"請等待",
text:"loging..."
});
//五秒後關閉消息窗口。
setTimeout(function(){
$.messager.progress('close');
},5000)
});
</script>
（6）$.messager.defaults
這個方法可以用在上面的方法前面，來改變他們的 ok 和 cancel 的值。簡單舉個例子
<script type="text/javascript">
$(function(){
$.messager.defaults = { ok: "是" , cancel: "否"};
$.messager.confirm({
width: 360,
height: 180,
title:'Confirm',
msg:'確定嗎？',
fn:function(b){
if(b){
alert("小白點確定---》小白點是！");
}
}
});
});
</script>
