Home » jQuery 外掛

[jQ]bgiframe 2.1.2

範例 1
沒錯!只要 300 元就能獲得我們團隊完整的協助,讓效果能迅速的整合到您的網站,並保證瀏覽器的相容性。
立刻申請!



不知道各位是否有遇過浮動區塊在 IE 6 中會被下拉選單給穿透過去呢?這時候就算怎麼改 z-index 都是沒有用的,因為下拉選單的層級就是都會比較高。雖然只要在浮動區塊中放入一個 iframe 則可以解決這個怪問題,但這樣都手動去加也太沒效益了。而 bgiframe 能自動的在指定的區塊下面插入一個 iframe 來解決下拉選單層級的問題。

套件名稱:bgiframe
套件版本:2.1.2
作者網站:http://brandonaaron.net/code/bgiframe/docs/
套件網址:http://plugins.jquery.com/project/bgiframe
發佈日期:2010-02-11
檔案大小:1.68 KB
檔案下載:jquery.bgiframe.js

參數說明:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
top(選填)
描述: 要套用 bgiframe 元素的上邊框寬度,此值應為負值;預設會自動取得 .currentStyle.borderTopWidth。
預設值: 'auto'
 
left(選填)
描述: 要套用 bgiframe 元素的左邊框寬度,此值應為負值;預設會自動取得 .currentStyle.borderLeftWidth。
預設值: 'auto'
 
width(選填)
描述: 要套用 bgiframe 元素的寬度;預設會自動取得 offsetWidth。
預設值: 'auto'
 
height(選填)
描述: 要套用 bgiframe 元素的高度;預設會自動取得 offsetHeight。
預設值: 'auto'
 
opacity(選填)
描述: 是否讓 bgiframe 透明。
預設值: true
 
src(選填)
描述: 指定 bgiframe 中 iframe 的 src 值。
預設值: 'javascript:false;'

方法說明:

檢視原始碼 JavaScript
1
2
// 把指定的區塊加上 bgiframe
$(selector).bgiframe(s);

使用範例:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.bgiframe.js"></script>
<style type="text/css">
div {
	position: absolute;
	border: solid 1px #000;
	background-color: #ccc;
	top: 10px;
	width: 200px;
	height: 100px;
}
.div1 {
	left: 30px;
}
.div2 {
	left: 298px;
}
</style>
<script type="text/javascript">
$(function(){
	// 幫 .div2 加上 bgiframe
	$('.div2').bgiframe();
 
	// 幫 .div2 加上 bgiframe
	// 並且不讓 iframe 透明
	$('.div3').bgiframe({
		opacity: false
	}); 
});
</script>
 
<body>
	<select>  
		<option>我在 IE 6 中是一個人見人討厭的下拉選單</option>  
	</select>
 
	<div class="div1">我就是想要浮在下拉選單的上面</div>
 
	<select>  
		<option>我在 IE 6 中是一個人見人討厭的下拉選單</option>  
	</select>
 
	<div class="div2">我就是想要浮在下拉選單的上面</div>
 
	<select>  
		<option>我在 IE 6 中是一個人見人討厭的下拉選單</option>  
	</select>
 
	<div class="div3">我就是想要浮在下拉選單的上面</div>
</body>
範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

附註:
bgiframe 只有在 IE 6 中才會有效果。

發表迴響