La interfaz de usuario de JQuery puede agregar mucho a una página web. Hay muchos widgets diferentes que proporciona la interfaz de usuario. Una estrella en ascenso es el deslizador. En este tutorial, te mostraré cómo usar un control deslizante para controlar el tamaño del texto de un artículo en una página. Esto permite al usuario controlar exactamente el tamaño que se adapta a ellos, y también es una característica bastante impresionante de tener en un sitio!

La parte deslizante de este tutorial reproduce una técnica creada originalmente por Buck Wilson.

Nuestra meta

Eventualmente querremos que nuestra página se vea algo como esto:

Comportamiento:

• Cuando se arrastra el control deslizante, una burbuja se desvanecerá, indicando el tamaño actual.
• El texto "tamaño de texto actual" también aparecerá con el tamaño de texto actual al lado.
• También intentaremos hacer que el texto aumente un px o disminuya un px con el clic del signo más o menos.

Paso 1: Obtener los archivos Javascript necesarios

Obviamente necesitamos JQuery, pero también necesitaremos algunos archivos de UI para extender JQuery. Podemos obtener un archivo de UI que se adapta a nuestras necesidades en la página de JQuery UI Build Your Download.

Como puedes ver, hay algunos efectos de sonido realmente geniales allí! Por muy tentador que sea, no necesitamos todos estos efectos para lograr el producto deseado. Todo lo que necesitamos es:

• UI Core
• Deslizador
• El complemento de la cookie de Klaus Hartl

Paso 2: El HTML

Para este tutorial, no voy a perder el tiempo explicando los conceptos básicos de HTML y creando un diseño utilizando esto y CSS. Si desea obtener más información acerca de eso, hay otros tutoriales aquí, como mi tutorial del Panel superior o el tutorial de contenido en pestañas de Collis.

            
 
 
 
 
 
 
 
 
 
 
 
Control deslizante de tamaño de texto
 
Tamaño de fuente actual:  
 
 Lorem Ipsum es simplemente un texto de relleno de la industria de impresión y tipografía. Lorem Ipsum ha sido el texto ficticio estándar de la industria desde la década de 1500, cuando una impresora desconocida tomó una galera de tipos y la revolvió para hacer un libro de muestras tipo. Ha sobrevivido no solo cinco siglos, sino también el salto a la composición electrónica, permaneciendo esencialmente sin cambios. Se popularizó en la década de 1960 con el lanzamiento de las hojas de Letraset que contenían pasajes de Lorem Ipsum y, más recientemente, con un software de edición de escritorio como Aldus PageMaker, que incluye versiones de Lorem Ipsum.. 
 
   

Así notarás varias cosas:

1. La solución PNG para IE 5.5 y 6. He vinculado directamente a la página de códigos de Google. Esto significa que tendré que terminar cada PNG transparente con un -trans.png .
2. También he vinculado directamente a JQuery y a nuestro archivo de IU personalizado.
3. He puesto las etiquetas necesarias para el control deslizante en el #encabezado

NOTA: Para que el control deslizante funcione, necesitamos tener una barra y un asa.

Paso 3: El CSS

Aquí está el CSS para hacer que la página se vea un poco mejor. Esta página es bastante simple, y por lo tanto el CSS también es bastante simple:

 cuerpo fondo: # 373737; text-align: center; margen: 0px;  #header width: 700px; altura: 200px; fondo: # 48887d url (images / header.jpg); margen izquierdo: auto; margen derecho: auto; posición: relativa;  .slider_container position: absolute; altura: 25px; arriba: 170px; izquierda: 165px;  .minus background: url (images / minus-trans.png) no se repite; altura: 9px; ancho: 25px; desbordamiento: oculto; flotador izquierdo; cursor: puntero;  .slider_bar background: url (images / bar-trans.png) no se repite; altura: 9px; ancho: 316px; flotador izquierdo; margen: 0px 5px; posición: relativa;  .add background: url (images / add-trans.png) no se repite; altura: 25px; ancho: 23px; flotador izquierdo; posición: relativa; arriba: -5px; cursor: puntero;  .slider_handle background: url (images / selector-trans.png) no se repite; altura: 25px; ancho: 12px; posición: absoluta; arriba: -8px;  #slider_caption background: url (images / caption-trans.png) no se repite; altura: 45px; ancho: 38px; desbordamiento: oculto; posición: absoluta; arriba: -50px; margen izquierdo: -10px; relleno: 5px 0px 0px 0px; familia de fuentes: "Myriad Pro"; color: # 36665d; font-weight: negrita; text-align: center;  #text font-family: Helvetica, Arial, sans-serif; ancho: 655px; fondo: # f9f9f9; margen izquierdo: auto; margen derecho: auto; relleno: 20px 20px 20px 25px; posición: relativa;  #text p font-size: 12px; alineación de texto: izquierda; de color negro;  #text h1 text-align: left; margen izquierdo: 20px;  p font-family: Arial, Helvetica, sans-serif; color: #CCCCCC;  #font_indicator position: absolute; derecha: 100px; superior: 50px; tamaño de fuente: 10px; pantalla: ninguna;  

Nuevamente, tampoco voy a entrar en gran detalle con el CSS. Si aún necesita más ayuda con eso, asegúrese de revisar los dos tutoriales que mencioné anteriormente. Si tiene alguna pregunta, asegúrese de avisarme en los comentarios..

Observe que todas las imágenes png que tienen transparencia alfa tienen una terminación -trans.png.

Paso 4: Efectos deslizantes básicos

Cuando aprendí por primera vez sobre el efecto deslizante, lo busqué en Google para investigar un poco más sobre él y cómo funciona. Bueno, tuve la suerte de encontrar este increíble screencast. También tenía un efecto muy bueno; un título que parecía mostrar la posición del control deslizante, en la parte superior del control deslizante. Por desgracia, se detuvieron allí. Vamos a utilizar una variación de su código JQuery como punto de partida:

 $ (function () $ ('# slider_caption'). hide (); var captionVisible = false; $ ('. slider_bar'). slider (handle: '.slider_handle', startValue: 26, minValue: 0, maxValue : 100, start: function (e, ui) $ ('# slider_caption'). FadeIn ('fast', function () captionVisible = true;);, stop: function (e, ui) if ( captionVisible == falso) $ ('# slider_caption'). fadeIn ('fast', function () captionVisible = true;); $ ('# slider_caption'). css ('left', ui.handle.css ('left')). text (Math.round (ui.value * 15/100 + 8)); $ ("div # text p"). animate (fontSize: ui.value * 15/100 + 8 ) .fadeIn ("slow"); $ ('# slider_caption'). fadeOut ('fast', function () captionVisible = false;);, slide: function (e, ui) $ ('# slider_caption '). css (' left ', ui.handle.css (' left ')). text (Math.round (ui.value * 15/100 + 8)); $ ("div # text p"). css (fontSize: ui.value * 15/100 + 8). fadeIn ("slow"););

Algunas ideas clave:

• Primero, ocultamos el subtítulo con Javascript. Esto hace que la leyenda sea visible si Javascript está deshabilitado por solo un poco más de accesibilidad.
• Como puede ver, ahora también tenemos un modificador .slider y varios subelementos:
  • inicioValor: Esto especifica la posición en la que el identificador comienza en
  • minValue: Esto especifica el valor mínimo al que irá el manejador.
  • valor máximo: Esto especifica el valor máximo al que irá el manejador.
  • comienzo: Esto nos permite decirle a JQuery qué hacer cuando el usuario comienza a deslizar la barra
  • detener: Esto especifica lo que sucede cuando se suelta el control deslizante
  • diapositiva: Esto especifica qué sucede cuando se desliza el control deslizante
  • encargarse de: Esto nos permite especificar cual será el manejo.
• También asignamos una variable que nos ayudará a saber, cuando detener: ocurre, ya sea que el título sea visible o no, y luego realice una acción basada en esa conclusión.
• También tuvimos que poner un límite a los tamaños de fuente posibles, por lo que limitamos las posibilidades de valor del control deslizante entre 8 y 23. Lo hicimos al realizar cálculos básicos sobre el valor del control deslizante. (Se multiplicó por 15/100 y se agregó 8)
• Esta ecuación dio lugar a tamaños de lugares decimales, por lo que tuvimos que redondear la matemática.
• Note también, el método por el cual hicimos que la leyenda permanezca en la parte superior de la manija. Hicimos que el valor css left del título sea igual al del identificador.
• Note que en el detener: Tengo el tamaño del texto animado, mientras que en la diapositiva, el tamaño del css cambia constantemente. Esto puede parecer contrario a la intuición, que en diapositiva: No lo animaría, pero por la esencia de deslizar y aumentar gradualmente el tamaño, hace lo mismo. Si tuviera que animar en lugar de simplemente cambiar el css, sería entrecortado y no respondería.

Paso 5: Agregar el título del texto

 $ (function () $ ('# slider_caption'). hide (); var calloutVisible = false; $ ('. slider_bar'). slider (handle: '.slider_handle', startValue: 26, minValue: 0, maxValue : 100, start: function (e, ui) $ ('# slider_caption'). FadeIn ('fast', function () calloutVisible = true;); $ ('# font_indicator'). FadeIn ('slow' );, stop: function (e, ui) if (calloutVisible == false) $ ('# slider_caption'). fadeIn ('fast', function () calloutVisible = true;); $ ('# font_indicator '). fadeIn (' slow '); $ (' # slider_caption '). css (' left ', ui.handle.css (' left ')). text (Math.round (ui.value * 15/100 + 8)); $ ('# font_indicator b'). Text (Math.round (ui.value * 15/100 + 8)); $ ("div # text p"). Animate (fontSize: ui.value * 15/100 + 8). FadeIn ("slow"); $ ('# slider_caption'). FadeOut ('fast', function () calloutVisible = false;); $ ('# font_indicator'). fadeOut ('slow');, slide: function (e, ui) $ ('# slider_caption'). css ('left', ui.handle.css ('left')). text (Math.round ( ui.value * 15/100 + 8)); $ ('# font_indicator b'). text (Math.round (ui. valor * 15/100 + 8)); $ ("div # text p"). css (fontSize: ui.value * 15/100 + 8). fadeIn ("slow"); );

Ideas clave sobre #font_indicator

• Añadimos los mismos efectos de atenuación y desaparición en los mismos lugares que la leyenda.
• Dejamos fuera la posición css izquierda aunque
• Tenga en cuenta que tenemos un etiqueta dentro del div # font-indicator. Esto no solo hace que el número se destaque más, sino que nos permite simplemente colocar el valor del control deslizante actual como texto en él. Si nos añadimos al final del div, cada valor de tamaño de fuente simplemente se acumularía al final.

Paso 6: Dar las acciones más y menos

Esto simplemente no sería un diseño funcional, si no damos las acciones de signos de más y menos al hacer clic. Este código puede ser un poco descuidado y no perfectamente eficiente, pero hace el trabajo. Este proyecto requirió una cantidad sorprendente de matemáticas, lo que explica algunos de los números extravagantes que terminan siendo utilizados.

Sin más preámbulos, aquí está el resto de JavaScript, lo explicaré después:

 $ (". add"). click (function () var currentFontSize = $ ('# text p'). css ('font-size'); var currentFontSizeNum = parseFloat (currentFontSize, 10); var newFontSize = currentFontSizeNum + 1; if (newFontSize < 24)  $('#text p').css('font-size', newFontSize); $('#slider_caption').css('left', newFontSize*19.75 - 158).fadeIn('fast').text(Math.round(newFontSize )).fadeOut(); $('.slider_handle').css('left', newFontSize*19.75 - 158); $('#font_indicator').fadeIn('slow'); $('#font_indicator b').text(Math.round(newFontSize )); $('#font_indicator').fadeOut('slow');  else $('#font_indicator').fadeIn('slow'); $('#font_indicator b').text("Isn't 23 big enough?"); $('#font_indicator').fadeOut('slow');  return false; ); $(".minus").click(function() var currentFontSize = $('#text p').css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum-1; if (newFontSize > 8) $ ('# text p'). Css ('font-size', newFontSize); $ ('# slider_caption'). css ('left', newFontSize * 19.75 - 158) .fadeIn ('fast'). text (Math.round (newFontSize)). fadeOut (); $ ('. slider_handle'). css ('left', newFontSize * 19.75 - 158); $ ('# font_indicator'). fadeIn ('slow'); $ ('# font_indicator b'). text (Math.round (newFontSize)); $ ('# font_indicator'). fadeOut ('slow');  else $ ('# font_indicator'). fadeIn ('slow'); $ ('# font_indicator b'). text ("¿No es 8 lo suficientemente pequeño?"); $ ('# font_indicator'). fadeOut ('slow');  falso retorno; );

Algunas notas clave:

• Si conoces la sintaxis básica de Javascript, esto debería ser bastante evidente..
• Asigno una variable inicial para obtener el tamaño de fuente actual.
• Entonces lo convierto en un entero
• Entonces creo otra variable que es un valor más alto..
• Pongo un límite entre menos de 24 y más de 8, usando un si mas declaración.

Tiempo de matematicas

Ajustar el controlador y el título para reaccionar ante los clics más y menos fue un verdadero desafío. Lo que terminé haciendo fue calcular el ancho de la barra (316px) y dividirlo entre los 16 tamaños de fuente posibles (8-23) para calcular cuánto espacio tomó cada incremento.

316/16 =

Para estar seguro, entonces necesitaba averiguar el punto de partida para el tamaño de fuente. Sabía que esto no era exactamente 12, porque lo modifiqué ligeramente con el 15/100 + 8. Así que tomé el valor de inicio del mango (26) y lo multiplicé por eso:

26 * 15/100 + 8 =

Pensé que, como estaba redondeado, serían doce de todos modos..

Así que pensé que el controlador sería el [tamaño de fuente * 19.75 - 158 (los primeros 8 tamaños)] px.

Pensé que te daría un vistazo a mi matemática extraña y complicada;). Probablemente haya formas mucho más fáciles de hacerlo, pero creo que esta es mi lógica..

Paso 7: Cookie Time, leyendo la cookie

Para tratar con las cookies utilicé el excelente complemento de cookies de Klaus Hartl. Puede ver la sintaxis básica del complemento en el enlace que proporcioné. El desafío era encontrar un lugar que configurara la cookie de manera confiable. Terminé configurándolo cuando el navegador actualiza o cambia la página. De esta manera, solo lo hace cuando es necesario y también de manera realista. Primero agregamos el código a la parte superior del archivo javascript para leer la cookie:

 var startSize = $ .cookie ('fontSize'); var startSize = parseFloat (startSize, 12); $ ('# text p'). css ('font-size', startSize);

Lo que hice:

• Primero leí la cookie y la envié a la variable startSize
• Entonces cambié esa variable en un número entero
• Luego agregué ese número al css predeterminado del texto

Paso 8: Configuración de la cookie

Como mencioné anteriormente, debemos configurar la cookie cuando se salga de la página. Hacemos esto usando el siguiente código:

 window.onbeforeunload = leaveCookie; function leaveCookie () var FontSize = $ ('# text p'). css ('font-size'); var IntFontSize = parseFloat (FontSize, 10); $ .cookie ('fontSize', IntFontSize); 

Lo que hice:

• NOTA: Este JS es fuera de de la JQuery $ (function () );
• Primero, activé una función cuando el navegador salía de la página.
• Luego convertí el tamaño del texto en un entero
• Luego pongo esto en la galleta.
  

Eso es!

Espero que hayas encontrado este tutorial útil! Por favor, disculpe mi lógica de programación, no siempre pienso tan eficientemente: P. Si tiene alguna pregunta o comentario, no dude en hacérmelo saber en los comentarios.!

• Suscríbase a la fuente RSS de NETTUTS para obtener más artículos y artículos de desarrollo web diarios..

Código