Chinaunix首页 | 论坛 | 博客

咩羊。的ChinaUnix博客

首页　| 　博文目录　| 　关于我

咩羊。

  • 博客访问： 869064
  • 博文数量： 366
  • 博客积分： 10267
  • 博客等级： 上将
  • 技术积分： 4290
  • 用 户 组： 普通用户
  • 注册时间： 2012-02-24 14:04
文章分类

全部博文（366）

文章存档

2012年（366）

我的朋友
最近访客
推荐博文
相关博文
jQuery UI Dialog 创建友好的弹出对话框

分类： 系统运维

2012-04-12 19:21:40

jQuery UI Dialog 创建友好的弹出对话框 2012-04-11 22:53 by 囧月, 58 visits, 收藏, 编辑

是jQuery UI的弹出对话框组件，使用它可以创建各种美观的弹出对话框；它可以设置对话框的标题、内容，并且使对话框可以拖动、调整大小、及关闭；平常主要用来替代浏览嚣自带的alert、confirm、open等方法。

主要参数

jQuery UI Dialog常用的参数有：

  1. autoOpen：默认true，即dialog方法创建就显示对话框
  2. buttons：默认无，用于设置显示的按钮，可以是JSON和Array形式:
    1. {"确定":function(){},"取消":function(){}}
    2. [{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"，可以设置成字符串或数组：
    1. 'center', 'left', 'right', 'top', 'bottom'
    2. ['right','top']，通过上面的几个字符串组合(x,y)
    3. [350,100]，绝对的数值(x,y)
  5. minWidth：默认150，最小宽度
  6. minHeight：默认150，最小高度

使用方法：

?
1
2
3
4
$("...").dialog({
  title: "标题",
  //...更多参数
});
主要方法

jQuery UI Dialog提供了一些方法来控制对话框，仅列出常用的：

  1. open：打开对话框
  2. close：关闭对话框（通过close不会销毁，还能继续使用）
  3. destroy：销毁对话框
  4. option：设置参数，即前面列出的参数

使用的时候作为dialog方法的参数：

?
1
2
3
4
5
var dlg = $("...").dialog({
  //...各种参数
});
dlg.dialog("option", { title: "标题" }); // 设置参数
dlg.dialog("open"); // 使用open方法打开对话框
主要事件

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

  1. open：打开时
  2. close：关闭时
  3. create：创建时
  4. resize：调整大小时
  5. drag：拖动时

使用方法同参数的使用方法，比如在打开时隐藏关闭按钮：

?
1
2
3
4
5
6
$("...").dialog({
  //...各种参数
  open: function(event, ui) {
     $(".ui-dialog-titlebar-close", $(this).parent()).hide();
  }
});
具体使用

以下封装了一些常用的提示信息，不再详细解释：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
jQuery.extend(jQuery, {
  // jQuery UI alert弹出提示
  jqalert: function(text, title, fn) {
    var html =
    '
' +
    ' 

' +

    '    ' + text +
    ' 

' +
    '
';
    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 = $(
    '
' +
    ' 

' +

    '    ' + text +
    ' 

' +
    '
');
    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 =
    '
' +
    ' 

' +

    '    ' + text +
    ' 

' +
    '
';
    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 =
    '
' +
    ' ' +
    '
';
    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;
  }
});

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

解决办法有（具体不演示）：

  1. 在close事件里面destroy
  2. 把alert/confirm提供里的dialog实例设置成静态的
  3. 在外部调用使用单个dialog实例
演示程序

html代码如下：

?
1
2
3
4
5
6
7
  
  
  
  
  

相应js代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(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，可能需要如下方法：

?
1
2
3
4
5
6
$("#button4").click(function(e) {
  if (!$.confirm(e, "确定要这么做吗？")) {
    e.stopPropagation();
    return false;
  }
});

额外再提一下，jQuery UI使用的字体都是以em为单位，可能会导致平常使用时dialog变得比较大，可以额外设置以下样式：

?
1
2
3
4
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控件，定义如下两个函数：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 用于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);
  };
}

然后可以这样使用：

?
1
结尾

放一下DEMO，更多的资料请看jQuery UI Dialog官方演示：。

阅读(1402) | 评论(0) | 转发(0) |
0

上一篇：window.parent与window.openner区别

下一篇：HTML5 Web Storage

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6