返回列表 發帖

[jQuery] Dimensions Plugin - 基礎範例 (掌握元素的定位及大小)


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();


To infinity and beyond!

返回列表 回復 發帖