jQuery獲取元素位置以及高度與寬度 動態調整打開新窗口效果
來源:http://www.biuuu.com/?p=285
上期在
jQuery模擬新窗口打開 輕松使用javascript創建新窗口
一 文中通過jQuery模擬新窗口打開創建新窗口,了解jQuery打開新窗口機制原理,但通過細心我們發現,定義的窗口CSS樣式是固定的,對于實際應用 來說非常有限,需要擴展該功能增加創建新窗口的實用性,對于大部分應用來說,只需要獲取元素的位置以及高度與寬度,就可以根椐當前元素的位置來調整打開新 窗口的位置,動態調整打開新窗口效果,這對于打開新窗口來說更加實用。jQuery提供了一個獲取位置方法offset()和二個分別獲取高度與寬度方法 height()和width(),結合上期實例,我們增加如下幾行代碼,了解jQuery獲取元素位置以及高度與寬度方法,供參考。
實例代碼(略)
javascript部分
- $(document).ready(function(){
- $("#oButton").click(function(){
- openwin.getWin();
- });
- });
- var openwin = {};
- openwin.getWin = function(){
- var obj = $("#open");
- //是否已經新開窗口
- if(obj.html() != '' ){
- openWindow = $("#newWindow");//存在窗口
- openWindow.slideToggle("slow");//顯示效果
- }else{
- //模擬彈出窗口樣式
- var openWindow = $(openwin.getHtml());//不存在窗口
- //定義CSS樣式 模擬關鍵 自定義設置CSS樣式
- var obj = $("#oButton");
- var offset = obj. offset() ;
- var right = offset.left+obj. width() ;
- var down = offset.top+obj. height() ;
- openWindow.css({
- 'font-size':'12px',
- 'position':'absolute',
- 'margin':'20px',
- 'left': right ,
- 'top': down ,
- 'width':'300px',
- 'background-color':'#f0f5FF',
- 'border': '1px solid #000',
- 'z-index': '50',
- 'padding':'10px'});
- openWindow.appendTo($("#open"));
- }
- //綁定單擊事件 確定
- openWindow.find("#show").click(function(){
- openwin.showWindow();
- }).end();
- //綁定單擊事件 關閉
- openWindow.find("#closed").click(function(){
- openwin.closeWindow();
- }).end();
- }
- //獲取窗口頁面元素 模擬窗口
- openwin.getHtml = function(){
- //自定義頁面元素,樣式,大小等
- html? = '<div id="newWindow">';
- html += '<p>jQuery彈出窗口</p>';
- html += '<p>網站:<input type="text" name="" value="" /></p>';
- html += '<p><button id="show">確定</button> <button id="closed">關閉</button></p>';
- html += '</div>';
- return html;
- }
- //確認事件
- openwin.showWindow = function(){
- $("#newWindow").hide();
- }
- //關閉事件
- openwin.closeWindow = function(){
- $("#newWindow").hide();
- }
代碼詳解
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獲取元素位置以及高度與寬度方法,對于創建新元素,調整元素位置與大小,將非常實用。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
