概述
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
- 浏览 1951
- 评论(3)
- 论坛回复 / 浏览 (3 / 3056)
- 查看更多
相关推荐
这个插件已经整合到jq的UI中了，利用这个插件做折叠效果很方便。 首先引入以下文件： jq文件 chili-1.7.pack.js jquery.dimensions.js jquery.accordion.js
二次开发时，你可以根据需求调整这些设置，或者扩展插件功能，比如添加自定义的动画效果，或者与其他jQuery插件结合使用。 总的来说，`jQuery基于gridster.js可拖动网格布局插件.zip`提供了一个强大的工具，帮助...
最新官方jQuery UI插件 主流特效Demo，绝不含糊。 好东西不需要过多的言辞修饰，下了就知道！ 所有效果说明： 基本的鼠标互动： 拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing) 各种...
jQuery插件是封装功能的好方法，可以提高代码的复用性和可维护性。在这个项目中，我们可能会看到一个自定义的插件函数，例如`$.fn.searchDropdown`，它接受一些配置参数（如数据源、模板等），然后扩展了默认的`...
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...
### jQuery UI 插件使用详解 #### 一、概述 jQuery UI 是一款基于 jQuery 的用户界面库，提供了丰富的用户交互组件和效果。它不仅简化了前端开发中的许多复杂任务，如拖拽、排序等，还提供了多种视觉效果，极大地...
6. **插件兼容性**：jQuery Tooltip 可以与其他jQuery插件兼容，方便整合到复杂的项目中。 在`jquery.tooltip.zip`中，可能包含了jQuery Tooltip库的源代码、示例文件、文档和必要的CSS或图片资源。开发者可以通过...
$.sub：该方法是在jQuery 1.5中引入的，但是被证明不是很有用，将被移到jQuery 1.9兼容性插件中。 全局AJAX事件：一些事件（如ajaxStart）可以被附加到不在一个文档中的任何元素中，这将导致效率低下。在1.9中，...
首先，tablesorter是一个强大的jQuery插件，由Christian Bach开发，主要用于表格的排序功能。通过简单的几行代码，即可使静态表格具备点击表头进行升序或降序排序的能力。在"jquery.tablesorter.js"中，主要包含了对...
在本项目中，我们关注的是一个基于jQuery的插件——Gridster.js，它提供了一个可拖动的网格布局系统。Gridster.js允许用户通过鼠标自由地拖动和排列网格元素，从而创建出高度自定义的界面布局。 Gridster.js的核心...
$.sub：该方法是在jQuery 1.5中引入的，但是被证明不是很有用，将被移到jQuery 1.9兼容性插件中。 全局AJAX事件：一些事件（如ajaxStart）可以被附加到不在一个文档中的任何元素中，这将导致效率低下。在1.9中，Ajax...
6. **插件系统**: jQuery 社区开发了大量插件，如本例中的 `jquery.corner-min.js` 可能用于为元素添加圆角效果，`jquery.dimensions.js` 可能扩展了获取元素尺寸和位置的功能。这些插件丰富了 jQuery 的功能，满足...
8. **尺寸和位置（Dimensions and Position）** - `width()`, `height()`: 获取元素的宽度和高度。 - `innerWidth()`, `innerHeight()`: 包括内边距的宽度和高度。 - `outerWidth()`, `outerHeight()`: 包括边框...
"JQuery的拖动条小dome"是一个关于如何使用jQuery实现拖动条功能的示例项目，它包含了实现这一功能所需的所有相关插件。通过这个项目，开发者可以学习和理解如何在自己的网页应用中添加可拖动调整大小或位置的元素，...
- 将Dimensions插件的功能集成到核心库中，增强元素尺寸相关的功能。 #### 七、jQuery 1.3（2009年1月） - **简介**：引入了新的选择器引擎，进一步提升了性能。 - **关键特性**： - 使用Sizzle选择器引擎，大幅...
`jquery.dimensions.js`可能用于获取元素的尺寸，以便在显示建议时调整位置，使其适应输入框。例如： ```javascript function positionSuggestions() { var inputBox = $('#searchInput'); var ...
2. **偏移量**：可以通过`offset()`方法获取元素相对于文档的绝对位置。 3. **示例**：获取元素的高度。 ```javascript var height = $('#box').height(); ``` ### 总结 通过对jQuery源码的深入分析，我们...
(由于GFW缘故，其博客请通过代理访问)最后感谢 Cloudream ,他也一起参与翻译了工具、原Dimensions插件和AJAX部分。并且加入了英文说明切换功能。断断续续翻译这个API有段时间了，虽然大部分都基于1.1的API复制过来，...
`dimensions.js`是一个扩展插件，为jQuery添加了额外的功能，用于获取和设置元素的尺寸，包括宽度、高度、内边距、外边距等，这对于布局和动画设计非常有用。 6. **new_vjq.js** 这是视觉jQuery的核心脚本文件，...
8. **尺寸和位置（Dimensions & Position）**：`width()`, `height()`, `offset()`, `position()`等方法用于获取或设置元素的大小和位置。 9. **遍历和过滤（Traversal & Filtering）**：`.children()`, `.find()`,...