Función de posición de jQuery UI (además, MagicZoom desde cero) | Programar Plus

Saber cómo colocar las cosas donde las quieres es una de las herramientas más importantes en la caja de herramientas de un diseñador web. Comprender el flujo de la página, comprender que todo es un cuadro, comprender los flotadores, etc. Una vez que se aprenden los conceptos básicos, una pregunta común para los diseñadores intermedios es cómo colocar elementos en relación con otros elementos. La solución CSS estándar para esto es usar el viejo truco de posicionamiento absoluto dentro del posicionamiento relativo. En pocas palabras, puede usar el posicionamiento relativo establecido (o, en realidad, cualquier posicionamiento que no sea el estático predeterminado) en un elemento y luego posicionar absolutamente los elementos secundarios dentro de ese contexto. Muchas veces, esto funciona maravillosamente bien, pero en realidad es bastante limitado:

  • Obligado a usar un valor de posicionamiento que no sea estático, incluso si no es necesario
  • Los elementos que intentan posicionarse en función de los demás deben ser elementos secundarios.
  • Si el padre necesita y desborda el valor, puede volverse incómodo

¡jQuery UI ahora tiene una función de utilidad de posición que hace que el trabajo de posicionar elementos en relación con otros elementos sea deliciosamente fácil! Vamos a ver.

Lo primero es lo primero

Usaremos jQuery y jQuery UI aquí, por lo que asumimos que está cargando las bibliotecas jQuery y jQuery UI en su sitio.

<head>
  ...
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  ...
  <script type="text/javascript">
    $(function() {
      // do stuff, yay!
    });
  </script>
</head>

Los basicos

Una de las cosas dulces de jQuery y jQuery UI es la sintaxis casi similar a una oración para escribirlo. Nombres de funciones de una sola palabra y parámetros que realmente explican lo que está sucediendo. Aquí hay un ejemplo básico.

$("#move-me").position({
  "my": "right top",
  "at": "left bottom",
  "of": $("#thing")
});

Tal vez un pequeño gráfico ayude:

La mejor parte aquí es que no hay requisitos previos para que esto funcione. El elemento que se posiciona no necesita ningún valor de posicionamiento CSS especial (o ser un elemento secundario), el elemento contra el que se posiciona no necesita ningún valor de posicionamiento CSS especial (o cualquier otra cosa).

Todas las opciones

Aquí está el conjunto completo. Solo algunas opciones más.

$('.positionable').position({
  "my": "right top"       //  Horizontal then vertical, missing values default to center
  "at": "left bottom"     //  Horizontal then vertical, missing values default to center
  "of": $('#parent'),     //  Element to position against 
  "offset": "20 30"       //  Pixel values for offset, Horizontal then vertical, negative values OK
  "collision": "fit flip" //  What to do in case of 
  "bgiframe": true        //  Uses the bgiframe plugin if it is loaded and this is true
});

Cubrimos “my”, “of” y “at” en los conceptos básicos, pero el conjunto completo de parámetros incluye establecer un desplazamiento, usar el complemento bgiframe (soluciona algunos problemas del índice z de IE) y detección de colisiones, que yo cubriré más tarde.

¡Zoom Mágico!

Pensé en juntar un pequeño ejemplo del “mundo real” de dónde podría ser útil. ¿Alguna vez ha visto un complemento u otro efecto de JavaScript en el que hace clic en una imagen y “crece en su lugar”? Lo llamaré Magic Zoom porque me gusta poner nombres tontos a las cosas. Así es como podría funcionar:

  1. Tener una cuadrícula de imágenes en miniatura (mantiene bajo el tamaño de carga de la página)
  2. Cuando se hace clic en una miniatura…
  3. Cargue la imagen a tamaño completo directamente sobre la miniatura, reducida exactamente al mismo tamaño
  4. Animar la nueva imagen de tamaño completo hasta su tamaño original
  5. Durante la animación, mantenga la imagen centrada sobre la miniatura
  6. Haga clic para cerrar

La galería es simplemente etiquetas de anclaje que se vinculan a la versión grande y, dentro, etiquetas de imagen de las miniaturas. Sin JavaScript, sigue siendo totalmente funcional.

<div class="gallery">

	<a href="http://farm4.static.flickr.com/3329/4556228155_7ce08c45a3.jpg">
	  <img src="https://farm4.static.flickr.com/3329/4556228155_7ce08c45a3_m.jpg" alt="" />
	</a>
	
	<!-- More... -->
	
</div>

jQuery JavaScript

$(function () {
  var $el;

  $(".gallery a").live("click", function () {
    $el = $(this);

    $("<img>", {
      src: $el.attr("href"),
      class: "larger"
    }).load(function () {
      $(this)
        .appendTo("body")
        .width($el.find("img").width())
        .position({
          of: $el.find("img"),
          my: "center center",
          at: "center center"
        })
        .animate(
          {
            width: 500 // width of large image
          },
          {
            duration: 1000, // 1000 = 1 second
            easing: "easeOutQuad",
            step: function (i) {
              $(this).position({
                of: $el.find("img"),
                my: "center center",
                at: "center center",
                collision: "fit"
              });
            }
          }
        );
    });

    return false;
  });

  $(".larger").live("click", function () {
    $el = $(this);
    $el.fadeOut(400, function () {
      $el.remove();
    });
  });
});

El concepto interesante aquí es el parámetro de “paso” para la función de animación. Puede darle a ese parámetro una función, y esa función se ejecutará en cada fotograma clave de la animación. Para nosotros, eso significa que usaremos la función de posición para asegurarnos de que la imagen grande aún esté centrada sobre su miniatura.

Sí… el crecimiento de las imágenes es un poco inestable. Si alguien tiene alguna idea allí, hágamelo saber.

¡Detección de colisiones!

Ser capaz de establecer elementos en relación con otros elementos con una sintaxis tan simple y poco código es increíble, pero lo que realmente hace que esta utilidad de posición esté por encima y más allá es la detección de colisiones.

¿Qué pasa si donde estamos? contar el elemento ser termina siendo fuera de la ventana del navegador? Eso podría ser un problema, dependiendo de la situación. Tome nuestro ejemplo de Magic Zoom. Teóricamente, la razón por la que las personas hacen clic en las imágenes para ver una versión más grande es porque en realidad están interesados ​​en la foto y quieren verla más grande y con más detalle. No les ayuda si la imagen está en el borde izquierdo de la página y se corta a medida que crece la nueva.

Lidiar con este problema es extremadamente fácil con la función de posición. Todo lo que tenemos que hacer es agregar el parámetro de colisión con el valor “encajar” y la función de posición se asegurará de que cualquier cosa que esté posicionando nunca esté fuera de la ventana.

Por defecto, las imágenes más grandes intentan crecer y quedan centradas sobre la miniatura.
Si el crecimiento de la imagen más grande la empuja fuera de la ventana del navegador, la utilidad de posición lo detectará y, en su lugar, hará crecer la imagen hacia adentro.

(Visited 8 times, 1 visits today)