jQuery獲取元素位置以及高度與寬度 動(dòng)態(tài)調(diào)整打開(kāi)新窗口效果

來(lái)源：http://www.biuuu.com/?p=285

上期在 jQuery模擬新窗口打開(kāi) 輕松使用javascript創(chuàng)建新窗口 一 文中通過(guò)jQuery模擬新窗口打開(kāi)創(chuàng)建新窗口，了解jQuery打開(kāi)新窗口機(jī)制原理，但通過(guò)細(xì)心我們發(fā)現(xiàn)，定義的窗口CSS樣式是固定的，對(duì)于實(shí)際應(yīng)用 來(lái)說(shuō)非常有限，需要擴(kuò)展該功能增加創(chuàng)建新窗口的實(shí)用性，對(duì)于大部分應(yīng)用來(lái)說(shuō)，只需要獲取元素的位置以及高度與寬度，就可以根椐當(dāng)前元素的位置來(lái)調(diào)整打開(kāi)新 窗口的位置，動(dòng)態(tài)調(diào)整打開(kāi)新窗口效果，這對(duì)于打開(kāi)新窗口來(lái)說(shuō)更加實(shí)用。jQuery提供了一個(gè)獲取位置方法offset()和二個(gè)分別獲取高度與寬度方法 height()和width()，結(jié)合上期實(shí)例，我們?cè)黾尤缦聨仔写a，了解jQuery獲取元素位置以及高度與寬度方法，供參考。

實(shí)例代碼（略）

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. //是否已經(jīng)新開(kāi)窗口
10. if(obj.html() != '' ){
11. openWindow = $("#newWindow");//存在窗口
12. openWindow.slideToggle("slow");//顯示效果
13. }else{
14. //模擬彈出窗口樣式
15. var openWindow = $(openwin.getHtml());//不存在窗口
16. //定義CSS樣式 模擬關(guān)鍵 自定義設(shè)置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. //綁定單擊事件 關(guān)閉
39. openWindow.find("#closed").click(function(){
40. openwin.closeWindow();
41. }).end();
42. }
43. //獲取窗口頁(yè)面元素 模擬窗口
44. openwin.getHtml = function(){
45. //自定義頁(yè)面元素，樣式，大小等
46. html? = '<div id="newWindow">';
47. html += '<p>jQuery彈出窗口</p>';
48. html += '<p>網(wǎng)站：<input type="text" name="" value="" /></p>';
49. html += '<p><button id="show">確定</button> <button id="closed">關(guān)閉</button></p>';
50. html += '</div>';
51. return html;
52. }
53. //確認(rèn)事件
54. openwin.showWindow = function(){
55. $("#newWindow").hide();
56. }
57. //關(guān)閉事件
58. openwin.closeWindow = function(){
59. $("#newWindow").hide();
60. }

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

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

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

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

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

結(jié)合上面實(shí)例，jQuery獲取元素位置以及高度與寬度非常簡(jiǎn)單，通過(guò)內(nèi)置方法 offset ()， width ()和 height ()實(shí)現(xiàn)我們的動(dòng)態(tài)調(diào)整打開(kāi)新窗口功能，對(duì)于其它擴(kuò)展應(yīng)用來(lái)說(shuō)也一樣，了解jQuery獲取元素位置以及高度與寬度方法，對(duì)于創(chuàng)建新元素，調(diào)整元素位置與大小，將非常實(shí)用。