jQuery UI Beispiel - Lage (Position)
Relative Fenster, Dokumente, Anker, Cursor- / Maus und anderen Elementen eines Positionierungselements.
Für weitere Informationen über .position() Einzelheiten der Methoden finden Sie in der API - Dokumentation .position () .
Die Standardfunktion
Verwenden Form steuert Layout-Position, oder ziehen Sie Elemente positioniert, um seine Offset zu ändern. Ziehen Sie, um das umgebende übergeordnete Element zu sehen, die Kollisionserkennung.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Lage (Position) - Die Standardfunktion </ 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 {
Breite: 60%;
Höhe: 40px;
margin: 10px auto;
padding: 5px;
border: 1px solid # 777;
background-color: # fbca93;
text-align: center;
}
.positionable {
position: absolute;
display: block;
rechts: 0;
bottom: 0;
background-color: # bcd5e6;
text-align: center;
}
# Positionable1 {
Breite: 75px;
Höhe: 75px;
}
# Positionable2 {
Breite: 120px;
Höhe: 40px;
}
select, input {
margin-left: 15px;
}
</ Style>
<Script>
$ (Function () {
Funktion position () {
$ ( ".positionable") .position ({
von: $ ( "#parent"),
my: $ ( "#my_horizontal") .val () + "" + $ ( "#my_vertical") .val (),
an: $ ( "#at_horizontal") .val () + "" + $ ( "#at_vertical") .val (),
Kollision: $ ( "#collision_horizontal") .val () + "" + $ ( "#collision_vertical") .val ()
});
}
$ ( ".positionable") CSS- ( "Opazität", 0,5);
$ ( "Select-Eingang") .bind ( "Klick keyup ändern", Position);
$ ( "#parent") .draggable ({
Ziehen: Position
});
Position ();
});
</ Script>
</ Head>
<Body>
<Div id = "Eltern">
<P>
Dies ist der Speicherort des übergeordneten Elements.
</ P>
</ Div>
<Div class = "positionierbar" id = "positionable1">
<P>
an Position
</ P>
</ Div>
<Div class = "positionierbar" id = "positionable2">
<P>
auf Position 2
</ P>
</ Div>
<Div style = "padding: 20px; margin-top: 75px;">
Lage ...
<Div style = "padding-bottom: 20px;">
<B> meine: </ b>
<Wählen Sie id = "my_horizontal">
<Option value = "left"> links </ option>
<Option value = "center"> Mitte </ option>
<Option value = "right"> rechts </ option>
</ Select>
<Wählen Sie id = "my_vertical">
<Option value = "top"> oben </ option>
<Option value = "center"> Mitte </ option>
<Option value = "bottom"> unten </ option>
</ Select>
</ Div>
<Div style = "padding-bottom: 20px;">
<B> an: </ b>
<Select id = "at_horizontal">
<Option value = "left"> links </ option>
<Option value = "center"> Mitte </ option>
<Option value = "right"> rechts </ option>
</ Select>
<Wählen Sie id = "at_vertical">
<Option value = "top"> oben </ option>
<Option value = "center"> Mitte </ option>
<Option value = "bottom"> unten </ option>
</ Select>
</ Div>
<Div style = "padding-bottom: 20px;">
<B> Kollision: </ b>
<Wählen Sie id = "collision_horizontal">
<Option value = "Flip"> Flip </ option>
<Option value = "fit"> fit </ option>
<Option value = "flipfit"> flipfit </ option>
<Option value = "none"> keine </ option>
</ Select>
<Wählen Sie id = "collision_vertical">
<Option value = "Flip"> Flip </ option>
<Option value = "fit"> fit </ option>
<Option value = "flipfit"> flipfit </ option>
<Option value = "none"> keine </ option>
</ Select>
</ Div>
</ Div>
</ Body>
</ Html>
Bildzyklus
Ein Foto-Browser Prototyp jeweils mit der Position wie das Bild auf der linken Seite, in der Mitte, rechts und dann Zyklus. Verwenden Sie den Link oben, um durch die Bilder oder Bilder in der linken oder der rechten Maustaste, um durch die Bilder. Beachten Sie, dass, wenn die Fenstergröße verändert wird, um das Bild neu zu positionieren.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Lage (Position) - Bild Zirkulation </ 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;
Höhe: 400px;
}
img {
position: absolute;
}
</ Style>
<Script>
$ (Function () {
// Wiederaufbau bedeutet, die Entfernung dieser Plug-in Methoden .fn.left $ = function (mit) {
Rückkehr this.position ({
my: "right Mitte",
an: "links + 25 Mitte",
von: "#container",
Kollision: "none",
: using
});
};
$ .fn.right = Funktion (mit) {
Rückkehr this.position ({
meine: "linke Mitte",
an: "right-25 Mitte",
von: "#container",
Kollision: "none",
: using
});
};
$ .fn.center = Funktion (mit) {
Rückkehr this.position ({
my: "center Mitte",
an: "Mitte Mitte",
von: "#container",
: using
});
};
$ ( "Img: eq (0)") .Left ();
$ ( "Img: eq (1)") .center ();
$ ( "Img: eq (2)") .right ();
Funktion belebtes (to) {
$ (Diese) .stop (wahr, falsch) .animate (to);
}
Funktion nächste (event) {
Event.preventDefault ();
$ ( "Img: eq (2)") .center (Animation);
$ ( "Img: eq (1)") .Left (Animation);
. $ ( "Img: eq (0)") .right () appendTo ( "#container");
}
Funktion vorherige (event) {
Event.preventDefault ();
$ ( "Img: eq (0)") .center (Animation);
$ ( "Img: eq (1)") .right (Animation);
. $ ( "Img: eq (2)") .Left () prependTo ( "#container");
}
$ ( "# Früher") .click (Zurück);
$ ( "#next") .click (Next);
$ ( "Img") .click (function (event) {
$ ( "Img") .index (this) === 0 vorherige (event): next (event) ;?
});
$ (Fenster) .resize (function () {
$ ( "Img: eq (0)") .Left (Animation);
$ ( "Img: eq (1)") .center (Animation);
$ ( "Img: eq (2)") .right (Animation);
});
});
</ Script>
</ Head>
<Body>
<Div id = "container">
<Img src = "../ wp-content / uploads / 2014/03 / earth.jpg" width = "458" height = "308" alt = "Erde">
<Img src = "../ wp-content / uploads / 2014/03 / flight.jpg" width = "512" height = "307" alt = "Flug">
<Img src = "../ wp-content / uploads / 2014/03 / rocket.jpg" width = "300" height = "353" alt = "Rakete">
Auf <a id="previous" href="#"> ein </a>
Mit <a id="next" href="#"> ein </a>
</ Div>
</ Body>
</ Html>