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 `top, or bottom right.`
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 `"right", or "left center"`
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 `#top-menu`
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 - flip- Vira o elemento para o lado oposto e executa a detecção de colisão novamente para ajustar. Se nenhum dos lados couber, o centro é usado como um substituto. fit - Mantém o elemento na direção desejada, mas ajusta a posição para que se encaixe. flipfit- Primeiro aplica a lógica de inversão, colocando o elemento em qualquer lado que permita que mais do elemento seja visível. Em seguida, a lógica de ajuste é aplicada para garantir que o máximo possível do elemento seja visível. none - Desativa a detecção de colisão. Se um único valor for especificado, ele se aplica a ambas as direções. Example `"flip", "fit", "fit flip", "fit none"`
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 `{horizontal: "center", vertical: "left", important: "horizontal" }`
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.