HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
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 () .
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 = "https://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 /en. <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>
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 = "https://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 = "/en/ wp-content / uploads / 2014/03 / earth.jpg" width = "458" height = "308" alt = "earth"> <Img src = "/en/ wp-content / uploads / 2014/03 / flight.jpg" width = "512" height = "307" alt = "flight"> <Img src = "/en/ 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>