Creación de un controlador de volumen con jQuery UI Slider
Si usted es un cazador de regalos, es probable que haya descargado muchas interfaces de usuario (UI) de PSD. Algunos de ellos son realmente sorprendentes y podrían ahorrar nuestro tiempo al hacer un prototipo del diseño en el que estábamos trabajando..
En esta publicación codificaremos una interfaz de usuario de PSD y la convertiremos en algo más funcional. Vamos a codificar el siguiente control deslizante de la interfaz de usuario de PSD que se aplicará como el tema del control deslizante de la interfaz de usuario de jQuery.
sin embargo, por favor tome nota que este tutorial está destinado a niveles intermedios de experiencia. Dicho esto, sigue siendo relativamente fácil de seguir, siempre que estés bastante familiarizado con CSS y jQuery..
Muy bien, ahora vamos a empezar..
Paso 1: la interfaz de usuario jQuery
Obviamente necesitamos jQuery y jQuery UI Library, y tenemos dos opciones para utilizarlos. Primero, podemos vincular la jQuery y la interfaz de usuario de jQuery directamente desde la siguiente CDN: la API de Google Ajax, la CDN de Microsoft y la CDN de jQuery. Existen muchas ventajas de usar el archivo CDN alojado cuando ponemos nuestro sitio en línea en línea..
Pero como solo estaremos trabajando en él fuera de línea, usaremos el segundo camino en su lugar.
Descargaremos y personalizaremos la biblioteca de jQuery UI desde la página de descargas oficial. Como solo necesitamos el complemento Slider, seleccionaremos solo la biblioteca Slider junto con sus dependencias y dejaremos las demás. De esa manera, los archivos que usamos serán mucho más delgados y podrán cargarse más rápido. Después de eso, vincule todas esas bibliotecas al documento HTML, preferiblemente al final de la página o antes del cierre
etiqueta para ser exacto.
Paso 2: marcado HTML
El marcado para el control deslizante es muy simple, envolvimos todo el marcado necesario (la información sobre herramientas, el control deslizante y el volumen) dentro de un HTML5 sección etiqueta. La jQuery UI generará automáticamente el resto..
Paso 3: instalar la interfaz de usuario deslizante
El fragmento a continuación instalará el control deslizante en la página, pero solo aplica la configuración predeterminada.
$ (function () $ ("#slider") .slider (););
Así que aquí vamos a mejorar un poco el control deslizante agregando otras configuraciones.
Primero, almacenamos el elemento deslizante como una variable..
var slider = $ ('# slider'),
Luego establecemos el valor predeterminado mínimo del control deslizante en aproximadamente 35, cuando se carga por primera vez.
slider.slider (range: "min", valor: 35,);
En este punto, no veremos nada en el navegador todavía, porque la interfaz de usuario de jQuery es básicamente solo generando el marcado. Por lo tanto, debemos aplicar algunos estilos para comenzar a ver el resultado visualmente en el navegador..
Paso 4: Los estilos
Antes de continuar, necesitamos algunos recursos del archivo fuente PSD, como la textura de fondo y el icono.
No hablaremos de cómo cortar En este artículo, solo nos centraremos en el código. Si no está seguro de cómo dividir, mire primero el siguiente screencast antes de continuar.
Convertir un diseño de PSD a HTML - Nettuts+
Bien, ahora comencemos agregando los estilos..
Comenzaremos colocando el control deslizante en el centro de la ventana del navegador y adjuntaremos el fondo que habíamos cortado del PSD al cuerpo.
body background: url ('… /images/bg.jpg') repite arriba a la izquierda; seccion ancho: 150px; altura: auto; margen: 100px auto 0; posición: relativa;
A continuación, aplicaremos los estilos para. la información sobre herramientas, El volumen, el mango, el control deslizante distancia y el deslizador sí mismo.
Lo haremos parte por parte, comenzando con ...
Deslizador
Dado que no definimos el valor máximo para el control deslizante en sí, la interfaz de usuario jQuery aplicará el valor predeterminado; es decir 100. Por lo tanto, también podemos aplicar 100 (px) para el control deslizante anchura.
#slider border-width: 1px; estilo de borde: sólido; color de borde: # 333 # 333 # 777 # 333; radio del borde: 25px; ancho: 100px; posición: absoluta; altura: 13px; color de fondo: # 8e8d8d; fondo: url ('… /images/bg-track.png') repita arriba a la izquierda; box-shadow: recuadro 0 1px 5px 0px rgba (0, 0, 0, .5), 0 1px 0 0px rgba (250, 250, 250, .5); izquierda: 20px;
Información sobre herramientas
La información sobre herramientas se colocará sobre el control deslizante especificando su posición absolutamente con -25px por su posición superior.
Hemos modificado un poco el icono de volumen para cumplir con nuestra idea. La idea es que vamos a crear un efecto para elevar la barra de volumen gradualmente de acuerdo con el valor del control deslizante. Estoy seguro de que a menudo has visto un efecto así en la interfaz de usuario de un reproductor multimedia.
En este paso vamos a comenzar a trabajar en el efecto especial del control deslizante..
Información sobre herramientas
En este punto, la información sobre herramientas aún no tiene contenido, por lo que vamos a rellenarla con el valor del control deslizante. Además, la posición horizontal de la información sobre herramientas se corresponderá con la posición del mango..
En primer lugar, almacenamos el elemento de información sobre herramientas como una variable.
var tooltip = $ ('. tooltip');
Luego definimos el efecto de la información sobre herramientas que hemos mencionado anteriormente dentro del Evento de diapositivas.
slide: function (event, ui) var value = slider.slider ('value'), tooltip.css ('left', value) .text (ui.value);
Pero, también queremos que la información sobre herramientas se oculte inicialmente.
tooltip.hide ();
Después de eso, cuando el encargarse de está a punto de comenzar a deslizarse, se mostrará con un efecto de fundido de entrada.
start: function (event, ui) tooltip.fadeIn ('fast'); ,
Y, cuando el usuario deja de deslizar el asa, la información sobre herramientas se desvanecerá y se ocultará.
Como hemos mencionado anteriormente en el Sección de estilos, Planificamos el ícono de volumen para cambiar de manera correspondiente con la posición del controlador o para ser exactos., el valor del control deslizante. Por lo tanto, aplicaremos la siguiente declaración condicional para crear este efecto.
Pero, en primer lugar, almacenamos el elemento de volumen y el valor del control deslizante como una variable.
volumen = $ ('. volumen');
Entonces comenzamos la declaración condicional..
Cuando el valor del control deslizante es inferior o igual a 5 el ícono de volumen no tendrá ninguna barra, lo que indica que el volumen es muy bajo, pero cuando el valor del control deslizante aumenta, la barra de volumen también comenzará a aumentar.
si (valor <= 5) volume.css('background-position', '0 0'); else if (value <= 25) volume.css('background-position', '0 -25px'); else if (value <= 75) volume.css('background-position', '0 -50px'); else volume.css('background-position', '0 -75px'); ;
Ponlos todos juntos
De acuerdo, en caso de que estés confundido con todo lo anterior, no lo estés. Aquí está el atajo. Ponga todos los códigos siguientes en su documento.
$ (function () var slider = $ ('# slider'), tooltip = $ ('. tooltip'); tooltip.hide (); slider.slider (range: "min", min: 1, value: 35, start: function (event, ui) tooltip.fadeIn ('fast');, slide: function (event, ui) var value = slider.slider ('value'), volume = $ ('. Volume '); tooltip.css (' left ', value) .text (ui.value); if (value <= 5) volume.css('background-position', '0 0'); else if (value <= 25) volume.css('background-position', '0 -25px'); else if (value <= 75) volume.css('background-position', '0 -50px'); else volume.css('background-position', '0 -75px'); ; , stop: function(event,ui) tooltip.fadeOut('fast'); , ); );
De acuerdo, ahora veamos el resultado en el navegador..
Manifestación
Descargar fuente
Conclusión
Hoy hemos creado con éxito un tema jQuery UI más elegante, pero al mismo tiempo también hemos traducido con éxito una interfaz de usuario PSD en un controlador de volumen funcional.
Esperamos que este tutorial lo inspire y lo ayude a comprender cómo convertir una PSD en un producto más útil..
Por último, si tiene alguna pregunta sobre este tutorial, no dude en agregarlo en la sección de comentarios a continuación..
