jQuery UI Dialog 创建友好的弹出对话框实现代码


Posted in Javascript onApril 12, 2012

主要参数
jQuery UI Dialog常用的参数有:

1、autoOpen:默认true,即dialog方法创建就显示对话框
2、buttons:默认无,用于设置显示的按钮,可以是JSON和Array形式:
{"确定":function(){},"取消":function(){}}
[{text:"确定", click: function(){}},{text:"取消",click:function(){}}]
3、modal:默认false,是否模态对话框,如果设置为true则会创建一个遮罩层把页面其他元素遮住
4、title:标题
5、draggable:是否可手动,默认true
6、resizable:是否可调整大小,默认true
7、width:宽度,默认300
8、height:高度,默认"auto"
其他一些不太常用的参数:

1、closeOnEscape:默认true,按esc键关闭对话框
2、show:打开对话框的动画效果
3、hide:关闭对话框的动画效果
4、position:对话框显示的位置,默认"center",可以设置成字符串或数组:
'center', 'left', 'right', 'top', 'bottom'
['right','top'],通过上面的几个字符串组合(x,y)
[350,100],绝对的数值(x,y)
5、minWidth:默认150,最小宽度
6、minHeight:默认150,最小高度
使用方法:

$("...").dialog({ 
title: "标题", 
//...更多参数 
});

主要方法
jQuery UI Dialog提供了一些方法来控制对话框,仅列出常用的:

open:打开对话框
close:关闭对话框(通过close不会销毁,还能继续使用)
destroy:销毁对话框
option:设置参数,即前面列出的参数
使用的时候作为dialog方法的参数:

var dlg = $("...").dialog({ 
//...各种参数 
}); 
dlg.dialog("option", { title: "标题" }); // 设置参数 
dlg.dialog("open"); // 使用open方法打开对话框

主要事件
jQuery UI Dialog提供了一些事件,比如打开、关闭对话框的时候做一些额外的事情:

open:打开时
close:关闭时
create:创建时
resize:调整大小时
drag:拖动时
使用方法同参数的使用方法,比如在打开时隐藏关闭按钮:

$("...").dialog({ 
//...各种参数 
open: function(event, ui) { 
$(".ui-dialog-titlebar-close", $(this).parent()).hide(); 
} 
});

具体使用
以下封装了一些常用的提示信息,不再详细解释:
jQuery.extend(jQuery, { 
// jQuery UI alert弹出提示 
jqalert: function(text, title, fn) { 
var html = 
'<div class="dialog" id="dialog-message">' + 
' <p>' + 
' <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 0 0;"></span>' + text + 
' </p>' + 
'</div>'; 
return $(html).dialog({ 
//autoOpen: false, 
resizable: false, 
modal: true, 
show: { 
effect: 'fade', 
duration: 300 
}, 
title: title || "提示信息", 
buttons: { 
"确定": function() { 
var dlg = $(this).dialog("close"); 
fn && fn.call(dlg); 
} 
} 
}); 
}, 
// jQuery UI alert弹出提示,一定间隔之后自动关闭 
jqtimeralert: function(text, title, fn, timerMax) { 
var dd = $( 
'<div class="dialog" id="dialog-message">' + 
' <p>' + 
' <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 0 0;"></span>' + text + 
' </p>' + 
'</div>'); 
dd[0].timerMax = timerMax || 3; 
return dd.dialog({ 
//autoOpen: false, 
resizable: false, 
modal: true, 
show: { 
effect: 'fade', 
duration: 300 
}, 
open: function(e, ui) { 
var me = this, 
dlg = $(this), 
btn = dlg.parent().find(".ui-button-text").text("确定(" + me.timerMax + ")"); 
--me.timerMax; 
me.timer = window.setInterval(function() { 
btn.text("确定(" + me.timerMax + ")"); 
if (me.timerMax-- <= 0) { 
dlg.dialog("close"); 
fn && fn.call(dlg); 
window.clearInterval(me.timer); // 时间到了清除计时器 
} 
}, 1000); 
}, 
title: title || "提示信息", 
buttons: { 
"确定": function() { 
var dlg = $(this).dialog("close"); 
fn && fn.call(dlg); 
window.clearInterval(this.timer); // 清除计时器 
} 
}, 
close: function() { 
window.clearInterval(this.timer); // 清除计时器 
} 
}); 
}, 
// jQuery UI confirm弹出确认提示 
jqconfirm: function(text, title, fn1, fn2) { 
var html = 
'<div class="dialog" id="dialog-confirm">' + 
' <p>' + 
' <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>' + text + 
' </p>' + 
'</div>'; 
return $(html).dialog({ 
//autoOpen: false, 
resizable: false, 
modal: true, 
show: { 
effect: 'fade', 
duration: 300 
}, 
title: title || "提示信息", 
buttons: { 
"确定": function() { 
var dlg = $(this).dialog("close"); 
fn1 && fn1.call(dlg, true); 
}, 
"取消": function() { 
var dlg = $(this).dialog("close"); 
fn2 && fn2(dlg, false); 
} 
} 
}); 
}, 
// jQuery UI 弹出iframe窗口 
jqopen: function(url, options) { 
var html = 
'<div class="dialog" id="dialog-window" title="提示信息">' + 
' <iframe src="' + url + '" frameBorder="0" style="border: 0; " scrolling="auto" width="100%" height="100%"></iframe>' + 
'</div>'; 
return $(html).dialog($.extend({ 
modal: true, 
closeOnEscape: false, 
draggable: false, 
resizable: false, 
close: function(event, ui) { 
$(this).dialog("destroy"); // 关闭时销毁 
} 
}, options)); 
}, 
// jQuery UI confirm提示 
confirm: function(evt, text, title) { 
evt = $.event.fix(evt); 
var me = evt.target; 
if (me.confirmResult) { 
me.confirmResult = false; 
return true; 
} 
jQuery.jqconfirm(text, title, function(e) { 
me.confirmResult = true; 
if (e) { 
if (me.href && $.trim(me.href).indexOf("javascript:") == 0) { 
$.globalEval(me.href); 
me.confirmResult = false; 
return; 
} 
var t = me.type && me.type.toLowerCase(); 
if (t && me.name && (t == "image" || t == "submit" || t == "button")) { 
__doPostBack(me.name, ""); 
me.confirmResult = false; 
return; 
} 
if (me.click) me.click(evt); 
} 
return false; 
}); 
return false; 
} 
});

以上代码还存在一个问题,就是每次弹出框关闭之后都没有销毁。

解决办法有(具体不演示):

在close事件里面destroy
把alert/confirm提供里的dialog实例设置成静态的
在外部调用使用单个dialog实例
演示程序
html代码如下:

<div> 
<input type="button" id="button1" value="普通提示" /> 
<input type="button" id="button2" value="自动关闭提示" /> 
<input type="button" id="button3" value="确认提示" /> 
<input type="button" id="button4" value="确认提示2" /> 
<input type="button" id="button5" value="打开窗口" /> 
</div>

相应js代码如下:
$(function() { 
$("#button1").click(function() { 
$.jqalert("这是普通提示!"); 
}); 
$("#button2").click(function() { 
$.jqtimeralert("这是自动关闭的提示!", "自动关闭提示", 
function() { 
$.jqalert("时间到"); 
}); 
}); 
$("#button3").click(function() { 
$.jqconfirm("确定要这么做吗?", "确认提示", 
function() { 
$.jqalert("点了确定"); 
}, 
function() { 
$.jqalert("点了取消"); 
}); 
}); 
$("#button4").click(function(e) { 
if ($.confirm(e, "确定要这么做吗?")) 
$.jqalert("点了确定"); 
}); 
$("#button5").click(function(e) { 
$.jqopen("http://lwme.cnblogs.com/", { title: "我的博客", width: 700, height: 500 }); 
}); 
});

对于服务器端控件使用confirm,可能需要如下方法:
$("#button4").click(function(e) { 
if (!$.confirm(e, "确定要这么做吗?")) { 
e.stopPropagation(); 
return false; 
} 
});

额外再提一下,jQuery UI使用的字体都是以em为单位,可能会导致平常使用时dialog变得比较大,可以额外设置以下样式:
body { font-size: 12px; } // 默认字体大小 
/*jQuery UI fakes*/ 
.ui-widget { font-size: 1em; } 
.ui-dialog .ui-dialog-buttonpane { padding-top: .1em; padding-bottom: .1em; }

这样子,dialog的大小看起来就比较正常了。
在Telerik RadControls for asp.net ajax中使用
主要是针对telerik RadButton控件,定义如下两个函数:
// 用于RadButton的confirm确认回调,即触发按钮点击 
function radcallback(s) { 
return Function.createDelegate(s, function(argument) { 
if (argument) { 
this.click(); 
} 
}); 
} 
// 用于为RadButton添加confirm提示 
function radconfirm2(textOrFn, title, callback) { 
return function(s, e) { 
$.jqconfirm(textOrFn, title, callback || radcallback(s)); 
//radconfirm(textOrFn, callback, 280, 50, null, title); 
e.set_cancel(true); 
}; 
}

然后可以这样使用:
<telerik:RadButton ... OnClientClicking="radconfirm2('确定要这么做吗?')" />

结尾
更多的资料请看jQuery UI Dialog官方演示:http://jqueryui.com/demos/dialog。
三水点靠木下载地址 https://3water.com/jiaoben/15574.html
本文演示下载 lwme-jquery-ui-dialog-demo.7z
作者:?逶
出处:http://lwme.cnblogs.com/

Javascript 相关文章推荐
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 Javascript
js去字符串前后空格的实现方法
Feb 26 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
Mar 29 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
几种响应式文字详解
May 19 Javascript
ionic2懒加载配置详解
Sep 01 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
vue实现条件判断动态绑定样式的方法
Sep 29 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
window.parent与window.openner区别介绍
Apr 12 #Javascript
JavaScript单元测试ABC
Apr 12 #Javascript
扩展JavaScript功能的正确方法(译文)
Apr 12 #Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 #Javascript
JQuery学习笔录 简单的JQuery
Apr 09 #Javascript
广泛收集的jQuery拖放插件集合
Apr 09 #Javascript
深入分析js中的constructor和prototype
Apr 07 #Javascript
You might like
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
ThinkPHP表单自动提交验证实例教程
2014/07/18 PHP
PHP生成随机字符串实例代码(字母+数字)
2019/09/11 PHP
function, new function, new Function之间的区别
2007/03/08 Javascript
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
js实现select跳转功能代码
2014/10/22 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
基于vue.js实现图片轮播效果
2016/12/01 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
原生JS实现的双色球功能示例
2018/02/02 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
vue 中固定导航栏的实例代码
2019/11/01 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
Python Mysql自动备份脚本
2008/07/14 Python
Python实现简单的可逆加密程序实例
2015/03/05 Python
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
pytorch中的inference使用实例
2020/02/20 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
英国家用电器购物网站:Hughes
2018/02/23 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
高中生毕业自我鉴定
2013/10/10 职场文书
党员创先争优承诺书
2014/03/26 职场文书
导师推荐信范文
2014/05/09 职场文书
交通工程专业推荐信
2014/09/06 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书