使用jQueryUIDialog创建友好的弹出对话框

HTML5培训技术

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

jQuery UI Dialog常用的参数有：

autoOpen：默认true，即dialog方法创建就显示对话框

{"确定":function(){},"取消":function(){}}

[{text:"确定", click:function(){}},{text:"取消",click:function(){}}]

buttons：默认无，用于设置显示的按钮，可以是JSON和Array形式:

modal：默认false，是否模态对话框，如果设置为true则会创建一个遮罩层把页面其他元素遮住

title：标题

draggable：是否可手动，默认true

resizable：是否可调整大小，默认true

width：宽度，默认300

height：高度，默认"auto"

其他一些不太常用的参数：

closeOnEscape：默认true，按esc键关闭对话框

show：打开对话框的动画效果

hide：关闭对话框的动画效果

'center', 'left', 'right', 'top', 'bottom'

['right','top']，通过上面的几个字符串组合(x,y)

[350,100]，绝对的数值(x,y)

position：对话框显示的位置，默认"center"，可以设置成字符串或数组：

minWidth：默认150，最小宽度

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

' +
' ' + 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 +
'

' +
'