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 ...
<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 = "../ wp-content / uploads / 2014/03 / earth.jpg" width = "458" height = "308" alt = "ziemia">
<Img src = "../ wp-content / uploads / 2014/03 / flight.jpg" width = "512" height = "307" alt = "lot">
<Img src = "../ 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>