jQuery UI API - .position ()
category
Method overloading (Method, Overrides) | method (in Methods) | utility (Utilities)
usage
Description: a positioning element relative to another element.
Returns: the jQuery
New version: 1.8
参数 | 类型 | 描述 |
---|---|---|
options | Object |
|
the UI the jQuery .position()
method allows you to form a relative (window), a document, or another element pointer (cursor) / mouse (mouse) to locate an element, regardless of the offset relative to the parent element (offset).
Note: jQuery UI does not support location hidden element.
This is an independent jQuery plugin, and no dependencies to other jQuery UI components.
The plug-in extensions from jQuery built .position () method. If jQuery UI is not loaded, call .position()
method does not simply fail, because the method exists in jQuery. But it is not expected behavior.
Examples
A simple jQuery UI localization (Position) instance.
<! Doctype html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> .position () Examples </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Style> .positionDiv { position: absolute; width: 75px; height: 75px; background: green; } </ Style> <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script> <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> </ Head> <Body> <Div id = "targetElement"> <Div class = "positionDiv" id = "position1"> </ div> <Div class = "positionDiv" id = "position2"> </ div> <Div class = "positionDiv" id = "position3"> </ div> <Div class = "positionDiv" id = "position4"> </ div> </ Div> <Script> $ ( "# Position1") .position ({ my: "center", at: "center", of: "#targetElement" }); $ ( "# Position2") .position ({ my: "left top", at: "left top", of: "#targetElement" }); $ ( "# Position3") .position ({ my: "right center", at: "right bottom", of: "#targetElement" }); $ (Document) .mousemove (function (event) { $ ( "# Position4") .position ({ my: "left + 3 bottom-3", of: event, collision: "fit" }); }); </ Script> </ Body> </ Html>