js彈出層之1：JQuery.Boxy (二)

4.1、手動建立執行個體
複製代碼 代碼如下:
<script type="text/javascript">
$(function() {
$("#a1").click(function() {
//執行個體化一個Boxy對象
var box1 = new Boxy("<h3>這個參數是顯示的內容</h3>" //顯示內容
,
{
title: "標題", //對話方塊標題
modal: false, //是否為強制回應視窗
afterHide: function(e) { alert("dialog hide"); }, //隱藏時的回呼函數
afterShow: function(e) { alert("dialog show"); }, //顯示時的回呼函數
closeText: "X", //關閉功能按鈕的標題文字
draggable: true //是否可以拖動
});
box1.resize(300, 100); //設定對話方塊的大小
});
});
</script> <p>
<a href="#" id="a1">4.1、手動建立一個執行個體</a>
</p>


測試發現modal為true為強制回應視窗，也就是背景被遮罩時就算設定 draggable: true拖動也是無效的。

5.1、常用對話方塊—提問框
複製代碼 代碼如下:
//提問框
$("#a2").click(function() {
Boxy.ask("鳳姐最漂亮的部分是？", //問題
["臉皮", "小嘴巴", "知識淵博"], //可選項按鈕
function(val) { alert(val) }, //回調方法
{title:"測試",modal:false} //boxy屬性設定
);
}); <p>
<a href="#" id="a2">5.1、彈出提問框</a>
</p>

Boxy.ask(question, answers, callback, options)方法的4個參數question表示提問；answers提問選擇項，一般為數組；callback為回調方法；options是boxy彈出框的的屬性對象，見4.1。

5.2、常用對話方塊—警告框
複製代碼 代碼如下:
//警告框
$("#a3").click(function() {
Boxy.alert("這是警告資訊", //提示資訊
function(val) { alert(val); }, //回調方法
{title:"提示"}); //boxy屬性
}); <p>
<a href="#" id="a3">5.2、警告框</a>
</p>

Boxy.alert(message, callback, options)方法的3個參數message表示警告資訊；callback為回調方法；options是boxy彈出框的的屬性對象，見4.1。

5.3、常用對話方塊—確認框
複製代碼 代碼如下:
//確認框
$("#a4").click(function() {
Boxy.confirm("你確認要看鳳姐的照片嗎？", //確認提示資訊
function() { alert("上當了") }, //點擊確認後的回調資訊
{ title: "測試", modal: false }); //boxy屬性設定
}); <p>
<a href="#" id="a4">5.3、確認框</a>
</p>

Boxy.confirm(message, callback, options)方法的3個參數message表示確認提示資訊；callback為回調方法,只有點擊確認時才會執行；options是boxy彈出框的的屬性對象，見4.1。 6、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，可連結。

屬性:

 

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類的任何內容的單擊事件將關聯到關閉對話方塊上。

 

選取器的外框圓角效果是使用png圖片實現的，如果想更改透明程度，可以使用ps修改圖片；如果不考慮IE6的話，可以使用另一種常用的圓角方法(不用圖片只用css樣式)。

官網：http://onehackoranother.com/projects/jquery/boxy/
譯文：http://www.zhangxinxu.com/wordpress/?p=318