彈出層之1：JQuery.Boxy (一) 使用介紹

更新時(shí)間：2011年10月06日 13:20:03 作者：

Boxy是一個(gè)基于JQuery的彈出層插件，它有相對(duì)漂亮的外觀，功能齊全，支持iframe，支持模式窗口但相對(duì)于同樣的彈出層插件BlockUI它明顯笨重，但使用不那么方便。

1、下載并修改插件
可以在官網(wǎng)上下載到最新版(http://plugins.jquery.com/files/boxy-0.1.4.zip)，到我寫(xiě)這些文字的時(shí)候最新版為0.1.4版，下載解壓后有1個(gè)主要的js文件：jquery.boxy.js;1個(gè)css文件;還有4個(gè)圖片用于構(gòu)成彈出層的4個(gè)圓角。將文件引入系統(tǒng)中，修改boxy.css，將下面的圖片路徑修改為項(xiàng)目中實(shí)際的位置，如果設(shè)置不對(duì)會(huì)引起圖片失效，那時(shí)就難看了。

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

 
/* 將此處的圖片修改為相對(duì)于css文件的圖片文件的路徑 */ 
.boxy-wrapper .top-left { background: url('../images/boxy-nw.png'); } 
.boxy-wrapper .top-right { background: url('../images/boxy-ne.png'); } 
.boxy-wrapper .bottom-right { background: url('../images/boxy-se.png'); } 
.boxy-wrapper .bottom-left { background: url('../images/boxy-sw.png'); } 
/* 注意:下面的路徑必須使用絕對(duì)路徑或url的形式 */ 
/*絕對(duì)路徑以‘/'開(kāi)始表示域名，使用時(shí)要注意虛擬目錄,沒(méi)有可以省略，/域名/圖片在站點(diǎn)中的路徑*/ 
/*url則是指http://www.xxx.com/xxx.png的形式出現(xiàn)*/ 
.boxy-wrapper .top-left { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/boxy-nw.png'); } 
.boxy-wrapper .top-right { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/boxy-ne.png'); } 
.boxy-wrapper .bottom-right { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/boxy-se.png'); } 
.boxy-wrapper .bottom-left { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/boxy-sw.png'); } 

2、將插件引用到頁(yè)面中

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

 
<script src="http://www.cnblogs.com/Contents/JS/jquery-1.5.js" type="text/javascript"></script> 
<link href="boxy.css" rel="stylesheet" type="text/css" /> 
<script src="jquery.boxy.js" type="text/javascript"></script> 

3、給匹配的元素綁定boxy行為

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

 
<script type="text/javascript"> 
$(function() { 
$(".boxy").boxy(); 
}); 
</script> 
<a href="#m1" class="boxy" title="這是超鏈接的標(biāo)題">3.1、點(diǎn)我就會(huì)彈出一個(gè)對(duì)話框</a> 
<div id="m1" style="display: none"> 我是超鏈接彈出來(lái)的</div> 

a標(biāo)簽中的 title如果不設(shè)置，彈出的框?qū)](méi)有標(biāo)題且不能拖動(dòng);href后面的錨記m1為對(duì)應(yīng)的要彈出的元素id;顯示的元素默認(rèn)如果設(shè)置為none時(shí)彈出將設(shè)置顯示。
3.2、彈出顯示指定的頁(yè)面內(nèi)容

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

 
<script type="text/javascript"> 
$(function() { 
$(".boxy").boxy(); 
}); 
</script> <a href="../default.aspx" class="boxy" title="提示">3.2、加載一個(gè)文檔，顯示為提示信息</a> 

href超鏈接到要彈出顯示內(nèi)容的文件。

3.3、提交時(shí)以確認(rèn)框形式彈出

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

 
<script type="text/javascript"> 
$(function() { 
$(".boxy").boxy(); 
}); 
</script> 
<form class="boxy" action="Default.html" method="post"> 
<input id="Submit1" type="submit" value="3.3、提交時(shí)顯示彈出層"/> 
</form> 

說(shuō)明：
1、boxy對(duì)話框自動(dòng)計(jì)算出您的內(nèi)容區(qū)域內(nèi)本身的大小和位置，沒(méi)有必要明確規(guī)定了包裝集的尺寸;
2、上面的簡(jiǎn)單使用方法中其實(shí)是在間接指定boxy中message屬性的內(nèi)容，該屬性為彈出框的顯示信息，默認(rèn)為：“請(qǐng)確認(rèn)：”
3、每個(gè)匹配錨title屬性將被用來(lái)作為其相應(yīng)的對(duì)話框的標(biāo)題
4、message的內(nèi)容的display屬性都將設(shè)置為block(顯示為塊)

下載本文示例

您可能感興趣的文章: