jquery dialog彈出對話方塊外掛程式使用方法

使用方法

2.1、預設參數

// 1. 對話方塊預設參數
// 標註【*】的項目表示可以重複修改的，即多次初始化
$.fn.dialog.defaults = {
 // css樣式連結地址
 css: "http://static.qianduanblog.com/css/jquery-dialog/default.min.css?v=" + Math.ceil(Date.now() / 86400000),
 // 對話方塊標題【*】
 title: "Untitled",
 // 是否自動開啟（即是否初始化完成就開啟）
 autoOpen: false,
 // 對話方塊寬度【*】
 width: 600,
 // 對話方塊高度【*】
 height: "auto",
 // 層級【*】
 zIndex: 2000,
 // 在給定高度的時候，對話方塊內容超過樣式【*】
 overflow: "scroll",
 // 動畫時間【*】
 duration: 123,
 // 是否可以拖動（需引用jquery.drag.js）
 draggable: true,
 // 是否可以按esc關閉【*】
 closeOnEsc: true,
 // 是否可以單擊背景關閉【*】
 closeOnBg: true,
 // 是否允許關閉【*】（設定為false，將導致 closeOnEsc 和 closeOnBg 失效）
 canHide: true,
 // 載入一個url【*】
 url: "",
 // 開啟回調
 onopen: function () {},
 // 關閉回調
 onclose: function () {}
};
2.2、初始化

// 2、對話方塊初始化
// 如果不預先初始化，將使用預設參數自動初始化
$("#dialog").dialog({
 width: 600,
 title: "對話方塊標題"
});
// 多次初始化會覆蓋掉前一次初始化內容，可以多次初始化覆蓋的參數參照2.1
$("#dialog").dialog({
 title: "重新初始化對話方塊標題"
});

2.3、開啟

// 3、開啟對話方塊
// 開啟對話方塊
$("#dialog").dialog("open");
// 開啟對話方塊並回調
$("#dialog").dialog("open", function () {});
// 開啟對話方塊並重設參數
$("#dialog").dialog("open", {
 title: "改變了對話方塊標題"
});
// 開啟對話方塊並開啟遠程url
$("#dialog").dialog("open", {
 title: "遠程url",
 url: "http://www.111cn.net/"
});
// 開啟對話方塊並重設參數並回調
$("#dialog").dialog("open", {
 title: "改變了對話方塊標題"
}, function () {});

2.4、重定位

// 4、定位對話方塊
// 手動重新置放對話方塊到置中位置，用於對話方塊內容改變的時候
$("#dialog").dialog("position");
2.5、關閉

// 5、關閉對話方塊
$("#dialog").dialog("close");
// 關閉對話方塊並且回調
$("#dialog").dialog("close", function () {});