jQuery獲取元素位置以及高度與寬度 動態調整打開新窗口效果

來源：http://www.biuuu.com/?p=285

上期在 jQuery模擬新窗口打開 輕松使用javascript創建新窗口 一 文中通過jQuery模擬新窗口打開創建新窗口，了解jQuery打開新窗口機制原理，但通過細心我們發現，定義的窗口CSS樣式是固定的，對于實際應用 來說非常有限，需要擴展該功能增加創建新窗口的實用性，對于大部分應用來說，只需要獲取元素的位置以及高度與寬度，就可以根椐當前元素的位置來調整打開新 窗口的位置，動態調整打開新窗口效果，這對于打開新窗口來說更加實用。jQuery提供了一個獲取位置方法offset()和二個分別獲取高度與寬度方法 height()和width()，結合上期實例，我們增加如下幾行代碼，了解jQuery獲取元素位置以及高度與寬度方法，供參考。

實例代碼（略）

javascript部分

1. $(document).ready(function(){
2. $("#oButton").click(function(){
3. openwin.getWin();
4. });
5. });
6. var openwin = {};
7. openwin.getWin = function(){
8. var obj = $("#open");
9. //是否已經新開窗口
10. if(obj.html() != '' ){
11. openWindow = $("#newWindow");//存在窗口
12. openWindow.slideToggle("slow");//顯示效果
13. }else{
14. //模擬彈出窗口樣式
15. var openWindow = $(openwin.getHtml());//不存在窗口
16. //定義CSS樣式 模擬關鍵 自定義設置CSS樣式
17. var obj = $("#oButton");
18. var offset = obj. offset() ;
19. var right = offset.left+obj. width() ;
20. var down = offset.top+obj. height() ;
21. openWindow.css({
22. 'font-size':'12px',
23. 'position':'absolute',
24. 'margin':'20px',
25. 'left': right ,
26. 'top': down ,
27. 'width':'300px',
28. 'background-color':'#f0f5FF',
29. 'border': '1px solid #000',
30. 'z-index': '50',
31. 'padding':'10px'});
32. openWindow.appendTo($("#open"));
33. }
34. //綁定單擊事件 確定
35. openWindow.find("#show").click(function(){
36. openwin.showWindow();
37. }).end();
38. //綁定單擊事件 關閉
39. openWindow.find("#closed").click(function(){
40. openwin.closeWindow();
41. }).end();
42. }
43. //獲取窗口頁面元素 模擬窗口
44. openwin.getHtml = function(){
45. //自定義頁面元素，樣式，大小等
46. html? = '<div id="newWindow">';
47. html += '<p>jQuery彈出窗口</p>';
48. html += '<p>網站：<input type="text" name="" value="" /></p>';
49. html += '<p><button id="show">確定</button> <button id="closed">關閉</button></p>';
50. html += '</div>';
51. return html;
52. }
53. //確認事件
54. openwin.showWindow = function(){
55. $("#newWindow").hide();
56. }
57. //關閉事件
58. openwin.closeWindow = function(){
59. $("#newWindow").hide();
60. }

代碼詳解
1，獲取對象 (自定義調整打開新窗口參照元素)
var obj = $("#oButton");
實例中我獲取的對象是彈出窗口按鈕，這樣創建的新窗口就會根椐按鈕的位置進行調整，實例中將創建的新窗口顯示的按鈕的右下角。

2，獲取對象元素的位置 (offset()方法)
var offset = obj.offset();
獲取對象元素的位置，分別是元素的top和left，調用方法是：offset.left和offset.top，可知當前對象的左部和頂部位置。

3，獲取對象元素的寬度 (width()方法)
var right = offset.left+obj.width();
實例中是獲取對象的右下角位置，創建新窗口的左部位置。

4，獲取對象元素的高度 (height()方法)
var down = offset.top+obj.height();
實例中是獲取對象的右下角位置，創建新窗口的頂部位置。

5，定義CSS樣式，分別設置左部和頂部。
'left':right,
'top':down,
要注意CSS樣式中margin和padding的值，以及瀏覽器IE與firefox兼容等效果。

結合上面實例，jQuery獲取元素位置以及高度與寬度非常簡單，通過內置方法 offset ()， width ()和 height ()實現我們的動態調整打開新窗口功能，對于其它擴展應用來說也一樣，了解jQuery獲取元素位置以及高度與寬度方法，對于創建新元素，調整元素位置與大小，將非常實用。