1、插件使用

首先引入jquery庫(kù)，然后引入dialog.js、dialog.css、messager.js、messager.css，如下：

1 <script type="text/javascript" src="js/jquery/jquery-1.7.2.min.js"></script>
2 
3 <script type="text/javascript" src="js/dialog.js"></script>
4 <link rel="stylesheet" href="css/blue/dialog.css"/>
5 <script type="text/javascript" src="js/messager.js"></script>
6 <link rel="stylesheet" href="css/blue/messager.css"/>

messager插件是$.messager上面的靜態(tài)函數(shù)，有：alert、confirm和message三個(gè)函數(shù)

下面函數(shù)打開(kāi)一個(gè)默認(rèn)大小的alert消息框，內(nèi)容為“請(qǐng)?zhí)顚?xiě)執(zhí)行情況(200字以內(nèi))”，級(jí)別為警告，按鈕文字為“知道了”，1秒后關(guān)閉，顯示、關(guān)閉動(dòng)畫(huà)為slide

 1 function openAlert() {
 2     $.messager.alert({
 3         title: '信息',
 4         content: '請(qǐng)?zhí)顚?xiě)執(zhí)行情況(200字以內(nèi))',
 5         level: 'warning', // success|info|question|warning|error
 6         btn: '知道了',
 7         time: 1000,
 8         callback: function() {
 9             // location.reload();
10         },
11         showType: 'slide' // slide|fade
12     });
13 }

下面函數(shù)打開(kāi)一個(gè)默認(rèn)大小的confirm確認(rèn)框，內(nèi)容為您確定刪除員工“John”嗎，點(diǎn)擊確認(rèn)后打開(kāi)一個(gè)message信息框，這個(gè)信息框2秒后關(guān)閉

 1 function openConfirm() {
 2     $.messager.confirm({
 3         title: '信息',
 4         content: '您確定刪除員工“John”嗎？',
 5         btn: [ 
 6                { text: '確定', callback: function() { 
 7                     $.messager.message({
 8                         content: '員工數(shù)據(jù)刪除成功。',
 9                         time: 2000
10                     });
11                } }, 
12                { text: '取消', callback: function() {} }
13         ]
14     });
15 }

下面函數(shù)打開(kāi)一個(gè)默認(rèn)大小的message信息框，內(nèi)容為“員工數(shù)據(jù)刪除成功”，信息框2秒后關(guān)閉，顯示、關(guān)閉動(dòng)畫(huà)為fade

 1 function openMessage() {
 2     $.messager.message({
 3         title: '信息',
 4         content: '員工數(shù)據(jù)刪除成功。',
 5         showType: 'fade',
 6         callback: function() {
 7             //$('#tab1').tab(
 8             //    'removeTab', 'tab15'
 9             //);
10         },
11         time: 2000
12     });
13 }

2、$.messager函數(shù)

$.messager.alert({
	title: '信息',
	content: '請(qǐng)?zhí)顚?xiě)執(zhí)行情況(200字以內(nèi))',
	level: 'warning',
	btn: '知道了',
	time: 1000,
	callback: function() {
		// location.reload();
	},
	showType: 'slide'
});

$.messager.confirm({
	title: '信息',
	content: '您確定刪除員工“John”嗎？',
	btn: [ 
	       { text: '確定', callback: function() { 
				$.messager.message({
		   			content: '員工數(shù)據(jù)刪除成功。',
					time: 2000
		   		});
	       } }, 
	       { text: '取消', callback: function() {} }
	]
});

$.messager.message({
	title: '信息',
	content: '員工數(shù)據(jù)刪除成功。',
	showType: 'fade',
	callback: function() {
		//$('#tab1').tab(
		//	'removeTab', 'tab15'
		//);
	},
	time: 2000
});

3、$.messager.alert函數(shù)配置選項(xiàng)

4、$.messager.confirm函數(shù)配置選項(xiàng)

5、$.messager.message函數(shù)配置選項(xiàng)

6、演示和代碼

dialog.js　　http://5ijy01.duapp.com/jq-ui/js/dialog.js
dialog.css　　http://5ijy01.duapp.com/jq-ui/css/blue/dialog.css

messager.js　　http://5ijy01.duapp.com/jq-ui/js/messager.js
messager.css　　http://5ijy01.duapp.com/jq-ui/css/blue/messager.css

Github　　https://github.com/xuguofeng/jq-ui
演示項(xiàng)目　　http://5ijy01.duapp.com/jq-ui/index.html

總結(jié)

以上是生活随笔為你收集整理的使用jQuery开发messager消息框插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。