JqueryUI - Posição
Neste capítulo, veremos um dos métodos utilitários de jqueryUi, o método position () . O método position () permite que você posicione um elemento em relação a outro elemento ou evento do mouse.
O jQuery UI estende o método .position () do núcleo do jQuery de uma forma que permite descrever como você deseja posicionar um elemento da mesma maneira que naturalmente o descreveria para outra pessoa. Em vez de trabalhar com números e matemática, você trabalha com palavras significativas (como esquerda e direita) e relacionamentos.
Sintaxe
A seguir está a sintaxe do método position () -
.position( options )Onde options é do tipo Object e fornece as informações que especificam como os elementos do conjunto agrupado devem ser posicionados. A tabela a seguir lista as diferentes opções que podem ser usadas com este método -
| Sr. Não. | Opção e descrição |
|---|---|
| 1 | meu Esta opção especifica a localização dos elementos agrupados (aqueles sendo reposicionados) para alinhar com o elemento ou local de destino. Por padrão, seu valor écenter. Option - my Esta opção especifica a localização dos elementos agrupados (aqueles sendo reposicionados) para alinhar com o elemento ou local de destino. Por padrão, seu valor écenter. Dois desses valores são usados para especificar a localização: superior, esquerda, inferior, direita e central , separados por um caractere de espaço, onde o primeiro valor é ohorizontal valor, e o segundo o vertical. Se o valor único especificado é consideradohorizontal ou verticaldepende de qual valor você usa (por exemplo, top é considerado vertical, enquanto right é horizontal). Example |
| 2 | em Esta opção é do tipo String e especifica a localização do elemento de destino contra o qual alinhar os elementos reposicionados. Assume os mesmos valores da minha opção. Por padrão, seu valor écenter. Option - at Esta opção é do tipo String e especifica a localização do elemento de destino contra o qual alinhar os elementos reposicionados. Assume os mesmos valores da minha opção. Por padrão, seu valor écenter. Example |
| 3 | do Este é do tipo Seletor ou Elemento ou jQuery ou Evento. Ele identifica o elemento de destino contra o qual os elementos agrupados devem ser reposicionados ou uma ocorrência de Evento contendo coordenadas do mouse para usar como local de destino. Por padrão, seu valor énull. Option - of Este é do tipo Seletor ou Elemento ou jQuery ou Evento. Ele identifica o elemento de destino contra o qual os elementos agrupados devem ser reposicionados ou uma ocorrência de Evento contendo coordenadas do mouse para usar como local de destino. Por padrão, seu valor énull. Example |
| 4 | colisão Esta opção é do tipo String e especifica as regras a serem aplicadas quando o elemento posicionado se estende além da janela em qualquer direção. Por padrão, seu valor éflip. Option - collision Esta opção é do tipo String e especifica as regras a serem aplicadas quando o elemento posicionado se estende além da janela em qualquer direção. Por padrão, seu valor éflip. Aceita dois (horizontal seguido de vertical) dos seguintes -
Se um único valor for especificado, ele se aplica a ambas as direções. Example |
| 5 | usando Esta opção é uma função que substitui a função interna que altera a posição do elemento. Chamado para cada elemento encapsulado com um único argumento que consiste em um hash de objeto com as propriedades left e top definidas para a posição de destino calculada e o elemento definido como o contexto da função. Por padrão, seu valor énull. Option - using Esta opção é uma função que substitui a função interna que altera a posição do elemento. Chamado para cada elemento encapsulado com um único argumento que consiste em um hash de objeto com as propriedades left e top definidas para a posição de destino calculada e o elemento definido como o contexto da função. Por padrão, seu valor énull. Example |
| 6 | dentro Esta opção é um Seletor ou Elemento ou elemento jQuery e permite que você especifique qual elemento usar como caixa delimitadora para detecção de colisão. Isso pode ser útil se você precisar conter o elemento posicionado em uma seção específica da página. Por padrão, seu valor éwindow. Option - within Esta opção é um Seletor ou Elemento ou elemento jQuery e permite que você especifique qual elemento usar como caixa delimitadora para detecção de colisão. Isso pode ser útil se você precisar conter o elemento posicionado em uma seção específica da página. Por padrão, seu valor éwindow. |
Exemplo
O exemplo a seguir demonstra o uso do método de posição .
<!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>Vamos salvar o código acima em um arquivo HTML positionmethodexample.htme abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída. Agora, você pode brincar com o resultado -
Neste exemplo, vemos que -
A caixa 1 está alinhada ao centro (horizontalmente e verticalmente) do elemento div.
A caixa 2 está alinhada à parte superior esquerda (horizontal e verticalmente) do elemento div.
A caixa 3 é exibida no canto superior direito da janela, mas deixe algum preenchimento para que a mensagem se destaque mais. Isso é feito usando os valores horizontais e verticais de my ou at .
Para Box 4 , o de valor é definido como um objeto de evento. Este é um evento associado a um ponteiro e se move com o evento do mouse.