jQuery UI esempio - Posizione (Position)
Relativa finestra, documenti, ancoraggi, cursore / mouse e altri elementi di un elemento di posizionamento.
Per ulteriori informazioni sulla .position() i dettagli dei metodi, consultare la documentazione API .position () .
La funzione di default
Utilizza il modulo controlla posizione di layout, o elementi di trascinamento sono posizionati a modificare la sua compensazione. Trascinare per l'elemento principale che circonda per vedere il rilevamento delle collisioni.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI Location (posizione) - La funzione di default </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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%;
Altezza: 40px;
margin: 10px auto;
padding: 5px;
border: 1px solid # 777;
background-color: # fbca93;
text-align: center;
}
.positionable {
position: absolute;
display: block;
a destra: 0;
in basso: 0;
background-color: # bcd5e6;
text-align: center;
}
# Positionable1 {
width: 75px;
Altezza: 75px;
}
# Positionable2 {
width: 120px;
Altezza: 40px;
}
select, input {
margin-left: 15px;
}
</ Style>
<Script>
$ (Function () {
Posizione function () {
$ ( ".positionable") .position ({
di: $ ( "#parent"),
il mio: $ ( "#my_horizontal") .VAL () + "" + $ ( "#my_vertical") .VAL (),
a: $ ( "#at_horizontal") .VAL () + "" + $ ( "#at_vertical") .VAL (),
collisione: $ ( "#collision_horizontal") .VAL () + "" + $ ( "#collision_vertical") .VAL ()
});
}
$ ( ".positionable") Css ( "Opacità", 0,5);
$ ( "Select, input") .bind ( "click KeyUp cambiamento", posizione);
$ ( "#parent") .draggable ({
trascinamento: la posizione
});
position ();
});
</ Script>
</ Head>
<Body>
<Div id = "padre">
<P>
Questa è la posizione dell'elemento genitore.
</ P>
</ Div>
<Div class = "posizionabile" id = "positionable1">
<P>
posizione
</ P>
</ Div>
<Div class = "posizionabile" id = "positionable2">
<P>
in posizione 2
</ P>
</ Div>
<Div style = "padding: 20px; margin-top: 75px;">
Location ...
<Div style = "padding-bottom: 20px;">
<B> il mio: </ b>
<Select id = "my_horizontal">
<Option value = "left"> sinistra </ option>
<Option value = "center"> Centro </ option>
<Option value = "right"> destro </ option>
</ Select>
<Select id = "my_vertical">
<Option value = "top"> top </ option>
<Option value = "center"> Centro </ option>
<Option value = "bottom"> fondo </ option>
</ Select>
</ Div>
<Div style = "padding-bottom: 20px;">
<B> a: </ b>
<Selezionare id = "at_horizontal">
<Option value = "left"> sinistra </ option>
<Option value = "center"> Centro </ option>
<Option value = "right"> destro </ option>
</ Select>
<Select id = "at_vertical">
<Option value = "top"> top </ option>
<Option value = "center"> Centro </ option>
<Option value = "bottom"> fondo </ option>
</ Select>
</ Div>
<Div style = "padding-bottom: 20px;">
<B> collisione: </ b>
<Select id = "collision_horizontal">
<Option value = "flip"> capovolgere </ option>
<Option value = "fit"> fit </ option>
<Option value = "flipfit"> flipfit </ option>
<Option value = "none"> none </ option>
</ Select>
<Select id = "collision_vertical">
<Option value = "flip"> capovolgere </ option>
<Option value = "fit"> fit </ option>
<Option value = "flipfit"> flipfit </ option>
<Option value = "none"> none </ option>
</ Select>
</ Div>
</ Div>
</ Corpo>
</ Html>
ciclo immagine
Un prototipo browser foto, rispettivamente, utilizzando la posizione come l'immagine a sinistra, al centro, a destra e poi il ciclo. Utilizzare il link in alto per scorrere le immagini, o le immagini nella sinistra o fare clic destro per scorrere le immagini. Si noti che quando la finestra viene ridimensionata, riposizionare l'immagine.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI Location (Posizione) - circolazione immagine </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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;
altezza: 400px;
}
img {
position: absolute;
}
</ Style>
<Script>
$ (Function () {
// La ricostruzione significa la rimozione di questi plug-in metodi di $ .fn.left = function () {utilizzando
tornare this.position ({
il mio: "middle destra",
a: "sinistra + 25 di mezzo",
di: "#container",
collisione: "none",
utilizzando: utilizzando
});
};
$ .fn.right = Function (usando) {
tornare this.position ({
il mio: "middle sinistra",
in: "diritto-25 di mezzo",
di: "#container",
collisione: "none",
utilizzando: utilizzando
});
};
$ .fn.center = Function (usando) {
tornare this.position ({
il mio: "middle Centro",
a: "middle Centro",
di: "#container",
utilizzando: utilizzando
});
};
$ ( "Img: eq (0)") .left ();
$ ( "Img: eq (1)") .center ();
$ ( "Img: eq (2)") .right ();
la funzione animate (a) {
$ (This) .Stop (vero, falso) .animate (a);
}
funzione successiva (evento) {
event.preventDefault ();
$ ( "Img: eq (2)") .center (animato);
$ ( "Img: eq (1)") .left (animato);
. $ ( "Img: eq (0)") .right () appendTo ( "#container");
}
funzione precedente (evento) {
event.preventDefault ();
$ ( "Img: eq (0)") .center (animato);
$ ( "Img: eq (1)") .right (animato);
. $ ( "Img: eq (2)") .left () prependTo ( "#container");
}
$ ( "#previous") .Click (Precedente);
$ ( "#next") .Click (Avanti);
$ ( "Img") .Click (function (evento) {
$ ( "Img") .index (questo) === 0 precedente (evento): prossimo (evento) ;?
});
$ (Finestra) .resize (function () {
$ ( "Img: eq (0)") .left (animato);
$ ( "Img: eq (1)") .center (animato);
$ ( "Img: eq (2)") .right (animato);
});
});
</ Script>
</ Head>
<Body>
<Div id = "container">
<Img src = "../ wp-content / uploads / 2014/03 / earth.jpg" width = "458" height = "308" alt = "terra">
<Img src = "../ wp-content / uploads / 2014/03 / flight.jpg" width = "512" height = "307" alt = "volo">
<Img src = "../ wp-content / uploads / 2014/03 / rocket.jpg" width = "300" height = "353" alt = "razzo">
Su <a id="previous" href="#"> un </a>
Con <a id="next" href="#"> un </a>
</ Div>
</ Corpo>
</ Html>