弹出层之1：JQuery.Boxy (二)
在《彈出層之1：JQuery.Boxy (一)》中講到了JQuery.Boxy的基本用法，本次講下手動創(chuàng)建實(shí)例，new一個boxy對象是很容易的，傳遞一些參數(shù)對象就能滿足不同的需求了。
4.1、手動創(chuàng)建實(shí)例
????????$(function()?{
????????????$("#a1").click(function()?{
????????//實(shí)例化一個Boxy對象
????????????????var?box1?=?new?Boxy("<h3>這個參數(shù)是顯示的內(nèi)容</h3>"?//顯示內(nèi)容
????????,
????????????????{
????????????????????title:?"標(biāo)題",?//對話框標(biāo)題
????????????????????modal:?false,?//是否為模式窗口
????????????????????afterHide:?function(e)?{?alert("dialog?hide");?},?//隱藏時的回調(diào)函數(shù)
????????????????????afterShow:?function(e)?{?alert("dialog?show");?},?//顯示時的回調(diào)函數(shù)
????????????????????closeText:?"X",???//關(guān)閉功能按鈕的標(biāo)題文字
????????????????????draggable:?true?//是否可以拖動
????????????????});
????????????????box1.resize(300,?100);??//設(shè)置對話框的大小
????????????});
????????});
????</script> <p>
????????<a?href="#"?id="a1">4.1、手動創(chuàng)建一個實(shí)例</a>
</p>
?
測試發(fā)現(xiàn)modal為true為模式窗口，也就是背景被遮罩時就算設(shè)置 draggable: true拖動也是無效的。 ? 5.1、常用對話框—提問框 //提問框????????????$("#a2").click(function()?{
????????????????Boxy.ask("鳳姐最漂亮的部分是？",??//問題
????????????????["臉皮",?"小嘴巴",?"知識淵博"],?//可選項(xiàng)按鈕
????????????????function(val)?{?alert(val)?},?//回調(diào)方法
????????????????{title:"測試",modal:false}???//boxy屬性設(shè)置
????????????????);
????????????}); <p>
????????<a?href="#"?id="a2">5.1、彈出提問框</a>
????</p> Boxy.ask(question, answers, callback, options)方法的4個參數(shù)question表示提問；answers提問選擇項(xiàng)，一般為數(shù)組；callback為回調(diào)方法；options是boxy彈出框的的屬性對象，見4.1。 ? 5.2、常用對話框—警告框 //警告框
????????????$("#a3").click(function()?{
????????????????Boxy.alert("這是警告信息",???//提示信息
????????????????function(val)?{?alert(val);?},???//回調(diào)方法
????????????????{title:"提示"});??//boxy屬性
????????????}); <p>
????????<a?href="#"?id="a3">5.2、警告框</a>
????</p> Boxy.alert(message, callback, options)方法的3個參數(shù)message表示警告信息；callback為回調(diào)方法；options是boxy彈出框的的屬性對象，見4.1。 ? 5.3、常用對話框—確認(rèn)框 //確認(rèn)框
????????????$("#a4").click(function()?{
????????????????Boxy.confirm("你確認(rèn)要看鳳姐的照片嗎？",?//確認(rèn)提示信息
????????????????function()?{?alert("上當(dāng)了")?},??//點(diǎn)擊確認(rèn)后的回調(diào)信息
????????????????{?title:?"測試",?modal:?false?});???//boxy屬性設(shè)置
????????????}); <p>
????????<a?href="#"?id="a4">5.3、確認(rèn)框</a>
????</p> Boxy.confirm(message, callback, options)方法的3個參數(shù)message表示確認(rèn)提示信息；callback為回調(diào)方法,只有點(diǎn)擊確認(rèn)時才會執(zhí)行；options是boxy彈出框的的屬性對象，見4.1。 ? 6、API參數(shù)
方法：
Boxy.load(url, options)
以一個URL加載內(nèi)容并以Boxy對話框的形式展現(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="#" οnclick="Boxy.get(this).hide();">關(guān)閉對話框</a>
Boxy.ask(question, answers, callback, options)
顯示模式，即非可關(guān)閉對話框，允許用戶選擇選項(xiàng)。問題是要顯示給用戶的信息。答案是一個數(shù)組或一切可能的回答的數(shù)列。回調(diào)函數(shù)將收到選定的回答，這是否是需要的值或相應(yīng)的密鑰要根據(jù)一個數(shù)組或答案數(shù)列是否已經(jīng)提供了。options是一種額外的可選設(shè)置選項(xiàng)傳遞給對話框的構(gòu)造函數(shù)。
Boxy.alert(message, callback, options)
顯示模式，非可關(guān)閉對話框顯示消息給用戶。
注意：此方法并不是為了取代瀏覽器本地window.alert()函數(shù)提供，因?yàn)樗鼪]有能力阻止程序執(zhí)行，在對話框是可見的時候。
Boxy.confirm(message, callback, options)
顯示模式，非可關(guān)閉對話框顯示的含有確定和取消按鈕的消息?；卣{(diào)只會在用戶選擇了“確定”時被調(diào)用。
注意：此方法并不是為了取代瀏覽器提供的本地window.confirm()函數(shù)，因?yàn)樗鼪]有能力在對話框可見時阻止程序執(zhí)行的。
Boxy.linkedTo(ele)
返回已通過執(zhí)行器構(gòu)造函數(shù)選項(xiàng)連接DOM元素的boxy實(shí)例。
Boxy.isModalVisible()
返回true如果任何模式對話框是當(dāng)前可見的，否則返回false。
new Boxy(element, options)
構(gòu)造函數(shù)；創(chuàng)建一個新的boxy對話框。element是對話框的內(nèi)容；任何有效的參數(shù)，jQuery的$()函數(shù)在這里也是有效的。options是一個配置選項(xiàng)的散列，見下面詳細(xì)的資料。
estimateSize()
當(dāng)對話框不可見的時候估計其大小。如果當(dāng)前對話框可見，不要使用此方法，使用getSize()代替。
getSize()
以數(shù)組的形式[width, height]返回對話框的大小。
getContentSize()
返回對話框內(nèi)容區(qū)域的大小。默認(rèn)情況下，指在對話框框架里的一切，不包括標(biāo)題欄。
getPosition()
以[x,y]數(shù)組形式返回最頂層對話框的左上角坐標(biāo)。
getCenter()
以[x,y]數(shù)組形式返回最頂層對話框的中心點(diǎn)的坐標(biāo)。
getInner()
返回一個jQuery對象包裝對話框的內(nèi)部區(qū)域-框架內(nèi)包括標(biāo)題欄一切。
getContent()
返回一個jQuery對象包裝對話框的內(nèi)容區(qū)域-框架內(nèi)的一切，不包括標(biāo)題欄。
setContent(newContent)
設(shè)置對話框中的內(nèi)容，任何對$()有效的參數(shù)也對設(shè)置的新內(nèi)容有效?？涉溄?。
moveTo(x,y)
移動對話框到左上角為(x,y)的位置，可鏈接。
centerAt(x,y)
把對話框移動到中心坐標(biāo)為(x,y)的位置上。
center(axis)
移動對話框，使其在視野的中央。可選參數(shù)axis可以是"x","y"中的任意一個中心軸?？涉溄?。
resize(w,h,after)
重新調(diào)整對話框的高寬到[w,h]，完成后執(zhí)行回調(diào)函數(shù)，回調(diào)函數(shù)將接受Boxy實(shí)例作為參數(shù)?？涉溄印?/p>
tween(w,h,after)
動畫補(bǔ)間對話框高寬到[w,h]，完成后執(zhí)行回調(diào)函數(shù)，回調(diào)函數(shù)將接受Boxy實(shí)例作為參數(shù)?？涉溄?。
isVisible()
如果當(dāng)前對話框可見，則返回true，否則返回false。
show()
顯示對話框，可鏈接。
hide(after)
隱藏對話框，after為可選回調(diào)函數(shù)，完成后執(zhí)行?？涉溄印?/p>
toggle()
觸發(fā)對話框的顯隱屬性?？涉溄?。
hideAndUnload(after)
在隱藏后立即執(zhí)行卸載。在卸載之前執(zhí)行after回調(diào)函數(shù)。可鏈接。
unload()
從DOM中刪除對話框，切斷其與執(zhí)行機(jī)構(gòu)的聯(lián)系，如果有的話。一旦出現(xiàn)一個對話框已被卸載它的任何進(jìn)一步行動都是未定義的。
toTop()
將當(dāng)前對話框移動到其他所有對話框的上部?？涉溄印?/p>
getTitle()
以HTML的形式返回對話框的標(biāo)題。
setTitle(t)
設(shè)置對話框的標(biāo)題為t，可鏈接。
屬性:
?
CSS選擇器
.boxy-wrapper .title-bar
div包裝的自動生成的標(biāo)題欄
.boxy-wrapper .title-bar h2
標(biāo)題欄的內(nèi)容
.boxy-wrapper .title-bar.dragging
拖拽時候的標(biāo)題欄
.boxy-wrapper .title-bar .close
默認(rèn)的關(guān)閉對話框的執(zhí)行器
.boxy-inner
內(nèi)部區(qū)域，包括標(biāo)題欄
.boxy-content
內(nèi)部區(qū)域，不包括標(biāo)題欄。這個class類將被自動添加到傳遞給Boxy的構(gòu)造函數(shù)的任何元素。
.boxy-wrapper .question
通過Boxy.ask()創(chuàng)建的，包含問題文字
.boxy-wrapper .answers
通過Boxy.ask()創(chuàng)建的，包含應(yīng)答的按鈕
.close
這一class類的任何內(nèi)容的單擊事件將關(guān)聯(lián)到關(guān)閉對話框上。
?
選擇器的外框圓角效果是使用png圖片實(shí)現(xiàn)的，如果想更改透明程度，可以使用ps修改圖片；如果不考慮IE6的話，可以使用另一種常用的圓角方法(不用圖片只用css樣式)。
?
官網(wǎng)：http://onehackoranother.com/projects/jquery/boxy/
譯文：http://www.zhangxinxu.com/wordpress/?p=318
?
本文示例
轉(zhuǎn)載于:https://www.cnblogs.com/best/archive/2011/10/05/2199258.html
總結(jié)
以上是生活随笔為你收集整理的弹出层之1：JQuery.Boxy (二)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 高效的组合数计算方法
- 下一篇： DTD 定义和验证