不知道各位是否有遇過浮動區塊在 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> |
附註:
bgiframe 只有在 IE 6 中才會有效果。