Top 15: los mejores complementos de reemplazo de Checkbox y botónes de opción en jQuery, JavaScript y CSS

Top 15: los mejores complementos de reemplazo de Checkbox y botónes de opción en jQuery, JavaScript y CSS

Las interfaces visualmente impresionantes siempre serán necesarias hoy en día, una aplicación aburrida no será probablemente la favorita de los usuarios, ¿verdad? Como diseñador o desarrollador web, es tu responsabilidad crear interfaces de usuario que sean fáciles de usar pero que también se vean bien. Las casillas de verificación y los botones de opción predeterminados no suelen ser la mejor opción para una aplicación cuyos componentes tienen otros estilos (botones personalizados, etc.), por lo que no puede olvidar tampoco dar un estilo atractivo a esos componentes.

En este artículo, queremos compartir contigo 15 de los complementos basados ​​en CSS y JavaScript más importantes para crear casillas de verificación impresionantes y hermosas en tu aplicación web en un par de segundos, ¡disfrútalas!

15. TinyToggle

Github

Tiny Toggle

TinyToggle es un complemento simple y útil para enmascarar la etiqueta de entradas html de las casillas de verificación en tus proyectos. Puedes elegir entre 13 conjuntos de iconos diferentes disponibles, también puedes personalizar la paleta de colores y el tamaño a tu gusto y ampliar con una biblioteca externa como Font Awesome. TinyToggle se basa en fuentes web css, es fácil de usar y ligero de incluir en tu proyecto.

14. prettyCheckable

Github

Pretty Checkable Plugin

Un complemento de jQuery para reemplazar casillas de verificación y radios para imágenes personalizadas. Características de este complemento:

  • Compatibilidad con IE7 +, Chrome, Firefox, Safari y navegadores móviles;
  • Diseño personalizado, amablemente proporcionado por Bruno O. Barros ; 
  • Cuatro opciones de color (Twitter bootstrap) + PSD editable ; 
  • Mejor aspecto y tamaño;
  • Implementación súper fácil;
  • Seleccionable con Tab y comprobable con teclado;
  • Cambiar eventos y encadenamiento conservados;
  • Más área de clic / toque. Una ventaja para los dispositivos móviles.

13. iCheck Bootstrap

Github

iCheck Bootstrap CSS

iCheck-bootstrap es una solución css pura para mostrar casillas de verificación y botones de radio de estilo bootstrap de twitter. icheck-bootstrap se basa en los estilos de arranque de Twitter, así que asegúrate de vincular la hoja de estilo de arranque correctamente en tu encabezado y utiliza la estructura de marcado predeterminada:

<div class="checkbox icheck-primary">
    <input type="checkbox" id="someCheckboxId" />
    <label for="someCheckboxId">Click to check</label>
</div>

12. Checkbox radio

Github

Checkbox Radio Plugin

Checkbox Radio es un pequeño complemento de jQuery creado por filamentgroup para crear botones de radio y casillas de verificación progresivamente mejorados.

11. Magic Input

Github

Magic input

La entrada mágica es una colección impresionante de estilos CSS3 para casilla de verificación y botón de opción que hará que tus entradas se vean más bonitas, utilizando solo un elemento y CSS.

10. Magic Check

Github

Magic Check Plugin

Magic Check es una pequeña biblioteca de CSS para embellecer Radio y Checkbox. Ofrece soporte para Chrome, Firefox, Safari, Opera e IE9 +.

9. Bootstrap Switch

Bootstrap Switch

Convierte las casillas de verificación y los botones de radio en interruptores de palanca. Ofrece soporte para IE9 + y todos los demás navegadores modernos.

8. Bootstrap Checkbox

Github

Bootstrap Checkbox jQuery Plugin

Bootstrap Checkbox es un componente de casilla de verificación muy sencillo y fácil de usar basado en el marco de Bootstrap. Para comenzar con este complemento, simplemente incluya una copia del script bootstrap-checkbox.js en su documento:

<!-- Incluye jQuery -->
<script src="jquery.js"></script>

<!-- Include Copia de bootstrap-checkbox.js -->
<script src="dist/js/bootstrap-checkbox.js"></script>

Selecciona los elementos de la casilla de verificación con jQuery donde deseas inicializar el componente y llama al método checkboxpicker:

$(':checkbox').checkboxpicker();

Y eso es todo, instantáneamente tendrás un increíble alternar sí / no en lugar de las casillas de verificación nativas del navegador.

7. Pretty Checkbox

Github

Pretty Checkbox

Prett Checkbox es una biblioteca CSS pura para embellecer las casillas de verificación y los botones de opción, no se requiere JavaScript. Cuenta con:

  • Básico
    • Formas  : cuadrada , curva , redonda   
    • Variantes  - Predeterminado , Relleno , Grueso   
    • Colores  : Primario , Éxito , Información , Advertencia , Peligro     
    • Tipos de color  : sólido , contorno  
    • Animaciones  : suave , tada , gelatina , pulso , rotar     
  • Switch: estilo iOS: contorno , relleno , delgado   
  • Sensible
  • Sin JavaScript
  • Iconos de fuentes personalizadas
  • Iconos SVG
  • Soporte de imagen
  • Alternar entre iconos / SVG / imágenes
  • Bloquear
  • Estado: enfoque , flotar , indeterminado   
  • Soporta frameworks: Bootstrap , Foundation , Sematic UI , Bulma , ...    
  • Personalización de SCSS
  • Admite todos los navegadores modernos, incluidos los dispositivos móviles
  • Fácil de imprimir

6. Labelauty

Github

Labelauty.js

Labelautiy es un complemento de jQuery muy agradable y liviano que brinda belleza a las casillas de verificación y botones de opción y permite etiquetas personalizadas para cada estado de las entradas (no) marcadas. Para inicializar una casilla de verificación con las etiquetas predeterminadas "Marcado" y "No marcado", una para cada estado de entrada, simplemente puede usar el siguiente código:

<input type="checkbox" data-labelauty="Don't synchronize files|Synchronize my files"/>

<script>
    $(document).ready(function(){
        $(":checkbox").labelauty();
    });
</script>

Puede cambiar las etiquetas predeterminadas (consulte la sección Opciones) o asignar etiquetas personalizadas a cada casilla de verificación.

5. Bootstrap 4 Ti-Ta-Toggle

Github

Bootstrap 4 Ti-Ta-Toggle

Ti-Ta-Toggle Usando impresionantes botones de alternancia sin Javascript o cualquier otra lógica, que no sean elementos de forma plana. El patrón es el mismo que Twitter-Bootstrap. Por lo que se puede implementar sin una brisa. Brinda soporte para los siguientes navegadores: Internet Explorer 9/10/11, Edge, FireFox, Safari, Chrome, Safari Ios, Stock Android browser 4.2, Chrome Android. La versión 1.0.0 de TitaToggle es compatible con Bootstrap v3.xx

4. jQuery Toggles

Github

jQuery Toggles

Toggles es un complemento ligero de jQuery que crea botones de alternancia fáciles de diseñar. Debes especificar la clase para el tema específico que deseas utilizar. En este caso estamos usando toggle-modern. La clase de alternancia es simplemente lo que usaremos como nuestro selector para inicializarla:

<div class="toggle toggle-modern">

Los temas que podríamos haber utilizado son:

  • suave
  • ligero
  • oscuro
  • iphone
  • moderno

Por supuesto, puede escribir sus propios temas / modificar el estilo.

3. Bootstrap Toggle

Github

Bootstrap Toggle Plugin

 Bootstrap Toggle es un complemento Bootstrap altamente flexible que convierte casillas de verificación en conmutadores. Para comenzar, incluye el complemento en tu proyecto y simplemente agrega el atributo data-toggle="toggle" para convertir las casillas de verificación en conmutadores.

2. iCheck

Github

iCheck Plugin

iCheck es un gran complemento para crear casillas de verificación y botones de opción personalizables para jQuery y Zepto. La v2.0 también está en camino y obtuvo un gran aumento de rendimiento, muchas opciones y métodos nuevos. Está en un estado de candidato de lanzamiento, por lo que puede intentar usarlo. Este complemento ofrece:

  • Entradas idénticas en diferentes navegadores y dispositivos  , tanto de escritorio como móviles 
  • Compatibilidad con dispositivos táctiles  : iOS, Android, BlackBerry, Windows Phone, Amazon Kindle
  • Entradas accesibles teclado  - , , y otros accesos directos Tab Spacebar Arrow up/down 
  • Libertad de personalización  : use cualquier HTML y CSS para diseñar entradas (pruebe 6 máscaras listas para Retina ) 
  • Las  bibliotecas jQuery y Zepto JavaScript son compatibles con un solo archivo
  • Entradas accesibles desde el lector de pantalla  : atributos ARIA para VoiceOver y otros  
  • Tamaño ligero  : 1 kb comprimido en gzip

1. Switchery

Github

Switchery Demo

Switchery es un componente simple que lo ayuda a convertir tus entradas de casilla de verificación HTML predeterminadas en hermosos interruptores de estilo iOS 7 en solo unos simples pasos. Puede personalizar fácilmente los interruptores para que combinen perfectamente con tu diseño. Licenciado bajo la licencia MIT. Compatible con todos los navegadores modernos: Chrome, Firefox, Opera, Safari, IE8 +.

Si conoces otro componente de código abierto para reemplazar esas desagradables casillas de verificación predeterminadas del navegador, compártelo con la comunidad en el cuadro de comentarios.

Esto podria interesarte

Conviertete en un programador más sociable