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

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

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

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

復制代碼代碼如下:

 
/* 將此處的圖片修改為相對于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'); } 
/* 注意:下面的路徑必須使用絕對路徑或url的形式 */ 
/*絕對路徑以‘/'開始表示域名，使用時要注意虛擬目錄,沒有可以省略，/域名/圖片在站點中的路徑*/ 
/*url則是指http://www.xxx.com/xxx.png的形式出現*/ 
.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、將插件引用到頁面中

復制代碼代碼如下:

 
<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行為

復制代碼代碼如下:

 
<script type="text/javascript"> 
$(function() { 
$(".boxy").boxy(); 
}); 
</script> 
<a href="#m1" class="boxy" title="這是超鏈接的標題">3.1、點我就會彈出一個對話框</a> 
<div id="m1" style="display: none"> 我是超鏈接彈出來的</div> 

a標簽中的 title如果不設置，彈出的框將沒有標題且不能拖動;href后面的錨記m1為對應的要彈出的元素id;顯示的元素默認如果設置為none時彈出將設置顯示。
3.2、彈出顯示指定的頁面內容

復制代碼代碼如下:

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

href超鏈接到要彈出顯示內容的文件。

3.3、提交時以確認框形式彈出

復制代碼代碼如下:

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

說明：
1、boxy對話框自動計算出您的內容區(qū)域內本身的大小和位置，沒有必要明確規(guī)定了包裝集的尺寸;
2、上面的簡單使用方法中其實是在間接指定boxy中message屬性的內容，該屬性為彈出框的顯示信息，默認為：“請確認：”
3、每個匹配錨title屬性將被用來作為其相應的對話框的標題
4、message的內容的display屬性都將設置為block(顯示為塊)

下載本文示例

您可能感興趣的文章: