jQuery UI przykład - Położenie (Position)
Względna okna, dokumenty, kotwice, kursora / mysz i inne elementy elementu pozycjonującego.
Aby uzyskać więcej informacji na temat .position()
Szczegóły dotyczące metod można znaleźć w dokumentacji API .position () .
Domyślną funkcją
Zastosowanie form kontroluje pozycję układu lub przeciągnij elementy są umieszczone zmodyfikować jego przesunięcie. Przeciągnij do otaczającego elementu nadrzędnego, aby zobaczyć wykrywania kolizji.
<! DOCTYPE html> <Html lang = "pl"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI Położenie (Position) - Domyślna funkcja </ 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; Prawo: 0; bottom: 0; background-color: # bcd5e6; text-align: center; } # Positionable1 { szerokość: 75 pikseli; wysokość: 75 pikseli; } # Positionable2 { Szerokość: 120 pikseli; height: 40px; } select, input { margin-left: 15px; } </ Style> <Script> $ (Function () { Stanowisko function () { $ ( ".positionable") .position ({ z: $ ( "#parent"), moim: $ ( "#my_horizontal") .val () + "" + $ ( "#my_vertical") .val () pod adresem: $ ( "#at_horizontal") .val () + "" + $ ( "#at_vertical") .val () Kolizja: $ ( "#collision_horizontal") .val () + "" + $ ( "#collision_vertical") .val () }); } $ ( ".positionable") .css ( "Przezroczystość", 0,5); $ ( "Select input") .bind ( "click keyup zmiana", pozycja); $ ( "#parent") .draggable ({ drag: Pozycja }); Stanowisko (); }); </ Script> </ Head> <Body> <Div id = "rodzic"> <P> To położenie elementu nadrzędnego. </ P> </ Div> <Div class = "ustawiany" id = "positionable1"> <P> w pozycji </ P> </ Div> <Div class = "ustawiany" id = "positionable2"> <P> w pozycji 2 </ P> </ Div> <Div style = "padding: 20px; margin-top: 75 pikseli;"> Lokalizacja pl. <Div style = "padding-bottom: 20px;"> <B> moim: </ b> <Select id = "my_horizontal"> <Wartość Option = "left"> w lewo </ option> <Wartość Option = "center"> Centrum </ option> <Wartość Option = "right"> prawo </ option> </ Select> <Select id = "my_vertical"> <Wartość Option = "top"> top </ option> <Wartość Option = "center"> Centrum </ option> <Wartość Option = "bottom"> dolna </ option> </ Select> </ Div> <Div style = "padding-bottom: 20px;"> <B>: </ b> <Wybierz id = "at_horizontal"> <Wartość Option = "left"> w lewo </ option> <Wartość Option = "center"> Centrum </ option> <Wartość Option = "right"> prawo </ option> </ Select> <Select id = "at_vertical"> <Wartość Option = "top"> top </ option> <Wartość Option = "center"> Centrum </ option> <Wartość Option = "bottom"> dolna </ option> </ Select> </ Div> <Div style = "padding-bottom: 20px;"> <B> Kolizja: </ b> <Select id = "collision_horizontal"> <Wartość Option = "Flip"> Flip </ option> <Wartość Option = "fit"> pasuje </ option> <Wartość Option = "flipfit"> flipfit </ option> <Wartość Option = "none"> none </ option> </ Select> <Select id = "collision_vertical"> <Wartość Option = "Flip"> Flip </ option> <Wartość Option = "fit"> pasuje </ option> <Wartość Option = "flipfit"> flipfit </ option> <Wartość Option = "none"> none </ option> </ Select> </ Div> </ Div> </ Body> </ Html>
cykl Obraz
Prototyp przeglądarka zdjęć, odpowiednio, za pomocą pozycję jako obrazek po lewej, do środka prawo, a następnie cyklu. Użyj linku na górze, aby przechodzić zdjęć lub w lewym lub prawym przyciskiem myszy, aby przełączać pomiędzy obrazami. Zauważ, że gdy okno jest zmieniany, przesuń zdjęcie.
<! DOCTYPE html> <Html lang = "pl"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI Położenie (Position) - cyrkulacja obrazu </ 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 () { // Przebudowa oznacza usunięcie tych metod wtykowych $ .fn.left = function () {użyciu powrót this.position ({ my: "right middle" pod adresem: "lewa + 25 środka", stanowi: "#container" Kolizja: "none", za pomocą: using }); }; $ .fn.right = Function (za pomocą) { powrót this.position ({ moim: "lewy w srodku" pod adresem: "prawo-25 middle" stanowi: "#container" Kolizja: "none", za pomocą: using }); }; $ .fn.center = Function (za pomocą) { powrót this.position ({ my: "center middle" pod adresem: "środkowej środku" stanowi: "#container" za pomocą: using }); }; $ ( "Img: eq (0)") .left (); $ ( "Img: eq (1)") .center (); $ ( "Img: eq (2)") .right (); Funkcja ożywione (to) { $ (This) .Zatrzymaj (true, false) .animate (to); } funkcjonować następny (event) { event.preventDefault (); $ ( "Img: eq (2)") .center (ożywiony); $ ( "Img: eq (1)") .left (ożywiony); . $ ( "Img: eq (0)") .right () appendTo ( "#container"); } funkcjonować poprzedni (event) { event.preventDefault (); $ ( "Img: eq (0)") .center (ożywiony); $ ( "Img: eq (1)") .right (ożywiony); . $ ( "Img: eq (2)") .left () prependTo ( "#container"); } $ ( "#previous") .Kliknij (Poprzedni); $ ( "#next") .Kliknij (Next); $ ( "Img") .Kliknij (function (event) { $ ( "Img") .Index (this) === 0 poprzednia (event): next (event) ;? }); $ (Okno) .resize (function () { $ ( "Img: eq (0)") .left (ożywiony); $ ( "Img: eq (1)") .center (ożywiony); $ ( "Img: eq (2)") .right (ożywiony); }); }); </ Script> </ Head> <Body> <Div id = "container"> <Img src = "pl/ wp-content / uploads / 2014/03 / earth.jpg" width = "458" height = "308" alt = "ziemia"> <Img src = "pl/ wp-content / uploads / 2014/03 / flight.jpg" width = "512" height = "307" alt = "lot"> <Img src = "pl/ wp-content / uploads / 2014/03 / rocket.jpg" width = "300" height = "353" alt = "Rakieta"> Na <a id="previous" href="#"> </a> Przez <a id="next" href="#"> </a> </ Div> </ Body> </ Html>