管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

　　主要参数

　　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。

　　管理资源吧下载地址 http://www.glzy8.com/jiaoben/15574.html

　　本文演示下载 lwme-jquery-ui-dialog-demo.7z

　　作者：囧月

　　出处：http://lwme.cnblogs.com/

教程首页 更多教程