JqueryUI - Posición
En este capítulo veremos uno de los métodos de utilidad de jqueryUi, el método position () . El método position () le permite posicionar un elemento con respecto a otro elemento o evento del mouse.
jQuery UI extiende el método .position () del núcleo de jQuery de una manera que le permite describir cómo desea colocar un elemento de la misma manera que lo describiría naturalmente a otra persona. En lugar de trabajar con números y matemáticas, trabaja con palabras significativas (como izquierda y derecha) y relaciones.
Sintaxis
La siguiente es la sintaxis del método position () :
.position( options )Donde opciones es de tipo Objeto y proporciona la información que especifica cómo se colocarán los elementos del conjunto envuelto. La siguiente tabla enumera las diferentes opciones que se pueden utilizar con este método:
| No Señor. | Opción y descripción |
|---|---|
| 1 | mi Esta opción especifica la ubicación de los elementos envueltos (los que se están reubicando) para alinearlos con el elemento o ubicación de destino. Por defecto su valor escenter. Option - my Esta opción especifica la ubicación de los elementos envueltos (los que se están reubicando) para alinearlos con el elemento o ubicación de destino. Por defecto su valor escenter. Dos de estos valores se utilizan para especificar la ubicación: superior, izquierda, inferior, derecha y centro , separados por un carácter de espacio, donde el primer valor es elhorizontal valor, y el segundo el vertical. Si se considera el valor único especificadohorizontal o verticaldepende del valor que utilice (por ejemplo, la parte superior se toma como vertical, mientras que la derecha es horizontal). Example |
| 2 | a Esta opción es de tipo String y especifica la ubicación del elemento objetivo contra el cual alinear los elementos reubicados. Toma los mismos valores que la opción my . Por defecto su valor escenter. Option - at Esta opción es de tipo String y especifica la ubicación del elemento objetivo contra el cual alinear los elementos reubicados. Toma los mismos valores que la opción my . Por defecto su valor escenter. Example |
| 3 | de Este es de tipo Selector o Element o jQuery o Event. Identifica el elemento de destino contra el que se reposicionarán los elementos envueltos, o una instancia de Evento que contiene las coordenadas del mouse para usar como ubicación de destino. Por defecto su valor esnull. Option - of Este es de tipo Selector o Element o jQuery o Event. Identifica el elemento de destino contra el que se reposicionarán los elementos envueltos, o una instancia de Evento que contiene las coordenadas del mouse para usar como ubicación de destino. Por defecto su valor esnull. Example |
| 4 | colisión Esta opción es de tipo String y especifica las reglas a aplicar cuando el elemento posicionado se extiende más allá de la ventana en cualquier dirección. Por defecto su valor esflip. Option - collision Esta opción es de tipo String y especifica las reglas a aplicar cuando el elemento posicionado se extiende más allá de la ventana en cualquier dirección. Por defecto su valor esflip. Acepta dos (horizontal seguido de vertical) de los siguientes:
Si se especifica un solo valor, se aplica a ambas direcciones. Example |
| 5 | utilizando Esta opción es una función que reemplaza la función interna que cambia la posición del elemento. Se llama para cada elemento envuelto con un único argumento que consta de un objeto hash con las propiedades izquierda y superior configuradas en la posición de destino calculada, y el elemento configurado como contexto de función. Por defecto su valor esnull. Option - using Esta opción es una función que reemplaza la función interna que cambia la posición del elemento. Se llama para cada elemento envuelto con un único argumento que consta de un objeto hash con las propiedades izquierda y superior configuradas en la posición de destino calculada, y el elemento configurado como contexto de función. Por defecto su valor esnull. Example |
| 6 | dentro Esta opción es un selector, elemento o elemento jQuery y le permite especificar qué elemento usar como cuadro delimitador para la detección de colisiones. Esto puede resultar útil si necesita contener el elemento posicionado dentro de una sección específica de su página. Por defecto su valor eswindow. Option - within Esta opción es un selector, elemento o elemento jQuery y le permite especificar qué elemento usar como cuadro delimitador para la detección de colisiones. Esto puede resultar útil si necesita contener el elemento posicionado dentro de una sección específica de su página. Por defecto su valor eswindow. |
Ejemplo
El siguiente ejemplo demuestra el uso del método de posición .
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI position method Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.positionDiv {
position: absolute;
width: 75px;
height: 75px;
background: #b9cd6d;
}
#targetElement {
width: 300px;
height: 500px;
padding-top:50px;
}
</style>
<script>
$(function() {
// Position the dialog offscreen to the left, but centered vertically
$( "#position1" ).position({
my: "center",
at: "center",
of: "#targetElement"
});
$( "#position2" ).position({
my: "left top",
at: "left top",
of: "#targetElement"
});
$( "#position3" ).position({
my: "right-10 top+10",
at: "right top",
of: "#targetElement"
});
$( document ).mousemove(function( event ) {
$( "#position4" ).position({
my: "left+3 bottom-3",
of: event,
collision: "fit"
});
});
});
</script>
</head>
<body>
<div id = "targetElement">
<div class = "positionDiv" id = "position1">Box 1</div>
<div class = "positionDiv" id = "position2">Box 2</div>
<div class = "positionDiv" id = "position3">Box 3</div>
<div class = "positionDiv" id = "position4">Box 4</div>
</div>
</body>
</html>Guardemos el código anterior en un archivo HTML positionmethodexample.htmy ábralo en un navegador estándar que admita javascript, también debe ver el siguiente resultado. Ahora puedes jugar con el resultado:
En este ejemplo vemos que -
El cuadro 1 está alineado al centro (horizontal y verticalmente) del elemento div.
El cuadro 2 está alineado con la parte superior izquierda (horizontal y verticalmente) del elemento div.
El cuadro 3 se muestra en la esquina superior derecha de la ventana, pero deje algo de relleno para que el mensaje se destaque más. Esto se hace usando los valores horizontal y vertical de my o at .
Para Box 4 , el de valor se establece como un objeto de evento. Este es un evento asociado con un puntero y se mueve con el evento del mouse.