jQuery Dimensions Plugin
http://brandonaaron.net/docs/dimensions/
取得元素位置、長、寬、高的好工具
Dimensions Plugin 的功能已經在 jQuery 1.2.6 以後加入 jQuery 的核心了,如果您用的 jQuery 版本低於 1.2.6 才會需要另外載入這個 plugin |
用 JavaScript 寫互動式 UI 時,經常會需要取得網頁上某個 element 的位置或大小,這時候一個好的函式庫就很重要啦,不用自己去判斷 element 是否被包在其他 container 內、container 是否有 offset、以及不同瀏覽器之間可能需要使用不同的方法等等的各種問題。jQuery 的這個 Dimensions Plugin 已經很廣泛地被其他寫 UI 類 plugin 所使用的一個基礎的 plugin,由於非常受到歡迎、使用度高,因此在 jQuery 未來的版本中將來會直接把這個 plugin 加入到 jQuery 的核心(jQuery 1.2.6 已加入 Dimensions )。
先來看看 Dimensions Plugin 所提供的一些功能。
Part 1: Document & Window//取得文件可視範圍的高度
$(window).height();
//取得文件可視範圍的寬度
$(window).width();
//取得整個文件的高度
$(doucment).height();
//取得整個文件的寬度
$(doucment).width();
Part 2: Element
歡迎來到 jsGears.com
這是測試用元素: #elem1
padding: 3px, margin: 4px, border: 5px
可以隨意拖曳, 也可以放大縮小喔
//取得 #elem1 的高度
$('#elem1').height();
//取得 #elem1 的寬度
$('#elem1').width();
//取得 #elem1 的內部高度 (加上 padding)
$('#elem1').innerHeight();
//取得 #elem1 的內部寬度 (加上 padding)
$('#elem1').innerWidth();
//取得 #elem1 的外部高度 (加上 padding 和 border)
$('#elem1').outerHeight();
//取得 #elem1 的外部寬度 (加上 padding 和 border)
$('#elem1').outerWidth();
//取得 #elem1 的外部高度再加上 margin
$('#elem1').outerHeight({ margin: true });
//取得 #elem1 的外部寬度再加上 margin
$('#elem1').outerWidth({ margin: true });
Part 3: Scroll Offsets
歡迎來到 jsGears.com
這是測試用元素: #elem2
jsGears.com 有越來越多的 JavaScript/jQuery 教學及範例,歡迎舊雨新知一起來參與。
//設定 #elem2 的垂直捲動
$('#elem2').scrollTop(50);
//取得 #elem2 垂直捲動的值
$('#elem2').scrollTop();
//設定 #elem2 的水平捲動
$('#elem2').scrollLeft(50);
//取得 #elem2 水平捲動的值
$('#elem2').scrollLeft();
Part 4: Offset
歡迎繼續觀看 jsGears.com 的範例
這是測試用元素: #elem3
這是測試用元素: #elem4
一樣是可以拖曳的喔~
//取得 #elem4 左上角的位置
$('#elem4').offset();
//取得 #elem4 在 parent 內的位置
$('#elem4').position();
|