logo

Mejores casillas de verificación con jQuery y CSS

En este breve tutorial, crearemos un reemplazo para las casillas de verificación predeterminadas del navegador en forma de un complemento jQuery simple. Mejorará progresivamente sus formularios, pero al mismo tiempo volverá a los controles predeterminados si JavaScript no está disponible.

HTML

El primer paso es establecer la estructura del documento HTML subyacente. Necesitaremos un formulario con casillas de verificación que luego reemplazaremos con sus versiones jQuery mejoradas.

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Better Check Boxes with jQuery and CSS | Tutorialzine Demo</title>

<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="jquery.tzCheckbox/jquery.tzCheckbox.css" />

</head>
<body>

<div id="page">

    <form method="get" action="./">
        <ul>
            <li>
                <label for="ch_effects">Display effects: </label>
                <input type="checkbox" id="ch_effects" name="ch_effects" data-on="Show effects" data-off="Hide effects" />
            </li>
            <li>
                <label for="ch_location">Enable location tracking: </label>
                <input type="checkbox" id="ch_location" name="ch_location" checked />
            </li>
            <li>
                <label for="ch_showsearch">Include me in search results: </label>
                <input type="checkbox" id="ch_showsearch" name="ch_showsearch" />
            </li>
            <li>
                <label for="ch_emails">Email notifications: </label>
                <input type="checkbox" id="ch_emails" name="ch_emails" data-on="ON" data-off="OFF" />
            </li>
        </ul>
    </form>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="jquery.tzCheckbox/jquery.tzCheckbox.js"></script>
<script src="js/script.js"></script>

</body>
</html>

El elemento contenedor principal - el #page div, mantiene nuestra forma. Dentro hay una lista desordenada con un número de label elementos que describen las casillas de verificación. Algo que es bueno desde el punto de vista de la usabilidad es que al hacer clic en una etiqueta se marcará/desmarcará la casilla de verificación correspondiente (especificada por el for atributo).

Observe el HTML5 data atributos, especificados en algunas de las etiquetas. Los usamos para adjuntar datos personalizados a cada etiqueta en un documento HTML5. En nuestro caso, los atributos determinarán las etiquetas de texto de los estados activado/desactivado de los reemplazos de casillas de verificación.

Y aquí está el marcado de nuestras casillas de verificación de reemplazo:

<span class="tzCheckBox checked">
    <span class="tzCBContent">ON</span>
    <span class="tzCBPart"></span>
</span>

Cuando se llama a nuestro complemento, recorrerá las casillas de verificación e insertará el código HTML que puede ver arriba después de cada uno, mientras que al mismo tiempo oculta el original. El checked class determina el estilo del reemplazo de la casilla de verificación (estado activado o desactivado).

Ahora pasemos al estilo.

CSS

Estamos utilizando una sola imagen de fondo PNG transparente para diseñar los reemplazos de casillas de verificación. La parte superior de la imagen es el estado marcado (encendido) y la parte inferior, el estado apagado. El ancho del reemplazo de la casilla de verificación crece con las etiquetas de texto.

jquery.tzCheckbox.css

.tzCheckBox{
    background:url('background.png') no-repeat right bottom;
    display:inline-block;
    min-width:60px;
    height:33px;
    white-space:nowrap;
    position:relative;
    cursor:pointer;
    margin-left:14px;
}

.tzCheckBox.checked{
    background-position:top left;
    margin:0 14px 0 0;
}

.tzCheckBox .tzCBContent{
    color: white;
    line-height: 31px;
    padding-right: 38px;
    text-align: right;
}

.tzCheckBox.checked .tzCBContent{
    text-align:left;
    padding:0 0 0 38px;
}

.tzCBPart{
    background:url('background.png') no-repeat left bottom;
    width:14px;
    position:absolute;
    top:0;
    left:-14px;
    height:33px;
    overflow: hidden;
}

.tzCheckBox.checked .tzCBPart{
    background-position:top right;
    left:auto;
    right:-14px;
}

.tzCheckBox span se coloca como un bloque en línea, lo que lo mantiene en la misma línea que el texto que lo rodea, al tiempo que nos brinda la capacidad de diseñar sus propiedades de margen y relleno como un elemento de bloque. También tiene asignado un posicionamiento relativo, por lo que podemos usar la técnica de las puertas correderas y mostrar el .tzCBPart abarcar con la parte restante del fondo.

Dependiendo de si mostramos el estado encendido o apagado, el .tzCPContent span está alineado a la izquierda o a la derecha, con los rellenos apropiados para que haga crecer su contenedor .tzCheckBox.

Ahora es el momento de crear el complemento jQuery real.

jQuery

Vamos a nombrar nuestro complemento tzCHeckbox . Va a tomar un objeto JavaScript, con un labels propiedad como parámetro. Esta propiedad es una matriz que especifica las etiquetas de texto que se muestran en el estado activado/desactivado.

jquery.tzCheckbox.js

(function($){
    $.fn.tzCheckbox = function(options){

        // Default On / Off labels:

        options = $.extend({
            labels : ['ON','OFF']
        },options);

        return this.each(function(){
            var originalCheckBox = $(this),
                labels = [];

            // Checking for the data-on / data-off HTML5 data attributes:
            if(originalCheckBox.data('on')){
                labels[0] = originalCheckBox.data('on');
                labels[1] = originalCheckBox.data('off');
            }
            else labels = options.labels;

            // Creating the new checkbox markup:
            var checkBox = $('<span>',{
                className   : 'tzCheckBox '+(this.checked?'checked':''),
                html:   '<span class="tzCBContent">'+labels[this.checked?0:1]+
                        '</span><span class="tzCBPart"></span>'
            });

            // Inserting the new checkbox, and hiding the original:
            checkBox.insertAfter(originalCheckBox.hide());

            checkBox.click(function(){
                checkBox.toggleClass('checked');

                var isChecked = checkBox.hasClass('checked');

                // Synchronizing the original checkbox:
                originalCheckBox.attr('checked',isChecked);
                checkBox.find('.tzCBContent').html(labels[isChecked?0:1]);
            });

            // Listening for changes on the original and affecting the new one:
            originalCheckBox.bind('change',function(){
                checkBox.click();
            });
        });
    };
})(jQuery);

Todos los cambios en el reemplazo de la casilla de verificación se propagan de nuevo a la casilla de verificación original (que está oculta, pero aún en la página). Esto también funciona al revés, como en ciertas circunstancias (cuando hace clic en un label elemento por ejemplo) la casilla de verificación original podría cambiarse. Esto activará el evento de cambio y actualizará el reemplazo.

Es importante mantener las casillas de verificación originales en la página, ya que de esta manera enviar el formulario (con o sin AJAX) también enviaría los valores correctos que el usuario ha elegido.

Usar el complemento también es bastante sencillo:

$('input[type=checkbox]').tzCheckbox({
    labels: [ 'Enable', 'Disable' ]
});

Esto selecciona todas las casillas de verificación en la página y las pasa a tzCheckbox con 'Habilitar' y 'Deshabilitar' como texto de reemplazo.

¡Con esto, nuestro complemento jQuery de reemplazo de casillas de verificación está completo!

Conclusión

Puede usar el complemento de hoy para mejorar los paneles de administración o configuración de sus aplicaciones web, o incluso crear mejores sitios móviles con él. Si, por algún motivo, se ha desactivado JavaScript en el navegador del usuario, seguirán viendo las casillas de verificación predeterminadas como alternativa.