jQuery获取元素位置以及高度与宽度 动态调整打开新窗口效果
2009-07-23 10:25
711 查看
jQuery获取元素位置以及高度与宽度 动态调整打开新窗口效果
本博客所有文章均属原创作品,如有转载,请注明作者:biuuu,来源: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获取元素位置以及高度与宽度方法,对于创建新元素,调整元素位置与大小,将非常实用。
往期相关:jQuery模拟新窗口打开 轻松使用javascript创建新窗口
相关文章推荐
- jQuery获取元素位置以及高度与宽度
- js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
- js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
- JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸
- JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸
- JavaScript获取页面宽度高度大全 以及元素的位置
- js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
- JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸
- android开发步步为营之101:动态调整view的宽度和高度以及在页面的坐标位置
- [转载]js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
- 原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名
- JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸
- js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度
- js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
- js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度
- 获取视图的宽度和高度,以及设置对象的随机位置
- [jQuery]无法准确获取隐藏元素(display:none)宽度(width)和高度(height)的新解决方案
- jQuery 获取浏览器窗口可视区域的高度和宽度及滚动条高度
- js和jQuery获取浏览器窗口的高度、宽度的方法详解
- html/jQuery获取窗口宽度/高度