jQuery UI Dialog 創建友好的彈出對話框

jQuery UI Dialog是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，最小高度

使用方法：

$("...").dialog({
  title: "標題",
  //...更多參數
});

主要方法

jQuery UI Dialog提供了一些方法來控制對話框，僅列出常用的：

1. open：打開對話框
2. close：關閉對話框（通過close不會銷毀，還能繼續使用）
3. destroy：銷毀對話框
4. option：設置參數，即前面列出的參數

使用的時候作為dialog方法的參數：

  var dlg = $("...").dialog({
    //...各種參數
  });
  dlg.dialog("option", { title: "標題" }); // 設置參數
  dlg.dialog("open"); // 使用open方法打開對話框

主要事件

jQuery UI Dialog提供了一些事件，比如打開、關閉對話框的時候做一些額外的事情：

1. open：打開時
2. close：關閉時
3. create：創建時
4. resize：調整大小時
5. 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;
  }
});

以上代碼還存在一個問題，就是每次彈出框關閉之后都沒有銷毀。

解決辦法有（具體不演示）：

1. 在close事件里面destroy
2. 把alert/confirm提供里的dialog實例設置成靜態的
3. 在外部調用使用單個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('確定要這么做嗎?')" />

結尾

放一下DEMO，更多的資料請看jQuery UI Dialog官方演示：http://jqueryui.com/demos/dialog。