Share
En este tutorial vamos a utilizar el widget de control deslizante de la interfaz de usuario jQuery para crear un control deslizante de contenido atractivo y funcional. Tendremos un contenedor, que tiene una serie de elementos, cada uno con diferentes bloques de contenido. Habrá muchos de estos elementos para mostrar a la vez, por lo que podemos usar el control deslizante para mover los diferentes bloques de contenido dentro y fuera de la vista.
jQuery UI es la biblioteca oficial de widgets y utilidades construidas sobre jQuery; Es muy fácil de usar, altamente configurable y robusto, y extremadamente fácil de temas. Para seguir el tutorial, necesitará una copia de la última versión de la biblioteca; se puede descargar utilizando el generador de descargas jQuery UI en http://jqueryui.com/download. Aunque podemos elegir cualquiera de los temas disponibles, recomiendo usar el tema predeterminado de suavidad. La interfaz de usuario de jQuery incluye una copia de la versión actual de jQuery, por lo que no necesitamos descargar esto por separado..
Cree una nueva carpeta en algún lugar a mano y llámela deslizador. Dentro de esta carpeta, crea dos nuevas carpetas; Una llamada jqueryui y otra llamada imágenes. Descomprima el archivo descargado de la biblioteca en la carpeta jqueryui; en Explorer o Finder, debería terminar con la siguiente estructura de carpetas:
Comencemos primero en la página básica y en el HTML subyacente; en tu editor de texto crea la siguiente página:
jQuery UI Slider Algunas nebulosas galácticas bien conocidas y sus estadísticas vitales.
Nebulosa omega
- Distancia a la Tierra:
- 5000 - 6000 años luz
- Diámetro:
- 15 años luz
- Masa:
- 800 masas solares
- Número de catalogo:
- M17 / NGC6618
- Descubierto en:
- 1764
- Descubridor:
- Philippe Loys de Chéseaux
Guarde esto como slider.html en la carpeta del control deslizante. En el encabezado de la página, enlazamos con la hoja de estilo de la interfaz de usuario de jQuery, que contiene todo el CSS que se requiere para cada uno de los componentes de la biblioteca. Puede parecer un desperdicio; de alguna manera es que solo estamos usando un solo componente, pero usando una hoja de estilo de 26KB. Sin embargo, al utilizar una herramienta como YUICompressor, podemos reducir esto fácilmente, y con GZipping también podemos reducirlo aún más. También enlazamos con nuestra propia hoja de estilo personalizada, que crearemos más adelante..
No hemos agregado ningún estilo todavía, pero como referencia, la siguiente captura de pantalla muestra el widget de control deslizante predeterminado:
En la página, todo lo que tenemos es el marcado para el contenido y el control deslizante; tenemos un elemento contenedor externo que le hemos dado el nombre de clase ui-corner-all. Esta es una de las clases elegidas por la hoja de estilo de la interfaz de usuario de jQuery y le dará a nuestro contenedor (y a los otros elementos que le damos) bonitas esquinas redondeadas. Utiliza CSS3 para lograr esto, por lo que no todos los navegadores son compatibles, pero los usuarios de Firefox, Safari o Chrome los verán.
Dentro del contenedor tenemos un elemento de encabezado que describe el contenido, seguido de otro elemento contenedor (que también tendrá esquinas redondeadas en los navegadores compatibles); cuando lleguemos a agregar el CSS, a este elemento se le dará una regla de desbordamiento oculta que ocultará la mayoría de los bloques de contenido individuales y nos permitirá deslizarlos a la vista utilizando el control deslizante. Este elemento funcionará como el espectador..
Dentro del visor tenemos un elemento contenedor final; El motivo de esto es el rendimiento: cuando ajustamos la propiedad CSS izquierda con jQuery, solo estaremos seleccionando y manipulando un elemento en lugar de la cantidad de bloques de contenido existentes. Usamos otro nombre de clase de la biblioteca de UI en este elemento: la clase ui-helper-clearfix, que borra automáticamente los elementos flotados dentro del elemento al que se aplica.
A continuación se muestra un ejemplo de un bloque de contenido; Solo he mostrado uno de ellos en el ejemplo de código anterior porque mostrar más sería una repetición innecesaria. En el archivo de origen hay siete de ellos, pero puede poner tantos como desee y el control deslizante seguirá funcionando como debería. Cada bloque de contenido contiene un encabezado, una imagen y una lista de definiciones, que semánticamente es probablemente la mejor opción para este ejemplo, pero no necesariamente se requiere en otras implementaciones. Los bloques de contenido pueden presentar prácticamente cualquier cosa que necesiten, siempre que cada contenedor sea de un tamaño fijo; Verás por qué esto es importante. Venimos a agregar el JavaScript un poco más adelante..
Después de que el elemento del visor venga un contenedor vacío que se transformará en el control deslizante una vez que invocamos la biblioteca de la interfaz de usuario. Esto es todo el HTML subyacente que necesitaremos. A continuación, enlazamos con jQuery y con los archivos fuente de jQuery UI; de nuevo, este archivo contiene todo el JavaScript necesario para ejecutar la biblioteca de IU completa, que para este tutorial es más de lo que necesitamos. Hay archivos individuales para el núcleo y cada componente por separado que pueden reducir la huella de la biblioteca. Tanto los archivos jQuery como jQuery UI JS ya están minimizados.
En verdad, no tenemos que preocuparnos por el estilo del propio control deslizante; El tema que descargamos con la biblioteca lo hará por nosotros. El CSS que estamos a punto de agregar es bastante puramente arbitrario para el propósito de este tutorial, para ordenar las cosas y darle un aspecto básico mínimo. Siempre que a los bloques de contenido individuales (dado un nombre de clase de elemento) se les asigne un ancho fijo y se muevan a la izquierda dentro del elemento transportador, y siempre que el espectador tenga su conjunto de desbordamiento a oculto, todo debería funcionar como se espera.
En un nuevo archivo en su editor de texto agregue el siguiente código:
h2 text-align: center; fuente: normal 150% Georgia; #sliderContent width: 650px; margen: auto; relleno: 0 50px 50px; color de fondo: #ebebeb; borde: 1px sólido # 898989; .viewer ancho: 607px; altura: 343px; margen: 0 auto 40px; relleno: 1px; desbordamiento: oculto; posición: relativa; borde: 1px sólido # 898989; . contenido-transportador ancho: 610px; altura: 335px; posición: relativa; .item ancho: 304px; flotador izquierdo; Familia tipográfica: Tahoma; text-align: center; color de fondo: #ebebeb; .item h2 font-size: 100%; margen: 10px 0; .item dl margen: 10px 0; .item dt, .item dd float: left; ancho: 149px; text-align: right; margen: 0; tamaño de letra: 70%; .item dt font-weight: bold; margen derecho: 5px; .item dd text-align: left; .item img border: 1px solid # 898989; color de fondo: #ffffff; relleno: 1px;
Guarde esto como slider.css en la carpeta del control deslizante. Nuestra página ahora debería verse así:
Todo lo que tenemos que hacer ahora es agregar el JavaScript que inicializará el control deslizante y controlará nuestros bloques de contenido. Directamente después del elemento del script que se vincula a la interfaz de usuario jQuery en slider.html, agregue el siguiente código:
Es un fragmento de código muy corto y simple, con muy poco en marcha; echémosle un vistazo línea por línea; Dentro del documento. Listo atajo, primero configuramos algunas variables para poder almacenar en caché los elementos de la página que estaremos manipulando por razones de rendimiento; esto hace que nuestro código se ejecute más rápido porque solo estamos atravesando el DOM y seleccionando cada elemento una vez.
En primer lugar, seleccionamos el elemento transportador seleccionando su nombre de clase; Debido a que el uso de un selector de clase es ineficiente, le damos al selector un contexto del elemento sliderContent. El contexto se proporciona mediante un selector de id, por lo que no es necesario recorrer todo el DOM. También seleccionamos la colección de bloques de contenido de la misma manera..
Una vez que hayamos almacenado en caché nuestros selectores, podemos establecer la longitud del elemento transportador; en el CSS se estableció en el ancho de dos de los bloques de contenido, pero para que funcione correctamente, los cuadros de contenido deben flotar uno junto al otro, por lo que el transportador debe ser lo suficientemente ancho para acomodarlos a todos..
Para que no restrinjamos la cantidad de bloques de contenido que se pueden colocar en el widget, no codificamos el ancho establecido; en su lugar, obtenemos el número de bloques de contenido y lo multiplicamos por el ancho de cada bloque. Por eso es importante establecer un ancho fijo en los bloques. Necesitamos usar la función parseInt de JavaScript cuando recuperamos el ancho de los bloques porque el método jQuery css devuelve un valor de cadena en el modo getter.
A continuación, creamos un objeto de configuración literal que se pasará al método del control deslizante de la interfaz de usuario jQuery y se usará para establecer algunas propiedades del widget del control deslizante. Nuestro objeto de configuración tiene dos propiedades, max y slide. El valor de la propiedad max es un entero que representa el ancho del elemento transportador menos el ancho del visor. Este será el valor máximo que puede alcanzar el control deslizante.
El valor de la propiedad de diapositiva es una función anónima que recibirá automáticamente dos argumentos; el objeto de evento original y un objeto preparado que contiene propiedades útiles relacionadas con el widget. No utilizamos el primer argumento, que definimos como e, pero necesitamos incluirlo para obtener acceso al segundo argumento, que llamamos ui.
El evento de diapositiva es un evento personalizado expuesto por la API del control deslizante, y la función que configuramos como su valor se llamará cada vez que se produzca una interacción de diapositiva. Cuando se dispara el evento, simplemente manipulamos negativamente la propiedad de estilo izquierda de nuestro elemento transportador por la misma cantidad que se mueve el control deslizante. Podemos obtener el valor al que se mueve el control deslizante utilizando la propiedad value del objeto ui.
Establecemos el valor máximo del control deslizante a la longitud del elemento transportador, en este ejemplo termina siendo 2128px, por lo que el valor máximo es 2128. Esto no está en píxeles, como se verá en la siguiente captura de pantalla, El deslizador en sí tiene alrededor de 650px de longitud. Pero, si movemos el control deslizante hasta aproximadamente la mitad de la pista, el valor reportado en el objeto ui será alrededor de 1064, así que movemos el borde izquierdo del transportador con tantos píxeles hacia la izquierda o hacia la derecha..
No debemos preocuparnos por detectar en qué dirección se movió el deslizador; Si el control deslizante ya se ha movido a la derecha, la propiedad CSS izquierda si el transportador ya tendrá un valor negativo. Cuando obtenemos un número negativo de un número negativo, el resultado es, por supuesto, un número positivo, por lo que el transportador retrocederá como debería. La página completa ahora debería aparecer con el control deslizante:
Debería encontrar que funciona como se esperaba y que los diferentes bloques de contenido se pueden mover dentro y fuera de la vista con el control deslizante. Además de la interacción de arrastre estándar, también se incluye en el control deslizante la útil adición de una interacción de clic; Si hace clic en cualquier parte de la pista, el controlador se mueve automáticamente a esa posición y se ejecuta la función de devolución de llamada de diapositiva.
En este tutorial hemos analizado cómo se utiliza el HTML subyacente para el control deslizante (un simple contenedor vacío), el estilo predeterminado aplicado por la biblioteca y cómo se puede configurar e inicializar con nuestro código..
El control deslizante es una gran adición a cualquier interfaz; es fácil de configurar y fácil de usar para nuestros visitantes, es táctil e interactivo y se puede usar en una variedad de situaciones al mover contenido como en este ejemplo, o como un control de volumen en una aplicación web de transmisión..
Accentsconagua