欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2011年10月06日 23:11:10   作者：  
在《彈出層之1：JQuery.Boxy (一)》中講到了JQuery.Boxy的基本用法，本次講下手動(dòng)創(chuàng)建實(shí)例，new一個(gè)boxy對(duì)象是很容易的，傳遞一些參數(shù)對(duì)象就能滿(mǎn)足不同的需求了。
4.1、手動(dòng)創(chuàng)建實(shí)例
復(fù)制代碼 代碼如下:

<script type="text/javascript">
$(function() {
$("#a1").click(function() {
//實(shí)例化一個(gè)Boxy對(duì)象
var box1 = new Boxy("<h3>這個(gè)參數(shù)是顯示的內(nèi)容</h3>" //顯示內(nèi)容
,
{
title: "標(biāo)題", //對(duì)話(huà)框標(biāo)題
modal: false, //是否為模式窗口
afterHide: function(e) { alert("dialog hide"); }, //隱藏時(shí)的回調(diào)函數(shù)
afterShow: function(e) { alert("dialog show"); }, //顯示時(shí)的回調(diào)函數(shù)
closeText: "X", //關(guān)閉功能按鈕的標(biāo)題文字
draggable: true //是否可以拖動(dòng)
});
box1.resize(300, 100); //設(shè)置對(duì)話(huà)框的大小
});
});
</script> <p>
<a href="#" id="a1">4.1、手動(dòng)創(chuàng)建一個(gè)實(shí)例</a>
</p>


測(cè)試發(fā)現(xiàn)modal為true為模式窗口，也就是背景被遮罩時(shí)就算設(shè)置 draggable: true拖動(dòng)也是無(wú)效的。

5.1、常用對(duì)話(huà)框—提問(wèn)框
復(fù)制代碼 代碼如下:

//提問(wèn)框
$("#a2").click(function() {
Boxy.ask("鳳姐最漂亮的部分是？", //問(wèn)題
["臉皮", "小嘴巴", "知識(shí)淵博"], //可選項(xiàng)按鈕
function(val) { alert(val) }, //回調(diào)方法
{title:"測(cè)試",modal:false} //boxy屬性設(shè)置
);
}); <p>
<a href="#" id="a2">5.1、彈出提問(wèn)框</a>
</p>

Boxy.ask(question, answers, callback, options)方法的4個(gè)參數(shù)question表示提問(wèn)；answers提問(wèn)選擇項(xiàng)，一般為數(shù)組；callback為回調(diào)方法；options是boxy彈出框的的屬性對(duì)象，見(jiàn)4.1。

5.2、常用對(duì)話(huà)框—警告框
復(fù)制代碼 代碼如下:

//警告框
$("#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個(gè)參數(shù)message表示警告信息；callback為回調(diào)方法；options是boxy彈出框的的屬性對(duì)象，見(jiàn)4.1。

5.3、常用對(duì)話(huà)框—確認(rèn)框
復(fù)制代碼 代碼如下:

//確認(rèn)框
$("#a4").click(function() {
Boxy.confirm("你確認(rèn)要看鳳姐的照片嗎？", //確認(rèn)提示信息
function() { alert("上當(dāng)了") }, //點(diǎn)擊確認(rèn)后的回調(diào)信息
{ title: "測(cè)試", modal: false }); //boxy屬性設(shè)置
}); <p>
<a href="#" id="a4">5.3、確認(rèn)框</a>
</p>

Boxy.confirm(message, callback, options)方法的3個(gè)參數(shù)message表示確認(rèn)提示信息；callback為回調(diào)方法,只有點(diǎn)擊確認(rèn)時(shí)才會(huì)執(zhí)行；options是boxy彈出框的的屬性對(duì)象，見(jiàn)4.1。
 
6、API參數(shù)

方法：
Boxy.load(url, options)
以一個(gè)URL加載內(nèi)容并以Boxy對(duì)話(huà)框的形式展現(xiàn)。支持以下的一些選項(xiàng)參數(shù)：
•類(lèi)型 - HTTP方法，默認(rèn)為GET
•緩存 - 如果是true，緩存內(nèi)容連續(xù)通話(huà)。相當(dāng)于緩存選項(xiàng)傳遞到j(luò)Query的Ajax方法。默認(rèn)：false。
•過(guò)濾 - jQuery的表達(dá)式，用于過(guò)濾遠(yuǎn)程內(nèi)容。
（任何其他指定的選項(xiàng)將被傳遞到boxy的構(gòu)造函數(shù)中）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

center(axis)
移動(dòng)對(duì)話(huà)框，使其在視野的中央?？蛇x參數(shù)axis可以是"x","y"中的任意一個(gè)中心軸?？涉溄?。

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

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

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

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

hide(after)
隱藏對(duì)話(huà)框，after為可選回調(diào)函數(shù)，完成后執(zhí)行。可鏈接。

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

hideAndUnload(after)
在隱藏后立即執(zhí)行卸載。在卸載之前執(zhí)行after回調(diào)函數(shù)。可鏈接。

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

toTop()
將當(dāng)前對(duì)話(huà)框移動(dòng)到其他所有對(duì)話(huà)框的上部?？涉溄印?/P>

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

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


屬性:

 

CSS選擇器
.boxy-wrapper .title-bar
div包裝的自動(dòng)生成的標(biāo)題欄

.boxy-wrapper .title-bar h2
標(biāo)題欄的內(nèi)容

.boxy-wrapper .title-bar.dragging
拖拽時(shí)候的標(biāo)題欄

.boxy-wrapper .title-bar .close
默認(rèn)的關(guān)閉對(duì)話(huà)框的執(zhí)行器

.boxy-inner
內(nèi)部區(qū)域，包括標(biāo)題欄

.boxy-content
內(nèi)部區(qū)域，不包括標(biāo)題欄。這個(gè)class類(lèi)將被自動(dòng)添加到傳遞給Boxy的構(gòu)造函數(shù)的任何元素。

.boxy-wrapper .question
通過(guò)Boxy.ask()創(chuàng)建的，包含問(wèn)題文字

.boxy-wrapper .answers
通過(guò)Boxy.ask()創(chuàng)建的，包含應(yīng)答的按鈕

.close
這一class類(lèi)的任何內(nèi)容的單擊事件將關(guān)聯(lián)到關(guān)閉對(duì)話(huà)框上。

 

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

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

相關(guān)文章

最新評(píng)論