概述
dimensions插件是一个获得元素尺寸的插件.
有以下函数
height
扩展了核心的 height
方法 enable it for the window and document objects as well as
elements. When used on an element a value can be passed in to set the
height. 对可见与不可见的元素都有效
Returns:像素值
Arguments:
value
A positive number representing the desired height. If just a number, 'px' will be added for you.
Chainable:
Yes, when a value is passed in.
Example:
$
(window
).height();
$
(document
).height();
$
("#myElement"
).height();
$
("#myElement"
).height(100
);
innerHeight
Gets
the inner height (excludes the border and includes the padding) for the
first matched element. This method works for both visible and hidden
elements.
Returns:
A number in pixels
Chainable:
No
Example:
$
("#myElement"
).innerHeight();
innerWidth
Gets
the inner width (excludes the border and includes the padding) for the
first matched element. This method works for both visible and hidden
elements.
Returns:
A number in pixels
Chainable:
No
Example:
$
("#myElement"
).innerHeight();
offset
Gets
the position of an element relative to the viewport. For accurate
calculations make sure to use pixel values for margins, borders and
padding. This method only works with visible elements.
Returns:
An object with top and left properties that are numbers that represent
the offset in pixels. If the scroll option is true, two more properties
are added: scrollTop and scrollLeft.
Arguments:
options
Settings to configure the way the offset is calculated.
margin
(Boolean)
Should the margin of the element be included in the calculations? True by default.
border
(Boolean)
Should the border of the element be included in the calculations? False by default.
padding
(Boolean)
Should the padding of the element be included in the calculations? False by default.
scroll
(Boolean)
Should the scroll offsets of the parent elements be included in the calculations? True by default.
lite
(Boolean)
When
true it will bypass the browser normalizations like when dealing with
borders and margins on parent elements. This provides a nice boost in
performance but at the price of accuracy. False by default.
relativeTo
(HTML Element)
This
should be a parent of the element and should have position (like
absolute or relative). It will retrieve the offset relative to this
parent element. By default it is the body element.
returnObject
An
object to store the return value in, so as not to break the chain. If
passed in the chain will not be broken and the result will be assigned
to this object.
Chainable:
Yes, when an object is passed as the second argument.
Example:
$
("#myElement"
).offset();
Results:
{ top: 100
, left: 100
, scrollTop: 10
, scrollLeft: 10
}
Example:
$
("#myElement"
).offset({ scroll: false
});
Results:
{ top: 100
, left: 100
}
Example:
var
offset
= {};
$
("#myElement"
).offset({ scroll: false
}, offset);
Results:
offset == { top: 100
, left: 100
}
offsetParent
Returns
a jQuery collection with the positioned parent of the first matched
element. This is the first parent of the element that has position (as
in relative or absolute). This method only works with visible elements.
Returns:
jQuery collection
Chainable:
Yes
Example:
$
("#myElement"
).offsetParent();
outerHeight
Gets
the offsetHeight (includes the border and padding by default) for the
first matched element. This method works for both visible and hidden
elements. The margin can be included by passing an options map with
margin set to true. Optional margin option added in 1.1
Returns:
A number in pixels
Arguments:
options
Settings to configure the way the outer height is calculated.
margin
(Boolean)
Should the margin of the element be included in the calculations? False by default.
Chainable:
No
Example:
$
("#myElement"
).outerHeight();
Example:
$
("#myElement"
).outerHeight({ margin: true
});
outerWidth
Gets
the offsetWidth (includes the border and padding by default) for the
first matched element. This method works for both visible and hidden
elements. The margin can be included by passing an options map with
margin set to true. Optional margin option added in 1.1
Returns:
A number in pixels
Arguments:
options
Settings to configure the way the outer height is calculated.
margin
(Boolean)
Should the margin of the element be included in the calculations? False by default.
Chainable:
No
Example:
$
("#myElement"
).outerWidth();
Example:
$
("#myElement"
).outerWidth({ margin: true
});
position
Gets
the top and left position of an element relative to its offset parent.
For accurate calculations make sure to use pixel values for margins,
borders and padding. This method only works with visible elements.
Returns:
An object with top and left properties that are numbers representing the offset in pixels.
Chainable:
Yes, when an object is passed as the second argument.
Example:
$
("#myElement"
).position();
Results:
{ top: 10
, left: 10
}
Example:
var
position
= {};
$
("#myElement"
).position(position);
Results:
position == { top: 10
, left: 10
}
scrollLeft
Acts
as both a getter and a setter. When no value is passed in, it gets the
scroll left offset of the first matched element. When a value is passed
in, the scroll left offset is set to that value on all matched
elements. This method works for both visible and hidden elements.
Returns:
A number in pixels
Arguments:
value
A positive number representing the desired scroll left offset.
Chainable:
Yes, when a value is passed in.
Example:
$
("#myElement"
).scrollLeft(100
);
Example:
$
("#myElement"
).scrollLeft();
Results:
100
scrollTop
Acts
as both a getter and a setter. When no value is passed in, it gets the
scroll top offset of the first matched element. When a value is passed
in, the scroll left offset is set to that value on all matched
elements. This method works for both visible and hidden elements.
Returns:
A number in pixels
Arguments:
value
A positive number representing the desired scroll top offset.
Chainable:
Yes, when a value is passed in.
Example:
$
("#myElement"
).scrollTop(100
);
Example:
$
("#myElement"
).scrollTop();
Results:
100
width
This is an extension of the core width
method to enable it for the window and document objects as well as
elements. When used on an element a value can be passed in to set the
width. This method works for both visible and hidden elements.
Returns:
A number in pixels
Arguments:
value
A positive number representing the desired width. If just a number, 'px' will be added for you.
Chainable:
Yes, when a value is passed in.
Example:
$
(window
).width();
$
(document
).width();
$
("#myElement"
).width();
$
("#myElement"
).width(100
);
分享到：
- 2008-12-02 16:07
- 浏览 1924
- 评论(3)
- 论坛回复 / 浏览 (3 / 3032)
- 查看更多
相关推荐
这个插件已经整合到jq的UI中了，利用这个插件做折叠效果很方便。 首先引入以下文件： jq文件 chili-1.7.pack.js jquery.dimensions.js jquery.accordion.js
plugin历史版本1、新的事件.on() .off()3、动画的改进1.42版介绍JQuery插件让Dreamweaver支持提示代码功能引入JQuery展开编辑本段简介 jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript...
最新官方jQuery UI插件 主流特效Demo，绝不含糊。 好东西不需要过多的言辞修饰，下了就知道！ 所有效果说明： 基本的鼠标互动： 拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing) 各种...
But if you can't live without declaring your images size, slideViewer will use your declared dimensions. Pretty flexible. How many galleries per page? As much as you like. slideViewer will instantly...
$.sub：该方法是在jQuery 1.5中引入的，但是被证明不是很有用，将被移到jQuery 1.9兼容性插件中。 全局AJAX事件：一些事件（如ajaxStart）可以被附加到不在一个文档中的任何元素中，这将导致效率低下。在1.9中，...
$.sub：该方法是在jQuery 1.5中引入的，但是被证明不是很有用，将被移到jQuery 1.9兼容性插件中。 全局AJAX事件：一些事件（如ajaxStart）可以被附加到不在一个文档中的任何元素中，这将导致效率低下。在1.9中，Ajax...
(由于GFW缘故，其博客请通过代理访问)最后感谢 Cloudream ,他也一起参与翻译了工具、原Dimensions插件和AJAX部分。并且加入了英文说明切换功能。断断续续翻译这个API有段时间了，虽然大部分都基于1.1的API复制过来，...
这些代码也是jQuery语法的最初雏形。当时John的想法很简单：他发现这种语法相对现有的...因此，如果以前的jQuery版本升级到1.2.6，那么完全可以从代码中排除Dimensions插件（一个获得元素尺寸、定位的插件）。
这些代码也是jQuery语法的最初雏形。当时John的想法很简单：他发现这种语法相对现有的...因此，如果以前的jQuery版本升级到1.2.6，那么完全可以从代码中排除Dimensions插件（一个获得元素尺寸、定位的插件）。
代码片段： .zzsc-content{ .../* sample CSS to set the initial dimensions of images that will be zoomable */ .sampleimage{ width: 300px; height: auto; margin-right: 20px; }
10.2.1 Dimensions 10.2.2 Form 10.2.3 Interface 10.3 查找插件文档 10.4 开发新插件 10.4.1 添加新的全局函数 10.4.2 添加jQuery对象方法 10.4.3 DOM遍历方法 10.4.4 ...
***更新了v0.0.7 ***随着0.0.7的发布，我添加了一些新功能，您现在可以设置尺寸应保持可见的时间，尺寸在屏幕上应出现的位置，背景颜色，文本颜色和大小，现在您可以选择启用/禁用内部/外部尺寸。 ***更新了v0.0.6 *...