Muchos desarrolladores web se están lanzando al mar de proyectos de código fuente abierto. Los nuevos complementos y marcos se lanzan casi todos los días. Y cuando está ocupado en el trabajo, puede ser difícil mantenerse al día con los últimos lanzamientos.
En este escaparate he reunido más de 30 complementos de jQuery diferentes que vale la pena mencionar a todos los desarrolladores web. Desarrollar una interfaz de sitio web puede ser difícil y ciertamente requiere una cuidadosa precisión. El desarrollo sobre cualquier proyecto de código abierto significa que no está reinventando la rueda. Además, no eres el único que queda para detectar errores en el código. Y dado que jQuery es una de las bibliotecas de JavaScript más estables disponibles, estos complementos a menudo trabajan mano a mano para proporcionar una experiencia de usuario perfecta.
Reproductor de audio sensible al tacto
Este reproductor de audio sensible es el ejemplo perfecto de jQuery en el trabajo. Simplemente incluya los códigos de los complementos y cree cualquier elemento de audio HTML5 típico. Esto se convertirá automáticamente en un reproductor de audio fácil de tocar con una deslumbrante interfaz de usuario CSS3.
Sidr
Estoy seguro de que muchos diseñadores y desarrolladores reconocen el menú lateral deslizante. Esto se popularizó desde las aplicaciones móviles de iOS utilizando los botones de menú deslizantes en la barra de herramientas. Y ahora este efecto puede ser replicado para sitios web usando solo jQuery y el complemento Sidr. Vea la demostración en vivo y vea cómo esto podría funcionar en sus propios proyectos.
Imageloader
¿Recuerdas haber visto todos estos complementos de imagen de carga lenta? Hay tantas opciones diferentes, e incluso se han lanzado algunos complementos gratuitos de código abierto de WordPress. Este complemento de cargador de imágenes en particular sigue un ejemplo mucho más agradable con todas las imágenes cargadas en un orden secuencial, luego de un efecto de desvanecimiento. La demostración en vivo es un excelente ejemplo de cómo puede aplicar esto a su sitio web.
Muestras
Aunque es posible que Swatches no tenga un uso práctico en muchos diseños de sitios web, es un complemento maravilloso de jQuery para jugar con colores específicos. Este complemento creará un área div utilizando una paleta de colores relacionados en función de su elección de entrada. Generar su propio esquema de color puede ser difícil y esta es una herramienta única de código abierto para el trabajo.
Caliente en facebook
Caliente en Facebook es una idea bastante oscura. ¡Pero el complemento funciona perfectamente en todos los navegadores compatibles con los estándares, así que para aquellos que disfrutan de compartir en Facebook, esto es para ti! Hot on Facebook tomará una URL y verificará el número total de acciones de FB. Luego se mostrará en la página como una insignia para compartir en las redes sociales.
Toolbar.js
El script de código abierto Toolbar.js es bastante fácil de ejecutar, pero tiene sus limitaciones. Este complemento creará un pequeño menú de información sobre herramientas de enlaces de iconos que aparecerá en cualquier elemento que elija. Puede ser inmensamente potente junto con un perfil de usuario u otra interfaz de comando de icono. Sin embargo, el efecto es bastante oscuro, así que no se sorprenda si le resulta difícil adaptar esto a su diseño.
jQuery PowerTip
En cuanto al manejo de elementos emergentes de información sobre herramientas, puede considerar jQuery PowerTip. Este es un complemento bastante nuevo lanzado como código abierto en Github. Puede ver la demostración en vivo para ver un mejor ejemplo, pero la explicación más sencilla es crear menús emergentes con información sobre herramientas cuando se desplaza sobre algún elemento HTML.
jq timeline
El complemento jQtimeline ofrece una funcionalidad única que nunca antes había visto. Puede crear una línea de tiempo horizontal con la configuración de eventos de fecha en toda la lista. De esta manera, los usuarios pueden hacer clic en un evento para mostrar más información. Sin duda tiene sus usos prácticos, pero tomará un poco de código personalizado para que funcione correctamente.
Swipebox
El plugin Swipebox es una galería de imágenes jQuery con capacidad de respuesta móvil. Esto está especialmente diseñado para aplicaciones web móviles y sitios web que responden a teléfonos inteligentes y tabletas. La galería de imágenes ocupará toda la pantalla, e incluso puede tocar y deslizar entre otras imágenes en la presentación de diapositivas.
Mezclar
MixItUp tiene muchas opciones personalizadas y diría que está más cerca de un complemento intermedio de jQuery. Necesitará comprender algunos conceptos al personalizar la configuración predeterminada y agregar esto a su página. Pero permitirá una rápida clasificación de los elementos dentro de una galería de conjuntos como elementos de portafolio, imágenes, fotografías y mucho más.
jQuery Spellchecker
Los diseñadores que están familiarizados con el corrector ortográfico en el navegador pueden ser fanáticos o pueden odiarlo por completo. Este complemento jQuery ofrece una solución diferente en la que puede editar la función de devolución de llamada para mostrar el vocabulario relacionado. Es un complemento atrevido que es completamente gratuito de usar, pero también requiere un poco de personalización para que funcione correctamente.
Desplazarse hacia arriba
ScrollUp está en mis 5 mejores complementos favoritos solo por su facilidad de uso y sus estilos precompilados. Simplemente incluya los archivos JS en su página web y configure la distancia de desplazamiento desde la parte superior. Luego, después de que un visitante se desplaza más allá de este límite, aparecerá un pequeño div fijo en la esquina inferior. Es una excelente alternativa para codificar tu propio botón desde cero.
Nod Frontend Validation
Nod es un complemento de validación de frontend para formularios de entrada HTML. Usando jQuery, puede configurar la base real para lo que se considera información buena y mala, luego verifique estos valores después de que el usuario envíe el formulario. No pasará hasta que se cumplan todos los criterios.
Select2
Los menús desplegables seleccionados siempre se han atascado en sus propios estilos CSS. Hay algunas publicaciones en línea que permiten personalizar su propio menú de selección, pero a menudo no son compatibles con todos los navegadores. Este complemento jQuery Select2 es una mejora en el campo de selección HTML típico. Simplemente incluya el complemento dentro de su encabezado y todos los menús seleccionados se pueden actualizar con un poco de código.
Tooltipster
Aparte del otro gran complemento de información sobre herramientas de jQuery, tengo que recomendar Tooltipster por su base de código alternativa. He usado Tooltipster en algunos proyectos y funciona tal como se describe.Muchas de las opciones son muy fáciles de implementar, y esto permite a los desarrolladores personalizar sus propias sugerencias de herramientas con solo unas pocas propiedades CSS.
Vórtice
Este extraño complemento de estilo carrusel te permite crear un panel dinámico de elementos giratorios. El plugin jQuery Vortex es bastante nuevo, y todavía hay actualizaciones que se aplican de forma regular. Sin embargo, creo que vale la pena mencionarlo ya que las técnicas aún no son tan convencionales como podría esperarse.
compruebo
iCheck es uno de los mejores complementos de jQuery que he encontrado para actualizar tus campos de entrada. Las casillas de verificación y los botones de radio recibirán un aspecto totalmente nuevo cuando elija la piel y el estilo de color adecuados. Admito que iCheck es un poco engañoso con tantas opciones confusas al principio. Pero cuanto más practique, más fácil será incluir este complemento en su (s) sitio (s) web.
Cualquier lista de desplazamiento
ALS o Any List Scroller es un complemento típico de jQuery para presentaciones de imágenes. Pero en lugar de mostrar las imágenes en una vista más grande, se giran como un contenedor de elementos de página de inicio típico. Hay opciones para incluir flechas en ambos lados y permitir a los visitantes cambiar manualmente entre los elementos internos.
Tumbo
Tumbo es un complemento bastante rudimentario para mostrar rápidamente un feed de tu blog Tumblr. Esto se puede actualizar para mostrar el contenido de cualquier blog de Tumblr usando la URL del subdominio. Obviamente, no todos necesitarán esto, pero es bueno saber que los desarrolladores están trabajando a través de API como Tumblr integrado en los complementos de JavaScript.
Espectragrama
Hablando de APIs: este complemento de Spectragram es un método rápido para acceder a fotos desde Instagram. Simplemente incluya los archivos JS en su encabezado y luego especifique un usuario o una consulta de búsqueda. El complemento de Spectragram extraerá todos los resultados relacionados y volverá a enlazar con la toma original.
raya jQuery
El complemento jQuery Stripe ofrece una galería de imágenes más tradicional. Cada foto solo se mostrará como una pequeña astilla vertical en la que puede hacer clic para mostrar la imagen completa. También hay flechas en los lados derecho e izquierdo para cambiar entre las vistas. No creo que sea la mejor opción, pero puede ser una solución poco convencional para diseños de sitios web atípicos.
Cuenta social
SocialCount maneja otra característica extraña que recibe muchas solicitudes. Este complemento te permitirá sacar rápidamente los números de Twitter, Facebook y Google+. Simplemente ingrese la URL de destino y podrá mostrar las insignias de las redes sociales en cualquier lugar de su página web.
Complemento de barra de desplazamiento personalizado
jQuery Custom Scrollbar es un complemento fascinante que merece mucha atención. Esto ha estado en línea durante bastante tiempo, pero los efectos nunca dejan de sorprendernos. Puede hacer rápidamente un elemento div con una función de desplazamiento excesivo utilizando estas barras de desplazamiento personalizadas. Es perfecto para manejar contenido personalizado que no debe ocupar la totalidad del diseño.
Smallipop
Smallipop es otro hermoso plugin de información sobre herramientas de jQuery. Debería mirar algunos de los ejemplos para ver cómo se implementaría esto. Cada complemento de información sobre herramientas sigue sus propias reglas y pueden o no atraer a todos. Pero creo que Smallipop es una excelente opción para los desarrolladores que se inician en las bibliotecas de JavaScript.
jPanelMenu
jPanelMenu es otro complemento popular de jQuery para usar una navegación deslizante. Puede incluir rápidamente estos códigos en su sitio web para agregar los efectos en cualquier página. Solo apunte al elemento abrir / cerrar y cada vez que el usuario haga clic, mostrará su navegación oculta. Eche un vistazo a la demostración en vivo para ver este efecto en acción.
Intro.js
Intro.js es un complemento de introducción guiada para jQuery. Puede elegir una gran cantidad de opciones y configuraciones personalizadas, pero esto también permite un rendimiento más exclusivo del sitio web. Creo que Intro.js es el mejor complemento de jQuery para crear una visita guiada por el sitio web. El CSS es fácilmente maleable y puede hacer demostraciones con todo tipo de diseños diferentes.
Lightbox_me
La lista de shadowboxes y lightboxes ha crecido enormemente desde 2011. Creo que el plugin jQuery Lightbox_me es otro hermoso ejemplo de esta función. Puede configurar imágenes, formularios, videos y otros HTML directamente dentro de una caja de luz modal. Los códigos JS son fáciles de aprender y el complemento no requiere un montón de ediciones personalizadas.
carrusel jQuery
Creo que el gran carrusel de jQuery es definitivamente una opción peculiar. Esto mostrará los enlaces prev / next justo dentro de la división de imágenes, encapsulando todas las demás imágenes. Se ve realmente bien en espacios más pequeños y puede cambiar el tamaño del ejemplo a cualquier cosa que necesite. Creo que vale la pena investigarlo, pero puede que no sea su opción favorita.
Superbox
¿Está familiarizado con cómo Google Images muestra los resultados actualmente? Así es como funciona jQuery Superbox usando tus propias imágenes estáticas. Los visitantes tienen la capacidad de explorar miniaturas y una vez que hacen clic, se abrirá un nuevo div que muestra la imagen completa. Realmente me gusta este complemento porque la experiencia del usuario imita a Google muy de cerca. Y dado que la gente ya está familiarizada con Google, proporciona un intercambio de datos sin complicaciones, sin mucha confusión.
KGallery
KGallery es otra hermosa galería de imágenes de jQuery con funciones de presentación de diapositivas. Los iconos predeterminados no son permanentes y, obviamente, puede actualizar otros bits de la interfaz de usuario. Lo que realmente me llama la atención es la opción de incluir miniaturas de imágenes más pequeñas en el diseño de la galería. Es un complemento bastante simple de configurar y recomendaría probar la demostración en vivo para ver cómo se siente con respecto a la implementación.
jQuery Litelighter
Muchos de los destacados resaltadores de sintaxis se han lanzado en los últimos años. Pero jQuery Litelighter es otro complemento que realmente aprecio por la simplicidad y la naturaleza elegante. Puede generar una sintaxis resaltada para casi cualquier idioma popular, y debería funcionar con cualquiera de los navegadores web más comunes.
bxSlider
bxSlider simplemente tiene una de las mejores experiencias de usuario para una presentación de imágenes. Puede implementar esto directamente en su página de inicio o en cualquier otra página del sitio. Proporcionará un diseño sólido para los usuarios que están familiarizados con las funciones de presentación de imágenes. Además, los códigos jQuery son muy minimalistas y no bloquean el sitio web durante largos tiempos de carga.
MeanMenu
El plugin MeanMenu es una versión más reciente y ciertamente vale la pena verlo. Realmente me gusta cómo el diseño de navegación predeterminado cambiará de tamaño automáticamente en función del número total de enlaces internos. También puede incluir enlaces de submenú que ofrecen a los visitantes una vista más rápida de su menú de navegación. El diseño no es una gran opción para todos, sin embargo, es un complemento sólido y puede resultar útil en algunos proyectos de sitios web.
