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 相关文章推荐
javascript 有趣而诡异的数组
Apr 06 Javascript
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
Oct 11 Javascript
js防止表单重复提交实现代码
Sep 05 Javascript
判断客户浏览器是否支持cookie的示例代码
Dec 23 Javascript
JS实现文件动态顺序载入的方法
Mar 07 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
Oct 05 Javascript
DOM事件探秘篇
Feb 15 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
详解Vue.js在页面加载时执行某个方法
Nov 20 Javascript
深入学习JavaScript 高阶函数
Jun 11 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
May 07 Javascript
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
PHP数据库开发知多少
2006/10/09 PHP
解析php5配置使用pdo
2013/07/03 PHP
php表单敏感字符过滤类
2014/12/08 PHP
PHP文件缓存类示例分享
2015/01/30 PHP
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
Javascript核心读书有感之词法结构
2015/02/01 Javascript
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
javascript自定义in_array()函数实现方法
2015/08/03 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
2017/10/26 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
Vue实现简易购物车页面
2020/12/30 Vue.js
Python3搜索及替换文件中文本的方法
2015/05/22 Python
Python实现的简单读写csv文件操作示例
2018/07/12 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
django在开发中取消外键约束的实现
2020/05/20 Python
python推导式的使用方法实例
2021/02/28 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
研讨会主持词
2014/04/02 职场文书
产品质量保证书
2014/04/29 职场文书
电视节目策划方案
2014/05/16 职场文书
爱护公物演讲稿
2014/09/09 职场文书
转让协议书
2015/01/27 职场文书
2015年人事科工作总结
2015/04/28 职场文书
开票证明
2015/06/23 职场文书
python 利用 PIL 将数组值转成图片的实现
2021/04/12 Python