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

1、下載並修改外掛程式
可以在官網上下載到最新版(http://plugins.jquery.com/files/boxy-0.1.4.zip)，到我寫這些文字的時候最新版為0.1.4版，下載解壓後有1個主要的js檔案：jquery.boxy.js;1個css檔案;還有4個圖片用於構成彈出層的4個圓角。將檔案引入系統中，修改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對話方塊自動計算出您的內容地區內本身的大小和位置，沒有必要明確規定了封裝集的尺寸;
2、上面的簡單使用方法中其實是在間接指定boxy中message屬性的內容，該屬性為彈出框的顯示資訊，預設為：“請確認：”
3、每個匹配錨title屬性將被用來作為其相應的對話方塊的標題
4、message的內容的display屬性都將設定為block(顯示為塊)


下載本文樣本