来源: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获取浏览器窗口的宽度和高度,各个方法的使用效果对比
主要介绍了jquery实现动态改变div宽度和高度,效果非常不错,而且兼容性也很好,有需要的小伙伴可以参考下。
如题,一个jquery的插件,用于监听元素宽度高度变化。
jquery 获取当前浏览器滚动条宽度数值
JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度
JS,Jquery获取各种屏幕的宽度和高度。
【Jquery经典特效18】jQuery自适应宽度跟高度相册代码
NULL 博文链接:https://onestopweb.iteye.com/blog/2258477
jquery父子窗口互相获取元素demo的代码,希望对大家有用
jQuery获取当前点击的对象元素(实现代码) [removed][removed] </head> <body> 段落1 段落2 段落3 段落4 段落5 [removed] //获取当前点击的对象 $('p').click( function(){ //this表示当前被...
获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下:document.body.offsetWidth document.body.offsetHeight在声明了...
jQuery鼠标拖动调整表格列宽度,非常实用
jQuery表格可拖动调整列宽度大小
Jquery实现模态窗口效果;
jQuery自适应父容器宽度高度特效代码是一款通过计算文本的font-size来使文字适应它的父容器的宽度和高度。
主要介绍了jQuery实现获取元素索引值index的方法,涉及jQuery针对页面元素的遍历,index索引操作及属性操作相关技巧,需要的朋友可以参考下
jQuery实现图片动态加载效果 鼠标滚动时图片动态加载
下面把jQuery获取页面及个元素高度、宽度的方法汇总,分享给大家。 获取浏览器显示区域(可视区域)的高度 : 代码如下: $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : 代码如下: $(window)....
主要介绍了jquery如何获取元素的滚动条高度等实现代码,需要的朋友可以参考下
*获得TEXT.AREATEXT的值*/