[jQuery] Dimensions Plugin - 基礎範例 (掌握元素的定位及大小)
[jsg.example]<style>
.noBorder {border: 0}
.longer {width: 400px}
.jqHandle {
background: red;
height:15px;
}
.jqDrag {
width: 100%;
cursor: move;
}
.jqResize {
width: 15px;
position: absolute;
bottom: 0;
right: 0;
cursor: se-resize;
}
.jqDnR {
z-index: 3;
position: relative;
}
</style>
[/jsg.example]
[img]http://jsgears.com/_icons/famfamfam/folder.gif[/img] jQuery Dimensions Plugin
[img]http://jsgears.com/_icons/famfamfam/icon_home.gif[/img] [url]http://brandonaaron.net/docs/dimensions/[/url]
[img]http://jsgears.com/_icons/famfamfam/comment.gif[/img] 取得元素位置、長、寬、高的好工具
[table=98%][tr][td][color=Red]Dimensions Plugin 的功能已經在 jQuery 1.2.6 以後加入 jQuery 的核心了，如果您用的 jQuery 版本低於 1.2.6 才會需要另外載入這個 plugin[/color][/td][/tr][/table]
用 JavaScript 寫互動式 UI 時，經常會需要取得網頁上某個 element 的位置或大小，這時候一個好的函式庫就很重要啦，不用自己去判斷 element 是否被包在其他 container 內、container 是否有 offset、以及不同瀏覽器之間可能需要使用不同的方法等等的各種問題。jQuery 的這個 Dimensions Plugin 已經很廣泛地被其他寫 UI 類 plugin 所使用的一個基礎的 plugin，由於非常受到歡迎、使用度高，因此在 jQuery 未來的版本中將來會直接把這個 plugin 加入到 jQuery 的核心([url=http://jQuery.com/]jQuery 1.2.6 已加入 Dimensions[/url] [img]http://jsgears.com/_icons/famfamfam/link.png[/img])。
先來看看 Dimensions Plugin 所提供的一些功能。
[size=4][color=Indigo][b]Part 1: Document & Window[/b][/color][/size]
[code js:nocontrols]//取得文件可視範圍的高度
$(window).height();[/code][jsg.example]<input id="demo1" type="button" value="試試看" /> <img src="http://jsgears.com/_icons/famfamfam/arrow_right.png"/> <input id="result1" type="text" value="" class="noBorder" />[/jsg.example]
[b] [/b]
[code js:nocontrols]//取得文件可視範圍的寬度
$(window).width();[/code][jsg.example]<input id="demo2" type="button" value="試試看" /> <img src="http://jsgears.com/_icons/famfamfam/arrow_right.png"/> <input id="result2" type="text" value="" class="noBorder" />[/jsg.example]
[b][/b]
[code js:nocontrols]//取得整個文件的高度
$(doucment).height();[/code][jsg.example]<input id="demo3" type="button" value="試試看" /> <img src="http://jsgears.com/_icons/famfamfam/arrow_right.png"/> <input id="result3" type="text" value="" class="noBorder" />[/jsg.example]
[b][/b]
[code js:nocontrols]//取得整個文件的寬度
$(doucment).width();[/code][jsg.example]<input id="demo4" type="button" value="試試看" /> <img src="http://jsgears.com/_icons/famfamfam/arrow_right.png"/> <input id="result4" type="text" value="" class="noBorder" /><hr />[/jsg.example]
[size=4][color=Indigo][b]Part 2: Element[/b][/color][/size]
[jsg.example]
<div id="elem1" class="jqDnR" style="width: 300px; height: 100px; border: solid 5px navy; background-color: lightyellow; padding: 3px; margin: 4px"><div class="jqHandle jqDrag"></div>
歡迎來到 jsGears.com<br />
這是測試用元素: #elem1<br />
padding: 3px, margin: 4px, border: 5px<br />
可以隨意拖曳, 也可以放大縮小喔
<div class="jqHandle jqResize"></div>
</div>
[/jsg.example]
[code js:nocontrols]//取得 #elem1 的高度
$('#elem1').height();[/code][jsg.example]<input id="demo5" type="button" value="試試看" /> <img src="http://jsgears.com/_icons/famfamfam/arrow_right.png"/> <input id="result5" type="text" value="" class="noBorder" />[/jsg.example]
[b][/b]
[code js:nocontrols]//取得 #elem1 的寬度
$('#elem1').width();[/code][jsg.example]<input id="demo6" type="button" value="試試看" /> <img src="http://jsgears.com/_icons/famfamfam/arrow_right.png"/> <input id="result6" type="text" value="" class="noBorder" />[/jsg.example]
[b][/b]
[code js:nocontrols]//取得 #elem1 的內部高度 (加上 padding)
$('#elem1').innerHeight();[/code][jsg.example]<input id="demo7" type="button" value="試試看" /> <img src="http://jsgears.com/_icons/famfamfam/arrow_right.png"/> <input id="result7" type="text" value="" class="noBorder" />[/jsg.example]
[b][/b]
[code js:nocontrols]//取得 #elem1 的內部寬度 (加上 padding)
$('#elem1').innerWidth();[/code][jsg.example]<input id="demo8" type="button" value="試試看" /> <img src="http://jsgears.com/_icons/famfamfam/arrow_right.png"/> <input id="result8" type="text" value="" class="noBorder" />[/jsg.example]
[b][/b]
[code js:nocontrols]//取得 #elem1 的外部高度 (加上 padding 和 border)
$('#elem1').outerHeight();[/code][jsg.example]<input id="demo9" type="button" value="試試看" /> <img src="http://jsgears.com/_icons/famfamfam/arrow_right.png"/> <input id="result9" type="text" value="" class="noBorder" />[/jsg.example]
[b][/b]
[code js:nocontrols]//取得 #elem1 的外部寬度 (加上 padding 和 border)
$('#elem1').outerWidth();[/code][jsg.example]<input id="demo10" type="button" value="試試看" /> <img src="http://jsgears.com/_icons/famfamfam/arrow_right.png"/> <input id="result10" type="text" value="" class="noBorder" />[/jsg.example]
[b][/b]
[code js:nocontrols]//取得 #elem1 的外部高度再加上 margin
$('#elem1').outerHeight({ margin: true });[/code][jsg.example]<input id="demo11" type="button" value="試試看" /> <img src="http://jsgears.com/_icons/famfamfam/arrow_right.png"/> <input id="result11" type="text" value="" class="noBorder" />[/jsg.example]
[b][/b]
[code js:nocontrols]//取得 #elem1 的外部寬度再加上 margin
$('#elem1').outerWidth({ margin: true });[/code][jsg.example]<input id="demo12" type="button" value="試試看" /> <img src="http://jsgears.com/_icons/famfamfam/arrow_right.png"/> <input id="result12" type="text" value="" class="noBorder" /><hr />[/jsg.example]
[size=4][color=Indigo][b]Part 3: Scroll Offsets[/b][/color][/size]
[jsg.example]
<div id="elem2" style="width: 200px; height: 100px; border: solid 5px navy; background-color: lightyellow; padding: 3px; overflow: auto;">
<p style="width: 300px; height: 300px">
歡迎來到 jsGears.com<br />
這是測試用元素: #elem2<br /><br />
jsGears.com 有越來越多的 JavaScript/jQuery 教學及範例，歡迎舊雨新知一起來參與。
</p></div>
[/jsg.example]
[code js:nocontrols]//設定 #elem2 的垂直捲動
$('#elem2').scrollTop(50);[/code][jsg.example]<input id="demo13" type="button" value="試試看" /> <img src="http://jsgears.com/_icons/famfamfam/arrow_right.png"/> <input id="result13" type="text" value="" class="noBorder" />[/jsg.example]
[b][/b]
[code js:nocontrols]//取得 #elem2 垂直捲動的值
$('#elem2').scrollTop();[/code][jsg.example]<input id="demo14" type="button" value="試試看" /> <img src="http://jsgears.com/_icons/famfamfam/arrow_right.png"/> <input id="result14" type="text" value="" class="noBorder" />[/jsg.example]
[b][/b]
[code js:nocontrols]//設定 #elem2 的水平捲動
$('#elem2').scrollLeft(50);[/code][jsg.example]<input id="demo15" type="button" value="試試看" /> <img src="http://jsgears.com/_icons/famfamfam/arrow_right.png"/> <input id="result15" type="text" value="" class="noBorder" />[/jsg.example]
[b][/b]
[code js:nocontrols]//取得 #elem2 水平捲動的值
$('#elem2').scrollLeft();[/code][jsg.example]<input id="demo16" type="button" value="試試看" /> <img src="http://jsgears.com/_icons/famfamfam/arrow_right.png"/> <input id="result16" type="text" value="" class="noBorder" /><hr />[/jsg.example]
[size=4][color=Indigo][b]Part 4: Offset[/b][/color][/size]
[jsg.example]
<div id="elem3" style="width: 300px; height: 120px; border: 3px solid navy; background-color: lightyellow; padding: 0; overflow: auto; position: relative;">
<div style="width: 900px; height: 600px; border: 0; padding: 5px; position: relative;">
歡迎繼續觀看 jsGears.com 的範例<br />
這是測試用元素: #elem3<br />
<div id="elem4" style="width: 200px; border: 3px solid navy; padding: 5px; background-color: white; position: relative;" class="jqDrag">
這是測試用元素: #elem4 <br />
一樣是可以拖曳的喔～
</div>
</div></div>
[/jsg.example]
[code js:nocontrols]//取得 #elem4 左上角的位置
$('#elem4').offset();[/code][jsg.example]<input id="demo17" type="button" value="試試看" /> <img src="http://jsgears.com/_icons/famfamfam/arrow_right.png"/> <input id="result17" type="text" value="" class="noBorder longer" />[/jsg.example]
[b][/b]
[code js:nocontrols]//取得 #elem4 在 parent 內的位置
$('#elem4').position();[/code][jsg.example]<input id="demo20" type="button" value="試試看" /> <img src="http://jsgears.com/_icons/famfamfam/arrow_right.png"/> <input id="result20" type="text" value="" class="noBorder longer" />[/jsg.example]
[jsg.example]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="_lib/jquery/plugins/jqDnR.js"></script>
<script type="text/javascript">
$j = jQuery.noConflict();
$j(document).ready(function() {
$j('#demo1').click(function() {
$j('#result1').val($j(window).height());
});
$j('#demo2').click(function() {
$j('#result2').val($j(window).width());
});
$j('#demo3').click(function() {
$j('#result3').val($j(document).height());
});
$j('#demo4').click(function() {
$j('#result4').val($j(document).width());
});
$j('#demo5').click(function() {
$j('#result5').val($j('#elem1').height());
});
$j('#demo6').click(function() {
$j('#result6').val($j('#elem1').width());
});
$j('#demo7').click(function() {
$j('#result7').val($j('#elem1').innerHeight());
});
$j('#demo8').click(function() {
$j('#result8').val($j('#elem1').innerWidth());
});
$j('#demo9').click(function() {
$j('#result9').val($j('#elem1').outerHeight());
});
$j('#demo10').click(function() {
$j('#result10').val($j('#elem1').outerWidth());
});
$j('#demo11').click(function() {
$j('#result11').val($j('#elem1').outerHeight({margin: true}));
});
$j('#demo12').click(function() {
$j('#result12').val($j('#elem1').outerWidth({margin: true}));
});
$j('#demo13').click(function() {
$j('#elem2').scrollTop(50);
$j('#result13').val('請看 #elem2 捲動的結果');
});
$j('#demo14').click(function() {
$j('#result14').val($j('#elem2').scrollTop());
});
$j('#demo15').click(function() {
$j('#elem2').scrollLeft(50);
$j('#result15').val('請看 #elem2 捲動的結果');
});
$j('#demo16').click(function() {
$j('#result16').val($j('#elem2').scrollLeft());
});
$j('#demo17').click(function() {
var r = $j('#elem4').offset({border: false, padding: false});
$j('#result17').val(' { top: ' + r.top + ', left: ' + r.left + ' }');
});
/* 保留
$j('#demo18').click(function() {
var r = $j('#elem4').offset({border: true});
$j('#result18').val(' { top: ' + r.top + ', left: ' + r.left + ' }');
});
$j('#demo19').click(function() {
var r = $j('#elem4').offset({border: true, padding: true});
$j('#result19').val(' { top: ' + r.top + ', left: ' + r.left + ' }');
});
*/
$j('#demo20').click(function() {
var r = $j('#elem4').position();
$j('#result20').val(' { top: ' + r.top + ', left: ' + r.left + ' }');
});
$j('#elem1').jqDrag('.jqDrag').jqResize('.jqResize');
$j('#elem4').jqDrag();
});
</script>
[/jsg.example]
頁:
[1]