快捷導(dǎo)航

jQuery boxy彈出層插件中文演示及使用講解

更新時(shí)間：2011年02月24日 23:25:25 作者：

要想使用該jQuery插件，需要把$(selector).boxy();放在document.ready中。

使用該jQuery插件
要想使用該jQuery插件，需要把$(selector).boxy();放在document.ready中。使用合適的選擇器表達(dá)式替換這里的"selector"，例如："a[rel=boxy],form.with-confirmation"。這會(huì)給匹配的元素附加一些行為，如下：

一個(gè)href屬性中如果錨點(diǎn)包含#，則此錨點(diǎn)相對(duì)應(yīng)的ID的DOM元素的內(nèi)容就會(huì)被添加到boxy對(duì)話框中。
如果href錨點(diǎn)內(nèi)容為其他一些東西，則會(huì)試圖使用Ajax載入其對(duì)應(yīng)的內(nèi)容。理想情況下，我們有相同的起源檢查和委托對(duì)框架的跨域請(qǐng)求。這將會(huì)在下面展示。
表單上會(huì)顯示一個(gè)提交模式的確認(rèn)消息。
其他的元素將會(huì)被忽略

手動(dòng)創(chuàng)建實(shí)例

用手動(dòng)模式使用boxy是很容易的——只需要?jiǎng)?chuàng)建一個(gè)boxy的新實(shí)例，傳遞一些內(nèi)部的內(nèi)容和任何附加的散列對(duì)象。在默認(rèn)情況下，對(duì)話框會(huì)立即顯示出來，在視角的中心，可拖拽。所有的這些設(shè)置都可以通過給構(gòu)造函數(shù)傳遞附加的對(duì)象來進(jìn)行覆蓋——更多詳情請(qǐng)參見下面的構(gòu)造函數(shù)選項(xiàng)

傳遞給構(gòu)造函數(shù)的內(nèi)容可以是任何有效的參數(shù)，jQuery的$()函數(shù)- DOM元素，是HTML片斷或其他jQuery對(duì)象。無論提供的是什么，其display屬性均被設(shè)置為block，并插入名為boxy-content的class在對(duì)話框中。

下面為一些代表性的示例：

創(chuàng)建一個(gè)新的對(duì)話框，new Boxy("內(nèi)容……", {title: "對(duì)話框"});。
創(chuàng)建一個(gè)新對(duì)話框，無法拖拽。new Boxy("內(nèi)容……", {title: "對(duì)話框", draggable: false});。
創(chuàng)建一個(gè)新的對(duì)話框，沒有默認(rèn)的關(guān)閉按鈕。new Boxy("內(nèi)容……", {title: "對(duì)話框", closeable:false});。
新建對(duì)話框，使用absolute絕對(duì)定位（跟隨滾動(dòng)條）new Boxy("內(nèi)容……", {title: "對(duì)話框, fixed:false"});。
新建對(duì)話框，模態(tài)的new Boxy("內(nèi)容……", {title: "對(duì)話框, modal:true"});。
新建對(duì)話框，自定義行為new Boxy("內(nèi)容……", {behaviours: function(r) { $(r).hover(function() { $(this).css("background-color", "red"); }, function() { $(this).css("background-color", "white"); }); }});。

修改現(xiàn)有的對(duì)話（先打開一個(gè)對(duì)話框，然后再單擊下面的鏈接事件）

讓最新的對(duì)話框放大的動(dòng)畫 - someDialog.tween(400, 400);
讓最新的對(duì)話框減小的動(dòng)畫 - someDialog.tween(100, 100);
獲取最新的對(duì)話框的標(biāo)題 - someDialog.getTitle();。
更改最新的對(duì)話框的標(biāo)題 -

請(qǐng)注意，標(biāo)題欄（也就是關(guān)閉按鈕和拖動(dòng)器）只有在標(biāo)題指定的情況下會(huì)出現(xiàn)，在未來，這種行為可能會(huì)發(fā)生變化，使標(biāo)題欄始終存在，除非特別禁用。

一旦您創(chuàng)建了一個(gè)實(shí)例，您可以將通過提供的API分配給一個(gè)變量，隨后移動(dòng)，改變大小，顯示和隱藏 - 記錄如下。

提問

使用Boxy.ask()，Boxy.alert()和Boxy.confirm()這些幫手可能提示用戶從一些選項(xiàng)中進(jìn)行選擇以及完成可選的回調(diào)函數(shù)。點(diǎn)擊下面含有演示的鏈接，參考API文檔獲取更多信息。

提問 - Boxy.ask() - 用戶定義的選項(xiàng)，選擇項(xiàng)傳遞給回調(diào)函數(shù)
彈出 - Boxy.alert() - 回調(diào)函數(shù)總是不被調(diào)用
確認(rèn) - Boxy.confirm() - 僅當(dāng)用戶選擇了“確認(rèn)”時(shí)回調(diào)函數(shù)會(huì)被調(diào)用

復(fù)制代碼代碼如下:

 
<script type='text/javascript'> 
$(function() { 
$("#ask").click(function() { 
Boxy.ask("你感覺怎么樣?", ["好極了", "還好", "不太好"], function(val) { 
alert("你選擇的是: " + val); 
}, {title: "這是一個(gè)問題……"}); 
return false; 
}); 
$("#alert").click(function() { 
Boxy.alert("文件未找到", null, {title: "提示信息"}); 
return false; 
}); 
$("#confirm").click(function() { 
Boxy.confirm("請(qǐng)確認(rèn):", function() { alert("已經(jīng)確認(rèn)!"); }, {title: "提示信息"}); 
return false; 
}); 
}); 
</script> 

API(應(yīng)用編程接口)

Boxy.load(url, options)

以一個(gè)URL加載內(nèi)容并以Boxy對(duì)話框的形式展現(xiàn)。支持以下的一些選項(xiàng)參數(shù)：

類型 - HTTP方法，默認(rèn)為GET
緩存 - 如果是true，緩存內(nèi)容連續(xù)通話。相當(dāng)于緩存選項(xiàng)傳遞到j(luò)Query的Ajax方法。默認(rèn)：false。
過濾 - jQuery的表達(dá)式，用于過濾遠(yuǎn)程內(nèi)容。

（任何其他指定的選項(xiàng)將被傳遞到boxy的構(gòu)造函數(shù)中）

Boxy.get(element)

返回包含元素的實(shí)例，例如：<a href="#" onclick="Boxy.get(this).hide();">關(guān)閉對(duì)話框</a>

Boxy.ask(question, answers, callback, options)

顯示模式，即非可關(guān)閉對(duì)話框，允許用戶選擇選項(xiàng)。問題是要顯示給用戶的信息。答案是一個(gè)數(shù)組或一切可能的回答的數(shù)列?；卣{(diào)函數(shù)將收到選定的回答，這是否是需要的值或相應(yīng)的密鑰要根據(jù)一個(gè)數(shù)組或答案數(shù)列是否已經(jīng)提供了。options是一種額外的可選設(shè)置選項(xiàng)傳遞給對(duì)話框的構(gòu)造函數(shù)。

Boxy.alert(message, callback, options)

顯示模式，非可關(guān)閉對(duì)話框顯示消息給用戶。
注意：此方法并不是為了取代瀏覽器本地window.alert()函數(shù)提供，因?yàn)樗鼪]有能力阻止程序執(zhí)行，在對(duì)話框是可見的時(shí)候。

Boxy.confirm(message, callback, options)

顯示模式，非可關(guān)閉對(duì)話框顯示的含有確定和取消按鈕的消息。回調(diào)只會(huì)在用戶選擇了“確定”時(shí)被調(diào)用。
注意：此方法并不是為了取代瀏覽器提供的本地window.confirm()函數(shù)，因?yàn)樗鼪]有能力在對(duì)話框可見時(shí)阻止程序執(zhí)行的。

Boxy.linkedTo(ele)

返回已通過執(zhí)行器構(gòu)造函數(shù)選項(xiàng)連接DOM元素的boxy實(shí)例。

Boxy.isModalVisible()

返回true如果任何模式對(duì)話框是當(dāng)前可見的，否則返回false。

new Boxy(element, options)

構(gòu)造函數(shù)；創(chuàng)建一個(gè)新的boxy對(duì)話框。element是對(duì)話框的內(nèi)容；任何有效的參數(shù)，jQuery的$()函數(shù)在這里也是有效的。options是一個(gè)配置選項(xiàng)的散列，見下面詳細(xì)的資料。

estimateSize()

當(dāng)對(duì)話框不可見的時(shí)候估計(jì)其大小。如果當(dāng)前對(duì)話框可見，不要使用此方法，使用getSize()代替。

getSize()

以數(shù)組的形式[width, height]返回對(duì)話框的大小。

getContentSize()

返回對(duì)話框內(nèi)容區(qū)域的大小。默認(rèn)情況下，指在對(duì)話框框架里的一切，不包括標(biāo)題欄。

getPosition()

以[x,y]數(shù)組形式返回最頂層對(duì)話框的左上角坐標(biāo)。

getCenter()

以[x,y]數(shù)組形式返回最頂層對(duì)話框的中心點(diǎn)的坐標(biāo)。

getInner()

返回一個(gè)jQuery對(duì)象包裝對(duì)話框的內(nèi)部區(qū)域-框架內(nèi)包括標(biāo)題欄一切。

getContent()

返回一個(gè)jQuery對(duì)象包裝對(duì)話框的內(nèi)容區(qū)域-框架內(nèi)的一切，不包括標(biāo)題欄。

setContent(newContent)

設(shè)置對(duì)話框中的內(nèi)容，任何對(duì)$()有效的參數(shù)也對(duì)設(shè)置的新內(nèi)容有效?？涉溄?。

moveTo(x,y)

移動(dòng)對(duì)話框到左上角為(x,y)的位置，可鏈接。

centerAt(x,y)

把對(duì)話框移動(dòng)到中心坐標(biāo)為(x,y)的位置上。

center(axis)

移動(dòng)對(duì)話框，使其在視野的中央。可選參數(shù)axis可以是"x","y"中的任意一個(gè)中心軸。可鏈接。

resize(w,h,after)

重新調(diào)整對(duì)話框的高寬到[w,h]，完成后執(zhí)行回調(diào)函數(shù)，回調(diào)函數(shù)將接受Boxy實(shí)例作為參數(shù)?？涉溄?。

tween(w,h,after)

動(dòng)畫補(bǔ)間對(duì)話框高寬到[w,h]，完成后執(zhí)行回調(diào)函數(shù)，回調(diào)函數(shù)將接受Boxy實(shí)例作為參數(shù)?？涉溄?。

isVisible()

如果當(dāng)前對(duì)話框可見，則返回true，否則返回false。

show()

顯示對(duì)話框，可鏈接。

hide(after)

隱藏對(duì)話框，after為可選回調(diào)函數(shù)，完成后執(zhí)行?？涉溄?。

toggle()

觸發(fā)對(duì)話框的顯隱屬性?？涉溄?。

hideAndUnload(after)

在隱藏后立即執(zhí)行卸載。在卸載之前執(zhí)行after回調(diào)函數(shù)?？涉溄印?/DIV>

unload()

從DOM中刪除對(duì)話框，切斷其與執(zhí)行機(jī)構(gòu)的聯(lián)系，如果有的話。一旦出現(xiàn)一個(gè)對(duì)話框已被卸載它的任何進(jìn)一步行動(dòng)都是未定義的。

toTop()

將當(dāng)前對(duì)話框移動(dòng)到其他所有對(duì)話框的上部。可鏈接。

getTitle()

以HTML的形式返回對(duì)話框的標(biāo)題。

setTitle(t)

設(shè)置對(duì)話框的標(biāo)題為t，可鏈接。

完整的構(gòu)造函數(shù)選項(xiàng)列表

選項(xiàng)
描述
默認(rèn)

title
顯示在自動(dòng)生成標(biāo)題欄上的標(biāo)題
null

closeable
是否一個(gè)關(guān)閉對(duì)話框的驅(qū)動(dòng)器要添加到自動(dòng)生成標(biāo)題欄上。如果標(biāo)題沒有指定是沒有影響的。
true

closeText
在可用情況下標(biāo)題欄關(guān)閉鏈接的文字
"[關(guān)閉]"

draggable
是否對(duì)話框可以通過標(biāo)題欄進(jìn)行拖拽。標(biāo)題未指定沒有影響。
true

clone
內(nèi)部區(qū)域的元素以及事件處理程序應(yīng)不應(yīng)該在被替換之前進(jìn)行復(fù)制。
false

actuator
DOM元素（不包括jQuery對(duì)象），引發(fā)此對(duì)話框。兩者之間的聯(lián)系將被建立，此聯(lián)系允許對(duì)話框的參照稍后在通過執(zhí)行Boxy.linkedTo(element)獲取的元素中進(jìn)行檢索。當(dāng)對(duì)話框被卸載，此聯(lián)系也會(huì)被自動(dòng)切斷。
null

center
對(duì)話框是否屏幕中心顯示
true

fixed
是否使用固定定位(fixed)而不是絕對(duì)定位(absolute)，固定定位的對(duì)話框不受瀏覽器滾動(dòng)條影響。IE6不支持固定定位，其永遠(yuǎn)表現(xiàn)為絕對(duì)定位。
true

show
對(duì)話框是否需要立即顯示，如果是false，則需要你手動(dòng)調(diào)用dialog.show()以顯示對(duì)話框。
true

modal
對(duì)話框是否設(shè)置為模態(tài)。模態(tài)時(shí)，瀏覽器背景“黑黑的”，阻止頁(yè)面的其他元素接受事件。
false

x
對(duì)話框的x(left)坐標(biāo)
50

y
對(duì)話框的y(top)坐標(biāo)
50

unloadOnHide
如果是true，則在此對(duì)話框隱藏后會(huì)被卸載（如從DOM中刪除）
false

clickToFront
如果是true，則單擊對(duì)話框的任意位置（只是相對(duì)于標(biāo)題欄），會(huì)導(dǎo)致其跑到頂部。
false

behaviours
函數(shù)用來申請(qǐng)對(duì)話框內(nèi)容的自定義行為。每次調(diào)用setContent()，且在Boxy對(duì)象中的上下文中執(zhí)行，將接受一個(gè)包含內(nèi)容區(qū)域的jQuery對(duì)象作為參數(shù)。
function(r){}