主要参数
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/
jQuery UI Dialog 创建友好的弹出对话框实现代码
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@