El marco jQuery UI proporciona muchas funciones de utilidad al usuario, una de las cuales es el método position() . El método position() ayuda a posicionar cualquier elemento en relación con cualquier elemento de destino en la página, como una ventana, cualquier elemento principal, documento o mouse. Describe la posición de cualquier elemento en función de propiedades como «arriba», «izquierda», «derecha» y «abajo».
Nota:
- No admite funciones de posicionamiento de elementos ocultos.
- Solo los elementos secundarios se colocan en relación con cualquier otro elemento u objetivo.
Sintaxis:
$(selector).position( options )
donde las opciones son de tipo objetos que definen cómo se colocarán los elementos con respecto al elemento principal o de destino. Explicaremos solo algunos de los que se usan comúnmente:
Opciones:
- my: Es de tipo string. Esta opción menciona la posición del elemento que se requiere para alinear con el elemento principal de destino. Su valor predeterminado es el centro.
- at: Es de tipo string. Esta opción menciona la posición o ubicación del elemento de destino principal contra el que se posiciona el elemento secundario. Su valor predeterminado es el centro.
- de: El tipo es selector o elemento principal. Esta opción menciona los elementos principales o de destino para posicionar contra él. Su valor predeterminado es nulo .
- colisión: Es de tipo string. Esta opción menciona las reglas que se aplican cuando el elemento posicionado va más allá de la ventana del documento. El valor predeterminado es voltear .
Enlaces para jQuery UI:
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js”></script>
<script src=”https://ajax.googleapis.com/ajax /libs/jqueryui/1.8.16/jquery-ui.js”></script>
<enlace
href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness /jquery-ui.css” rel=”hoja de estilo” type=”texto/css” />
Ejemplo 1: En el siguiente ejemplo, se demuestra el método position() predeterminado básico . «divID1» y «divID2» se fijan con sus ubicaciones «my» y «at» en relación con el elemento principal «mainDivID». El evento del mouse se maneja para «divID3» . La posición está diseñada para moverse alrededor del documento manteniendo un espacio de 10 a la izquierda y arriba.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>jQuery UI position method</title>
<link href=
"http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.class {
.height: 10px;
}
.subDivClass {
position: absolute;
width: 80px;
height: 80px;
background: green;
padding: 10px 10px;
}
#mainDivID {
width: 300px;
height: 300px;
padding-top: 50px;
background: #e9e9e9;
border: 1px solid black
}
</style>
<script>
$(function() {
// Position to the center with respect to the parent mainDivID
$("#divID1").position({
my: "center",
at: "center",
of: "#mainDivID"
});
// Position to the top right keeping a gap of 10
$("#divID2").position({
my: "right-10 top+10",
at: "right top",
of: "#mainDivID"
});
/* Position to move around
keeping a gap of 10 at the left and top */
$(document).mousemove(function(event) {
$("#divID3").position({
my: "left+10 top+10",
of: event,
collision: "fit"
});
});
});
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b>jQuery UI position utility </b>
<div class="height"> </div>
<div id="mainDivID">
<div class="subDivClass" id="divID1">Position 1</div>
<div class="subDivClass" id="divID2">Position 2</div>
<div class="subDivClass" id="divID3">Position 3</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: En el siguiente ejemplo, el método de posición del código se demuestra junto con todas las opciones o parámetros mencionados anteriormente.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>jQuery UI position method</title>
<link href=
"http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.height {
height: 10px;
}
#parentDivID {
width: 500px;
height: 120px;
padding: 15px;
border: 1px solid black;
background-color: green;
text-align: center;
}
.positionableClass {
position: absolute;
display: block;
border-radius: 25%;
background-color: #e9e9e9;
text-align: center;
}
#positionableId {
width: 80px;
height: 80px;
}
#optionsDivID {
padding: 10px;
margin-top: 20px;
}
.selectDiv {
padding-bottom: 20px;
}
select {
margin-left: 15px;
}
</style>
<script>
$(function() {
function position() {
$(".positionableClass").position({
my: $("#myHorizontalID").val() +
" " + $("#myVerticalID").val(),
at: $("#atHorizontalID").val()
+ " " + $("#atVerticalID").val(),
of: $("#parentDivID"),
collision: $("#collHorizontalID").val() +
" " + $("#collVerticalID").val()
});
}
$("select").on("click keyup change", position);
$("#parentDivID").draggable({
drag: position
});
position();
});
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b>jQuery UI position method </b>
<div class="height"> </div>
<div id="parentDivID">
<p>
This is the parent target element.
</p>
</div>
<div class="positionableClass" id="positionableId">
<p>
Change my position
</p>
</div>
<div id="optionsDivID">
<div class="selectDiv">
<b>Select "my" positions :</b>
<select id="myHorizontalID">
<option value="left">left</option>
<option value="center">center</option>
<option value="right">right</option>
</select>
<select id="myVerticalID">
<option value="top">top</option>
<option value="center">center</option>
<option value="bottom">bottom</option>
</select>
</div>
<div class="selectDiv">
<b>Select "at" positions :</b>
<select id="atHorizontalID">
<option value="left">left</option>
<option value="center">center</option>
<option value="right">right</option>
</select>
<select id="atVerticalID">
<option value="top">top</option>
<option value="center">center</option>
<option value="bottom">bottom</option>
</select>
</div>
<div class="selectDiv">
<b>Select collision options:</b>
<select id="collHorizontalID">
<option value="flip">flip</option>
<option value="fit">fit</option>
<option value="flipfit">flipfit</option>
<option value="none">fit none</option>
</select>
<select id="collVerticalID">
<option value="flip">flip</option>
<option value="fit">fit</option>
<option value="flipfit">flipfit</option>
<option value="none">none</option>
</select>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA