jQuery UI example - Location (Position)
Relative window, documents, anchors, cursor / mouse and other elements of a positioning element.
For more information about .position() details of the methods, see the API documentation .position () .
The default function
Use form controls layout position, or drag elements are positioned to modify its offset. Drag to the surrounding parent element to see the collision detection.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Location (Position) - The default function </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#parent {
width: 60%;
height: 40px;
margin: 10px auto;
padding: 5px;
border: 1px solid # 777;
background-color: # fbca93;
text-align: center;
}
.positionable {
position: absolute;
display: block;
right: 0;
bottom: 0;
background-color: # bcd5e6;
text-align: center;
}
# Positionable1 {
width: 75px;
height: 75px;
}
# Positionable2 {
width: 120px;
height: 40px;
}
select, input {
margin-left: 15px;
}
</ Style>
<Script>
$ (Function () {
function position () {
$ ( ".positionable") .position ({
of: $ ( "#parent"),
my: $ ( "#my_horizontal") .val () + "" + $ ( "#my_vertical") .val (),
at: $ ( "#at_horizontal") .val () + "" + $ ( "#at_vertical") .val (),
collision: $ ( "#collision_horizontal") .val () + "" + $ ( "#collision_vertical") .val ()
});
}
$ ( ".positionable") .css ( "Opacity", 0.5);
$ ( "Select, input") .bind ( "click keyup change", position);
$ ( "#parent") .draggable ({
drag: position
});
position ();
});
</ Script>
</ Head>
<Body>
<Div id = "parent">
<P>
This is the location of the parent element.
</ P>
</ Div>
<Div class = "positionable" id = "positionable1">
<P>
to position
</ P>
</ Div>
<Div class = "positionable" id = "positionable2">
<P>
to position 2
</ P>
</ Div>
<Div style = "padding: 20px; margin-top: 75px;">
Location ...
<Div style = "padding-bottom: 20px;">
<B> my: </ b>
<Select id = "my_horizontal">
<Option value = "left"> left </ option>
<Option value = "center"> center </ option>
<Option value = "right"> right </ option>
</ Select>
<Select id = "my_vertical">
<Option value = "top"> top </ option>
<Option value = "center"> center </ option>
<Option value = "bottom"> bottom </ option>
</ Select>
</ Div>
<Div style = "padding-bottom: 20px;">
<B> at: </ b>
<Select id = "at_horizontal">
<Option value = "left"> left </ option>
<Option value = "center"> center </ option>
<Option value = "right"> right </ option>
</ Select>
<Select id = "at_vertical">
<Option value = "top"> top </ option>
<Option value = "center"> center </ option>
<Option value = "bottom"> bottom </ option>
</ Select>
</ Div>
<Div style = "padding-bottom: 20px;">
<B> collision: </ b>
<Select id = "collision_horizontal">
<Option value = "flip"> flip </ option>
<Option value = "fit"> fit </ option>
<Option value = "flipfit"> flipfit </ option>
<Option value = "none"> none </ option>
</ Select>
<Select id = "collision_vertical">
<Option value = "flip"> flip </ option>
<Option value = "fit"> fit </ option>
<Option value = "flipfit"> flipfit </ option>
<Option value = "none"> none </ option>
</ Select>
</ Div>
</ Div>
</ Body>
</ Html>
Image cycle
A photo browser prototype, respectively, using the Position as the picture on the left, center, right and then cycle. Use the link at the top to cycle through images, or images in the left or right click to cycle through images. Note that when the window is resized, re-position the image.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Location (Position) - Image circulation </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
body {
margin: 0;
}
#container {
overflow: hidden;
position: relative;
height: 400px;
}
img {
position: absolute;
}
</ Style>
<Script>
$ (Function () {
// Reconstruction means the removal of these plug-in methods $ .fn.left = function (using) {
return this.position ({
my: "right middle",
at: "left + 25 middle",
of: "#container",
collision: "none",
using: using
});
};
$ .fn.right = Function (using) {
return this.position ({
my: "left middle",
at: "right-25 middle",
of: "#container",
collision: "none",
using: using
});
};
$ .fn.center = Function (using) {
return this.position ({
my: "center middle",
at: "center middle",
of: "#container",
using: using
});
};
$ ( "Img: eq (0)") .left ();
$ ( "Img: eq (1)") .center ();
$ ( "Img: eq (2)") .right ();
function animate (to) {
$ (This) .stop (true, false) .animate (to);
}
function next (event) {
event.preventDefault ();
$ ( "Img: eq (2)") .center (animate);
$ ( "Img: eq (1)") .left (animate);
. $ ( "Img: eq (0)") .right () appendTo ( "#container");
}
function previous (event) {
event.preventDefault ();
$ ( "Img: eq (0)") .center (animate);
$ ( "Img: eq (1)") .right (animate);
. $ ( "Img: eq (2)") .left () prependTo ( "#container");
}
$ ( "#previous") .click (Previous);
$ ( "#next") .click (Next);
$ ( "Img") .click (function (event) {
$ ( "Img") .index (this) === 0 previous (event): next (event);?
});
$ (Window) .resize (function () {
$ ( "Img: eq (0)") .left (animate);
$ ( "Img: eq (1)") .center (animate);
$ ( "Img: eq (2)") .right (animate);
});
});
</ Script>
</ Head>
<Body>
<Div id = "container">
<Img src = "../ wp-content / uploads / 2014/03 / earth.jpg" width = "458" height = "308" alt = "earth">
<Img src = "../ wp-content / uploads / 2014/03 / flight.jpg" width = "512" height = "307" alt = "flight">
<Img src = "../ wp-content / uploads / 2014/03 / rocket.jpg" width = "300" height = "353" alt = "rocket">
On <a id="previous" href="#"> a </a>
By <a id="next" href="#"> a </a>
</ Div>
</ Body>
</ Html>