1、插件使用
首先引入jquery库,然后引入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上面的静态函数,有:alert、confirm和message三个函数
下面函数打开一个默认大小的alert消息框,内容为“请填写执行情况(200字以内)”,级别为警告,按钮文字为“知道了”,1秒后关闭,显示、关闭动画为slide
1 function openAlert() { 2 $.messager.alert({ 3 title: '信息', 4 content: '请填写执行情况(200字以内)', 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 }
下面函数打开一个默认大小的confirm确认框,内容为您确定删除员工“John”吗,点击确认后打开一个message信息框,这个信息框2秒后关闭
1 function openConfirm() { 2 $.messager.confirm({ 3 title: '信息', 4 content: '您确定删除员工“John”吗?', 5 btn: [ 6 { text: '确定', callback: function() { 7 $.messager.message({ 8 content: '员工数据删除成功。', 9 time: 2000 10 }); 11 } }, 12 { text: '取消', callback: function() {} } 13 ] 14 }); 15 }
下面函数打开一个默认大小的message信息框,内容为“员工数据删除成功”,信息框2秒后关闭,显示、关闭动画为fade
1 function openMessage() { 2 $.messager.message({ 3 title: '信息', 4 content: '员工数据删除成功。', 5 showType: 'fade', 6 callback: function() { 7 //$('#tab1').tab( 8 // 'removeTab', 'tab15' 9 //); 10 }, 11 time: 2000 12 }); 13 }
2、$.messager函数
函数名 | 参数 | 功能 | 返回值 | 示例 |
alert | Object | 打开一个提示框 | 无 | $.messager.alert({ title: '信息', content: '请填写执行情况(200字以内)', level: 'warning', btn: '知道了', time: 1000, callback: function() { // location.reload(); }, showType: 'slide' }); |
confirm | Object | 打开一个确认框 | 无 | $.messager.confirm({ title: '信息', content: '您确定删除员工“John”吗?', btn: [ { text: '确定', callback: function() { $.messager.message({ content: '员工数据删除成功。', time: 2000 }); } }, { text: '取消', callback: function() {} } ] }); |
message | Object | 打开一个消息框 | 无 | $.messager.message({ title: '信息', content: '员工数据删除成功。', showType: 'fade', callback: function() { //$('#tab1').tab( // 'removeTab', 'tab15' //); }, time: 2000 }); |
3、$.messager.alert函数配置选项
选项 | 类型 | 作用 |
---|---|---|
title | string | 提示框的标题,默认为“信息” |
width | int | 提示框插件div的宽,默认250 |
height | int | 提示框插件div的高,默认170 |
modal | boolean | 模态对话框配置,默认true |
content | string | 内容字符串,默认为“页面出现错误。” |
level | string | 设置提示级别图标,内置有success、info、question、warning和error,默认warning |
btn | string | 按钮显示的文字,默认“确定” |
callback | function | 关闭时执行的函数,默认null |
time | int | 该值大于0时,提示框会在对应毫秒后自动关闭,默认0即不会自动关闭 |
showType | string | 显示、关闭提示框时的动画效果,有slide和fade两种,默认无动画效果 |
4、$.messager.confirm函数配置选项
选项 | 类型 | 作用 |
---|---|---|
title | string | 确认框的标题,默认为“确认” |
width | int | 确认框插件div的宽,默认250 |
height | int | 确认框插件div的高,默认170 |
modal | boolean | 模态对话框配置,默认true |
content | string | 内容字符串,默认为“请确认?” |
btn | [] | 定义按钮文字内容、点击函数,例如: btn: [ { text: '确定', callback: function() {} }, { text: '取消', callback: function() {} } ] |
showType | string | 显示、关闭确认框时的动画效果,有slide和fade两种,默认无动画效果 |
5、$.messager.message函数配置选项
选项 | 类型 | 作用 |
---|---|---|
title | string | 消息框的标题,默认为“信息” |
width | int | 消息框插件div的宽,默认250 |
height | int | 消息框插件div的高,默认120 |
modal | boolean | 模态对话框配置,默认false |
content | string | 内容字符串,默认为“操作成功。” |
callback | function | 关闭时执行的函数,默认null |
time | int | 该值大于0时,消息框会在对应毫秒后自动关闭,默认0即不会自动关闭 |
showType | string | 显示、关闭消息框时的动画效果,有slide和fade两种,默认无动画效果 |
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
演示项目 http://5ijy01.duapp.com/jq-ui/index.html