jQuery UI ejemplo - Situación (Posición)
Relativa ventana, documentos, anclas, cursor / ratón y otros elementos de un elemento de posicionamiento.
Para obtener más información acerca de .position() detalles de los métodos, consulte la documentación de la API .position () .
La función predeterminada
Usar formulario controla la posición en plancha, o los elementos de arrastre están en condiciones de modificar su desplazamiento. Arrastre para el elemento de matriz circundante para ver la detección de colisiones.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI Ubicación (Posición) - La función por defecto </ 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 {
anchura: 60%;
altura: 40px;
margen: 10px auto;
padding: 5px;
frontera: 1px solid # 777;
background-color: # fbca93;
text-align: center;
}
.positionable {
position: absolute;
display: block;
derecha: 0;
parte inferior: 0;
background-color: # bcd5e6;
text-align: center;
}
# Positionable1 {
Ancho: 75px;
altura: 75px;
}
# Positionable2 {
Anchura: 120px;
altura: 40px;
}
seleccionar, de entrada {
margin-left: 15px;
}
</ Style>
<Script>
$ (Function () {
posición de la función () {
$ ( ".positionable") .position ({
de: $ ( "#parent"),
mi: $ ( "#my_horizontal") .val () + "" + $ ( "#my_vertical") .val (),
en: $ ( "#at_horizontal") .val () + "" + $ ( "#at_vertical") .val (),
colisión: $ ( "#collision_horizontal") .val () + "" + $ ( "#collision_vertical") .val ()
});
}
$ ( ".positionable") .css ( "Opacidad", 0,5);
$ ( "Select, de entrada") .bind ( "clic keyup cambio", posición);
$ ( "#parent") .draggable ({
arrastre: Posición
});
posición ();
});
</ Script>
</ Head>
<Cuerpo>
<Div id = "padre">
<P>
Esta es la ubicación del elemento padre.
</ P>
</ Div>
<Div class = "posicionarse" id = "positionable1">
<P>
a la posición
</ P>
</ Div>
<Div class = "posicionarse" id = "positionable2">
<P>
a la posición 2
</ P>
</ Div>
<Div style = "padding: 20px; margin-top: 75px;">
Localización ...
<Div style = "padding-bottom: 20px;">
<B> Mi: </ b>
<Select id = "my_horizontal">
<Option value = "left"> izquierdo </ option>
<Option value = "center"> centro </ option>
<Option value = "right"> derecho </ option>
</ Select>
<Select id = "my_vertical">
<Option value = "top"> top </ option>
<Option value = "center"> centro </ option>
<Option value = "fondo"> fondo </ option>
</ Select>
</ Div>
<Div style = "padding-bottom: 20px;">
<B> en </ b>
<Select id = "at_horizontal">
<Option value = "left"> izquierdo </ option>
<Option value = "center"> centro </ option>
<Option value = "right"> derecho </ option>
</ Select>
<Select id = "at_vertical">
<Option value = "top"> top </ option>
<Option value = "center"> centro </ option>
<Option value = "fondo"> fondo </ option>
</ Select>
</ Div>
<Div style = "padding-bottom: 20px;">
<B> colisión: </ b>
<Select id = "collision_horizontal">
<Option value = "flip"> flip </ option>
<Option value = "encajar"> ajuste </ option>
<Option value = "flipfit"> flipfit </ option>
<Option value = "none"> no </ option>
</ Select>
<Select id = "collision_vertical">
<Option value = "flip"> flip </ option>
<Option value = "encajar"> ajuste </ option>
<Option value = "flipfit"> flipfit </ option>
<Option value = "none"> no </ option>
</ Select>
</ Div>
</ Div>
</ Body>
</ Html>
ciclo de la imagen
Un prototipo de navegador de fotos, respectivamente, utilizando la posición como la imagen de la izquierda, centro, derecha y luego ciclo. Utilice el enlace en la parte superior para desplazarse por las imágenes, o de imágenes en el clic izquierdo o derecho para desplazarse por las imágenes. Tenga en cuenta que cuando se cambia el tamaño de la ventana, vuelva a colocar la imagen.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI Ubicación (Posición) - circulación imagen </ 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;
altura: 400px;
}
img {
position: absolute;
}
</ Style>
<Script>
$ (Function () {
// Reconstrucción significa la eliminación de estos plug-in métodos .fn.left $ = function () {utilizando
volver this.position ({
mi: "medio derecho",
en: "izquierda + 25 medio",
de: "#container",
colisión: "ninguno",
usando: usando
});
};
$ .fn.right = Función (usando) {
volver this.position ({
mi: "media izquierda",
en: "derecho-25 medio",
de: "#container",
colisión: "ninguno",
usando: usando
});
};
$ .fn.center = Función (usando) {
volver this.position ({
mi: "media center",
en: "media center",
de: "#container",
usando: usando
});
};
$ ( "IMG: eq (0)") .left ();
$ ( "IMG: eq (1)") .center ();
$ ( "IMG: eq (2)") .RIGHT ();
función animado (a) {
$ (Este) .Stop (verdadero, falso) .animate (a);
}
funcionar el próximo (evento) {
event.preventDefault ();
$ ( "IMG: eq (2)") .center (animado);
$ ( "IMG: eq (1)") .left (animado);
. $ ( "IMG: eq (0)") .RIGHT () appendTo ( "#container");
}
función anterior (evento) {
event.preventDefault ();
$ ( "IMG: eq (0)") .center (animado);
$ ( "IMG: eq (1)") .RIGHT (animado);
. $ ( "IMG: eq (2)") .left () Prefijopara ( "#container");
}
$ ( "#previous") .click (Anterior);
$ ( "#next") .click (Siguiente);
$ ( "Img") .click (function (event) {
$ ( "Img") .index (este) === 0 anterior (evento): al lado (evento) ;?
});
$ (Ventana) .resize (function () {
$ ( "IMG: eq (0)") .left (animado);
$ ( "IMG: eq (1)") .center (animado);
$ ( "IMG: eq (2)") .RIGHT (animado);
});
});
</ Script>
</ Head>
<Cuerpo>
<Div id = "contenedor">
<Img src = "../ wp-content / uploads / 2014/03 / earth.jpg" width = "458" height = "308" alt = "tierra">
<Img src = "../ wp-content / uploads / 2014/03 / flight.jpg" width = "512" height = "307" alt = "vuelo">
<Img src = "../ wp-content / uploads / 2014/03 / rocket.jpg" width = "300" height = "353" alt = "cohetes">
En <a id="previous" href="#"> un </a>
Por <a id="next" href="#"> un </a>
</ Div>
</ Body>
</ Html>