jQuery UI exemple - Localisation (Position)
Par rapport fenêtre, des documents, des ancres, le curseur / souris et d'autres éléments d'un élément de positionnement.
Pour plus d' informations sur .position() des détails sur les méthodes, consultez la documentation de l' API .Position () .
La fonction par défaut
Utilisez le formulaire contrôle la position de mise en page, ou les éléments de glissement sont positionnés pour modifier son décalage. Faites glisser vers l'élément parent environnant pour voir la détection de collision.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI Lieu (Position) - La fonction par défaut </ 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 {
largeur: 60%;
hauteur: 40px;
margin: 10px auto;
padding: 5px;
border: 1px solid # 777;
background-color: # fbca93;
text-align: center;
}
.positionable {
position: absolute;
display: block;
droite: 0;
bottom: 0;
background-color: # bcd5e6;
text-align: center;
}
# Positionable1 {
largeur: 75px;
hauteur: 75px;
}
# Positionable2 {
largeur: 120px;
hauteur: 40px;
}
select, entrée {
margin-left: 15px;
}
</ Style>
<Script>
$ (Function () {
position function () {
$ ( ".positionable") .Position ({
de: $ ( "#parent"),
ma: $ ( "#my_horizontal") .val () + "" + $ ( "#my_vertical") .val (),
à: $ ( "#at_horizontal") .val () + "" + $ ( "#at_vertical") .val (),
collision: $ ( "#collision_horizontal") .val () + "" + $ ( "#collision_vertical") .val ()
});
}
$ ( ".positionable") Css ( "Opacité", 0,5);
$ ( "Select, entrée") .bind ( "cliquez sur keyup changement", position);
$ ( "#parent") .draggable ({
glisser: Position
});
la position ();
});
</ Script>
</ Head>
<Body>
<Div id = "parent">
<P>
Ceci est l'emplacement de l'élément parent.
</ P>
</ Div>
<Class Div = "positionnable" id = "de positionable1">
<P>
à la position
</ P>
</ Div>
<Class Div = "positionnable" id = "de positionable2">
<P>
à la position 2
</ P>
</ Div>
<Style Div = "padding: 20px; margin-top: 75px;">
Localisation ...
<Div style = "padding-bottom: 20px;">
<B> my: </ b>
<Sélectionnez id = "my_horizontal">
<Option value = "left"> gauche </ option>
<Option value = "center"> Centre </ option>
<Option value = "droit"> droit </ option>
</ Select>
<Sélectionnez id = "my_vertical">
<Option value = "top"> top </ option>
<Option value = "center"> Centre </ option>
<Option value = "bottom"> bas </ option>
</ Select>
</ Div>
<Div style = "padding-bottom: 20px;">
<B> à </ b>
<Sélectionnez id = "at_horizontal">
<Option value = "left"> gauche </ option>
<Option value = "center"> Centre </ option>
<Option value = "droit"> droit </ option>
</ Select>
<Sélectionnez id = "at_vertical">
<Option value = "top"> top </ option>
<Option value = "center"> Centre </ option>
<Option value = "bottom"> bas </ option>
</ Select>
</ Div>
<Div style = "padding-bottom: 20px;">
<B> collision: </ b>
<Sélectionnez id = "collision_horizontal">
<Option value = "flip"> bascule </ option>
<Option value = "ajustement"> ajustement </ option>
<Option value = "de flipfit"> flipfit </ option>
<Option value = "none"> aucune </ option>
</ Select>
<Sélectionnez id = "collision_vertical">
<Option value = "flip"> bascule </ option>
<Option value = "ajustement"> ajustement </ option>
<Option value = "de flipfit"> flipfit </ option>
<Option value = "none"> aucune </ option>
</ Select>
</ Div>
</ Div>
</ Body>
</ Html>
cycle de l'image
Un prototype de navigateur photo, respectivement, en utilisant la position de l'image sur la gauche, au centre, à droite, puis cycle. Utilisez le lien ci-dessus pour faire défiler les images, ou les images dans le clic gauche ou à droite pour faire défiler les images. Notez que lorsque la fenêtre est redimensionnée, re-positionner l'image.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI Lieu (Position) - circulation d'images </ 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;
hauteur: 400px;
}
img {
position: absolute;
}
</ Style>
<Script>
$ (Function () {
// Reconstruction signifie la suppression de ces plug-in méthodes .fn.left $ = function () {utilisant
retour this.position ({
ma: «milieu droit»,
à: "gauche + 25 milieu»,
de: "#container",
collision: "none",
: using
});
};
$ .fn.right = Fonction (à l'aide) {
retour this.position ({
ma: «milieu gauche»,
à: «droit-25 du milieu»,
de: "#container",
collision: "none",
: using
});
};
$ .fn.center = Fonction (à l'aide) {
retour this.position ({
ma: "middle centre",
à: "middle centre",
de: "#container",
: using
});
};
$ ( "Img: eq (0)") .left ();
$ ( "Img: eq (1)") .center ();
$ ( "Img: eq (2)") .right ();
fonction animé (à) {
$ (Ce) .stop (true, false) .animate (à);
}
fonction suivante (event) {
event.preventDefault ();
$ ( "Img: eq (2)") .center (animation);
$ ( "Img: eq (1)") .left (animation);
. $ ( "Img: eq (0)") .right () appendTo ( "#container");
}
fonction précédente (event) {
event.preventDefault ();
$ ( "Img: eq (0)") .center (animation);
$ ( "Img: eq (1)") .right (animation);
. $ ( "Img: eq (2)") .left () Préfixepour ( "#container");
}
$ .cliquez ( "#previous") (Précédente);
$ ( "#next") .cliquez (Suivant);
$ ( "Img") .cliquez (function (event) {
$ ( "Img") .index (this) === 0 précédente (event): prochaine (event) ;?
});
$ (Fenêtre) .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 = "terre">
<Img src = "../ wp-content / uploads / 2014/03 / flight.jpg" width = "512" height = "307" alt = "vol">
<Img src = "../ wp-content / uploads / 2014/03 / rocket.jpg" width = "300" height = "353" alt = "fusée">
Sur <a id="previous" href="#"> </a>
Par <a id="next" href="#"> </a>
</ Div>
</ Body>
</ Html>