jQuery UI exemplo - Location (Posição)
Relativa janela, documentos, âncoras, cursor / mouse e outros elementos de um elemento de posicionamento.
Para mais informações sobre .position() Os detalhes dos métodos, consulte a documentação da API .position () .
A função padrão
Use forma controla a posição do layout, ou arraste elementos estão posicionados para modificar seu deslocamento. Arraste para o elemento pai em torno de ver a detecção de colisão.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI Location (Posição) - A função padrão </ 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 {
width: 60%;
height: 40px;
margin: 10px auto;
padding: 5px;
border: 1px solid # 777;
background-color: # fbca93;
text-align: center;
}
.positionable {
position: absolute;
display: block;
direita: 0;
bottom: 0;
background-color: # bcd5e6;
text-align: center;
}
# Positionable1 {
width: 75px;
height: 75px;
}
# Positionable2 {
width: 120px;
height: 40px;
}
select, input {
margin-left: 15px;
}
</ Style>
<Script>
$ (Function () {
posição function () {
$ .position ( ".positionable") ({
de: $ ( "#parent"),
my: $ ( "#my_horizontal") .val (+) "" + $ ( "#my_vertical") .val (),
em: $ ( "#at_horizontal") .val () + "" + $ ( "#at_vertical") .val (),
colisão: $ ( "#collision_horizontal") .val () + "" + $ ( "#collision_vertical") .val ()
});
}
$ ( ".positionable") CSS ( "opacidade", 0,5);
$ ( "Select, input") .bind ( "clique keyup mudança", posição);
$ ( "#parent") .draggable ({
arrastar: posição
});
posição ();
});
</ Script>
</ Head>
<Body>
<Div id = "pai">
<P>
Esta é a localização do elemento pai.
</ P>
</ Div>
<Div class = "posicionada" id = "positionable1">
<P>
a posição
</ P>
</ Div>
<Div class = "posicionada" id = "positionable2">
<P>
2 para a posição
</ P>
</ Div>
<Div style = "padding: 20px; margin-top: 75px;">
Localização ...
<Div style = "padding-bottom: 20px;">
<B> my: </ b>
<Id = "my_horizontal">
<Option value = "left"> esquerdo </ option>
<Option value = "center"> centro </ option>
<Option value = "right"> direito </ option>
</ Select>
<Id = "my_vertical">
<Option value = "top"> top </ option>
<Option value = "center"> centro </ option>
<Option value = "bottom"> fundo </ option>
</ Select>
</ Div>
<Div style = "padding-bottom: 20px;">
<B> em: </ b>
<Selecione id = "at_horizontal">
<Option value = "left"> esquerdo </ option>
<Option value = "center"> centro </ option>
<Option value = "right"> direito </ option>
</ Select>
<Id = "at_vertical">
<Option value = "top"> top </ option>
<Option value = "center"> centro </ option>
<Option value = "bottom"> fundo </ option>
</ Select>
</ Div>
<Div style = "padding-bottom: 20px;">
<B> colisão: </ b>
<Id = "collision_horizontal">
<Option value = "flip"> aleta </ option>
<Option value = "encaixar"> fit </ option>
<Option value = "flipfit"> flipfit </ option>
<Option value = "none"> nenhum </ option>
</ Select>
<Id = "collision_vertical">
<Option value = "flip"> aleta </ option>
<Option value = "encaixar"> fit </ option>
<Option value = "flipfit"> flipfit </ option>
<Option value = "none"> nenhum </ option>
</ Select>
</ Div>
</ Div>
</ Body>
</ Html>
ciclo de imagem
Um protótipo do navegador da foto, respectivamente, utilizando a posição como a imagem à esquerda, centro, direita e depois ciclo. Use o link no topo para percorrer as imagens, ou imagens no clique esquerda ou direita para percorrer as imagens. Note que quando a janela é redimensionada, re-posicionar a imagem.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI Location (Posição) - a circulação Imagem </ 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;
height: 400px;
}
img {
position: absolute;
}
</ Style>
<Script>
$ (Function () {
// Reconstrução significa a remoção desses métodos de plug-in de $ .fn.left = function () {usando
regresso this.position ({
meu: "médio direito",
em: "esquerda + 25 middle",
de: "#container",
colisão: "none",
usando: using
});
};
$ .fn.right = Função (usando) {
regresso this.position ({
meu: "médio esquerdo",
em: "right-25 do meio",
de: "#container",
colisão: "none",
usando: using
});
};
$ .fn.center = Função (usando) {
regresso this.position ({
meu: "middle center",
em: "middle center",
de: "#container",
usando: using
});
};
$ ( "Img: eq (0)") .Left ();
.center ();: $ ( "eq (1) Img")
$ ( "Img: eq (2)") .right ();
animar função (a) {
$ (Este) .Stop (verdadeiro, falso) .animate (a);
}
funcionar seguinte (event) {
event.preventDefault ();
$ ( "Img: eq (2)") .center (animação);
$ ( "Img: eq (1)") .Left (animação);
. $ ( "Img: eq (0)") .right () appendTo ( "#container");
}
funcionar anterior (event) {
event.preventDefault ();
$ ( "Img: eq (0)") .center (animação);
$ ( "Img: eq (1)") .right (animação);
. $ ( "Img: eq (2)") .Left () prependTo ( "#container");
}
$ ( "#previous") .click (Anterior);
$ ( "#next") .click (Next);
$ ( "Img") .click (function (event) {
$ ( "Img") .index (this) === 0 anterior (evento): next (evento) ;?
});
$ (Janela) .Resize (function () {
$ ( "Img: eq (0)") .Left (animação);
$ ( "Img: eq (1)") .center (animação);
$ ( "Img: eq (2)") .right (animação);
});
});
</ 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 = "fuga">
<Img src = "../ wp-content / uploads / 2014/03 / rocket.jpg" width = "300" height = "353" alt = "foguete">
Em <a id="previous" href="#"> um </a>
Por <a id="next" href="#"> um </a>
</ Div>
</ Body>
</ Html>