И снова checkbox

В этом уроке будем, как и в недавнем, создавать более симпатичную форму checkbox с помощью jQuery плагина.

Разметка HTML

Сначала образуем структуру нашего документа html. Нам естественно понадобится форма с чекбоксами, которые позже заменим более соверменными и симпатичными.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Checkbox с jQuery и CSS</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css" />
    <link rel="stylesheet" type="text/css" href="jquery.tzCheckbox/jquery.tzCheckbox.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script src="jquery.tzCheckbox/jquery.tzCheckbox.js"></script>
    <script src="js/script.js"></script>
</head>
<body>

<div id="page">

    <form method="get" action="./">
        <ul>
            <li>
                <label for="ch_effects">Показать эффекты: </label>
                <input type="checkbox" id="ch_effects" name="ch_effects" data-on="Показать" data-off="Скрыть" />
            </li>
            <li>
                <label for="ch_location">Включить опцию: </label>
                <input type="checkbox" id="ch_location" name="ch_location" checked />
            </li>
            <li>
                <label for="ch_showsearch">Включить меня в результаты поиска: </label>
                <input type="checkbox" id="ch_showsearch" name="ch_showsearch" />
            </li>
            <li>
                <label for="ch_emails">Уведомления по электронной почте: </label>
                <input type="checkbox" id="ch_emails" name="ch_emails" data-on="Вкл" data-off="Выкл" />
            </li>
        </ul>
    </form>

</div>

</body>
</html>


Основной контейнер div с идентификатором #page содержит нашу форму. В нутри неё находится неупорядоченный список с элементами label, которые определяют checkbox-ы.
Заметьте, что на некоторых label установлены атрибуты data HTML5. Мы их используем, чтобы подключить пользовательские данные к каждому тегу в HTML5 документе. В нашем случае атрибуты будут определять текстовые label в Вкл/Выкл в зависимости от состояния чекбокса.
И вот сама разметка наших заменяющих чекбоксов:

<span class="tzCheckBox checked">
    <span class="tzCBContent">Вкл</span>
    <span class="tzCBPart"></span>
</span>

Когда плагин будет вызван, он по циклу пройдет по всем чекбоксам и вставит html код (см. выше) после каждого, одновременно скрывая оригинал. Класс проверки (checked) определяет стилизацию чекбокса (в состоянии вкл или выкл)

CSS

Перейдем к стилям. Мы используем единственное прозрачное фоновое PNG изображение, чтобы стилизовать замену чекбокса. Верхняя часть картинки - отмеченное, вкл. состояние, нижняя часть - выключенное состояние. Ширина заменяемого чекбокса растет с текстовыми label (метками).


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;
}


Тег SPAN с классом .tzCheckBox позиционируется относительно, как inline-block.

jQuery

Назовем наш плагин tzCHeckbox.

(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);

А вызывается плагин так (мы вынесли вызов в отдельный файл)

$('input[type=checkbox]').tzCheckbox({
    labels: [ 'Включить', 'Выключить' ]
});

СКАЧАТЬСкачек: 420
7,53 Kb
Кто скачал?

ДЕМОПосмотреть
пример