使用該jQuery插件
要想使用該jQuery插件，需要把$(selector).boxy();放在document.ready中。使用合適的選擇器表達式替換這裡的"selector"，例如："a[rel=boxy],form.with-confirmation"。這會給匹配的元素附加一些行為，如下：
一個href屬性中如果錨點包含#，則此錨點相對應的ID的DOM元素的內容就會被添加到boxy對話框中。
如果href錨點內容為其他一些東西，則會試圖使用Ajax載入其對應的內容。理想情況下，我們有相同的起源檢查和委托對框架的跨域請求。這將會在下面展示。
表單上會顯示一個提交模式的確認消息。
其他的元素將會被忽略
手動創建實例
用手動模式使用boxy是很容易的——只需要創建一個boxy的新實例，傳遞一些內部的內容和任何附加的散列對象。在默認情況下，對話框會立即顯示出來，在視角的中心，可拖拽。所有的這些設置都可以通過給構造函數傳遞附加的對象來進行覆蓋——更多詳情請參見下面的構造函數選項
傳遞給構造函數的內容可以是任何有效的參數，jQuery的$()函數- DOM元素，是HTML片斷或其他jQuery對象。無論提供的是什麼，其display屬性均被設置為block，並插入名為boxy-content的class在對話框中。
下面為一些代表性的示例：
- 創建一個新的對話框，new Boxy("<p>內容……</p>", {title: "對話框"});。
- 創建一個新對話框，無法拖拽。new Boxy("<p>內容……</p>", {title: "對話框", draggable: false});。
- 創建一個新的對話框，沒有默認的關閉按鈕。new Boxy("<p>內容……</p>", {title: "對話框", closeable:false});。
- 新建對話框，使用absolute絕對定位（跟隨滾動條）new Boxy("<p>內容……</p>", {title: "對話框, fixed:false"});。
- 新建對話框，模態的new Boxy("<p>內容……</p>", {title: "對話框, modal:true"});。
- 新建對話框，自定義行為new Boxy("<p>內容……</p>", {behaviours: function(r) { $(r).hover(function() { $(this).css("background-color", "red"); }, function() { $(this).css("background-color", "white"); }); }});。
修改現有的對話（先打開一個對話框，然後再單擊下面的鏈接事件）
- 讓最新的對話框放大的動畫 - someDialog.tween(400, 400);
- 讓最新的對話框減小的動畫 - someDialog.tween(100, 100);
- 獲取最新的對話框的標題 - someDialog.getTitle();。
- 更改最新的對話框的標題 - someDialog.setTitle("新標題");
請注意，標題欄（也就是關閉按鈕和拖動器）只有在標題指定的情況下會出現，在未來，這種行為可能會發生變化，使標題欄始終存在，除非特別禁用。
一旦您創建了一個實例，您可以將通過提供的API分配給一個變量，隨後移動，改變大小，顯示和隱藏 - 記錄如下。
提問
使用Boxy.ask()，Boxy.alert()和Boxy.confirm()這些幫手可能提示用戶從一些選項中進行選擇以及完成可選的回調函數。點擊下面含有演示的鏈接，參考API文檔獲取更多信息。
- 提問 - Boxy.ask() - 用戶定義的選項，選擇項傳遞給回調函數
- 彈出 - Boxy.alert() - 回調函數總是不被調用
- 確認 - Boxy.confirm() - 僅當用戶選擇了“確認”時回調函數會被調用
代碼如下:
<script type='text/javascript'>
$(function() {
$("#ask").click(function() {
Boxy.ask("你感覺怎麼樣?", ["好極了", "還好", "不太好"], function(val) {
alert("你選擇的是: " + val);
}, {title: "這是一個問題……"});
return false;
});
$("#alert").click(function() {
Boxy.alert("文件未找到", null, {title: "提示信息"});
return false;
});
$("#confirm").click(function() {
Boxy.confirm("請確認:", function() { alert("已經確認!"); }, {title: "提示信息"});
return false;
});
});
</script>
API(應用編程接口)
Boxy.load(url, options)
以一個URL加載內容並以Boxy對話框的形式展現。支持以下的一些選項參數：
- 類型 - HTTP方法，默認為GET
- 緩存 - 如果是true，緩存內容連續通話。相當於緩存選項傳遞到jQuery的Ajax方法。默認：false。
- 過濾 - jQuery的表達式，用於過濾遠程內容。
（任何其他指定的選項將被傳遞到boxy的構造函數中）
Boxy.get(element)
返回包含元素的實例，例如：
<a href="#" onclick="Boxy.get(this).hide();">關閉對話框</a>
Boxy.ask(question, answers, callback, options)
顯示模式，即非可關閉對話框，允許用戶選擇選項。問題是要顯示給用戶的信息。答案是一個數組或一切可能的回答的數列。回調函數將收到選定的回答，這是否是需要的值或相應的密鑰要根據一個數組或答案數列是否已經提供了。options是一種額外的可選設置選項傳遞給對話框的構造函數。
Boxy.alert(message, callback, options)
顯示模式，非可關閉對話框顯示消息給用戶。
注意：此方法並
不是為了取代浏覽器本地window.alert()函數提供，因為它沒有能力阻止程序執行，在對話框是可見的時候。
Boxy.confirm(message, callback, options)
顯示模式，非可關閉對話框顯示的含有確定和取消按鈕的消息。回調只會在用戶選擇了“確定”時被調用。
注意：此方法並
不是為了取代浏覽器提供的本地window.confirm()函數，因為它沒有能力在對話框可見時阻止程序執行的。
Boxy.linkedTo(ele)
返回已通過執行器構造函數選項連接DOM元素的boxy實例。
Boxy.isModalVisible()
返回true如果任何模式對話框是當前可見的，否則返回false。
new Boxy(element, options)
構造函數；創建一個新的boxy對話框。element是對話框的內容；任何有效的參數，jQuery的$()函數在這裡也是有效的。options是一個配置選項的散列，見下面詳細的資料。
estimateSize()
當對話框不可見的時候估計其大小。如果當前對話框可見，不要使用此方法，使用getSize()代替。
getSize()
以數組的形式[width, height]返回對話框的大小。
getContentSize()
返回對話框內容區域的大小。默認情況下，指在對話框框架裡的一切，不包括標題欄。
getPosition()
以[x,y]數組形式返回最頂層對話框的左上角坐標。
getCenter()
以[x,y]數組形式返回最頂層對話框的中心點的坐標。
getInner()
返回一個jQuery對象包裝對話框的內部區域-框架內包括標題欄一切。
getContent()
返回一個jQuery對象包裝對話框的內容區域-框架內的一切，不包括標題欄。
setContent(newContent)
設置對話框中的內容，任何對$()有效的參數也對設置的新內容有效。可鏈接。
moveTo(x,y)
移動對話框到左上角為(x,y)的位置，可鏈接。
centerAt(x,y)
把對話框移動到中心坐標為(x,y)的位置上。
center(axis)
移動對話框，使其在視野的中央。可選參數axis可以是"x","y"中的任意一個中心軸。可鏈接。
resize(w,h,after)
重新調整對話框的高寬到[w,h]，完成後執行回調函數，回調函數將接受Boxy實例作為參數。可鏈接。
tween(w,h,after)
動畫補間對話框高寬到[w,h]，完成後執行回調函數，回調函數將接受Boxy實例作為參數。可鏈接。
isVisible()
如果當前對話框可見，則返回true，否則返回false。
show()
顯示對話框，可鏈接。
hide(after)
隱藏對話框，after為可選回調函數，完成後執行。可鏈接。
toggle()
觸發對話框的顯隱屬性。可鏈接。
hideAndUnload(after)
在隱藏後立即執行卸載。在卸載之前執行after回調函數。可鏈接。
unload()
從DOM中刪除對話框，切斷其與執行機構的聯系，如果有的話。一旦出現一個對話框已被卸載它的任何進一步行動都是未定義的。
toTop()
將當前對話框移動到其他所有對話框的上部。可鏈接。
getTitle()
以HTML的形式返回對話框的標題。
setTitle(t)
設置對話框的標題為t，可鏈接。
完整的構造函數選項列表
- title
- 顯示在自動生成標題欄上的標題
- null
- closeable
- 是否一個關閉對話框的驅動器要添加到自動生成標題欄上。如果標題沒有指定是沒有影響的。
- true
- closeText
- 在可用情況下標題欄關閉鏈接的文字
- "[關閉]"
- draggable
- 是否對話框可以通過標題欄進行拖拽。標題未指定沒有影響。
- true
- clone
- 內部區域的元素以及事件處理程序應不應該在被替換之前進行復制。
- false
- actuator
- DOM元素（不包括jQuery對象），引發此對話框。兩者之間的聯系將被建立，此聯系允許對話框的參照稍後在通過執行Boxy.linkedTo(element)獲取的元素中進行檢索。當對話框被卸載，此聯系也會被自動切斷。
- null
- fixed
- 是否使用固定定位(fixed)而不是絕對定位(absolute)，固定定位的對話框不受浏覽器滾動條影響。IE6不支持固定定位，其永遠表現為絕對定位。
- true
- show
- 對話框是否需要立即顯示，如果是false，則需要你手動調用dialog.show()以顯示對話框。
- true
- modal
- 對話框是否設置為模態。模態時，浏覽器背景“黑黑的”，阻止頁面的其他元素接受事件。
- false
- unloadOnHide
- 如果是true，則在此對話框隱藏後會被卸載（如從DOM中刪除）
- false
- clickToFront
- 如果是true，則單擊對話框的任意位置（只是相對於標題欄），會導致其跑到頂部。
- false
- behaviours
- 函數用來申請對話框內容的自定義行為。每次調用setContent()，且在Boxy對象中的上下文中執行，將接受一個包含內容區域的jQuery對象作為參數。
- function(r){}
- afterDrop
- 當對話框放下的時候在Boxy對象的上下文執行回調函數。
- function(){}
- afterShow
- 當對話框顯示的時候在Boxy對象的上下文執行回調函數。能夠用來使表單的文本框獲取焦點。
- function(){}
- afterHide
- 當對話框隱藏的時候在Boxy對象的上下文執行回調函數。
- fuuction(){}
- beforeUnload
- 在對話框卸載前在Boxy對象的上下文執行回調函數。
- function(){}
CSS選擇器
可以通過css完全定制對話框的外觀，這裡的是您可能感興趣的選擇器列表。
.boxy-wrapper .title-bar
div包裝的自動生成的標題欄
.boxy-wrapper .title-bar h2
標題欄的內容
.boxy-wrapper .title-bar.dragging
拖拽時候的標題欄
.boxy-wrapper .title-bar .close
默認的關閉對話框的執行器
.boxy-inner
內部區域，包括標題欄
.boxy-content
內部區域，不包括標題欄。這個class類將被自動添加到傳遞給Boxy的構造函數的任何元素。
.boxy-wrapper .question
通過Boxy.ask()創建的，包含問題文字
.boxy-wrapper .answers
通過Boxy.ask()創建的，包含應答的按鈕
.close
這一class類的任何內容的單擊事件將關聯到關閉對話框上。
在線演示 http://demo.jb51.net/js/2011/jquery-plugin-boxy/page/jQuery-plugin-boxy.html
打包下載 http://xiazai.jb51.net/201102/yuanma/jquery-plugin-boxy.rar