Нестандартные чекбоксы

Задача

Получить возможность стилизовать чекбоксы с полным функционалом стандартных, с возможностью оставить стандартные при выключенном javascript-е, и вооружить различными колбеками и кастомными событиями.

Посмотреть пример на jsfiddle ^[1]

Скачать исходники из github ^[2]

Как это работает

HTML:

<fieldset class="frame-checks-not-standart">
    <label>
        <span class="niceCheck b_n">
            <input autofocus type="checkbox" checked="checked" tabindex="1"/>
        </span>
        <span class="title">focus checked</span>
    </label>
</fieldset>

CSS:

Класс b_n в стилях должен иметь правило background-image:none для того, чтобы при выключенном javascript-е сберечь стандартные чекбоксы.

JS:

$(‘.frame-labels’).nStCheck();

Что еще можно знать

1. Параметры

   Все параметры имеют дефолтное значение.

   • wrapper (jQuery объект)

     Элемент-обертка, по которому будет производиться переключение чекбокса;

   • elCheckWrap (jQuery селектор)

     Элемент-обертка, который и будет использоваться для отображения различных состояний чекбокса;

   • classRemove

     название класса, который надо удалить у $(elCheckWrap) (позволяет оставлять стандартное или же использовать нестандартное отображение чекбоксов).

   • evCond (булевый тип)

     Эсли true будет вызван метод trigger, иначе будет вызван метод after;

   • trigger (метод)

     при вызове получает четыре параметра:

     • объект, в контексте которого вызван плагин;
     • wrapper;
     • elCheckWrap;
     • объект события (функции обработчика события).

   • after (метод)

     при вызове получает те же параметры, что и trigger. Если используется, то состояние чекбокса не меняется, его можно изменить непосредственно в функции (это нужно, к примеру, если мы ждем ответ от сервера);

2. Методы

   Все методы принимают единственный параметр $(elCheckWrap) — если метод вызван как функция. Если метод вызван в контексте $(elCheckWrap), то в функции обработчика принимает значение оператора this.
   Напомню пример вызова метода:

   $(‘.niceCheck’).drop(‘changeCheck’)
   

   Также методы этого плагина можно вызвать так:

   $.drop(‘changeCheck’)($(‘.niceCheck’))
   

   • _changeCheckStart

     Метод задает начальное состояние (вызывается при инициализации плагина);

   • checkChecked

     Задает положительное значение атрибута checked, добавляет класс active для wrapper и $(elCheckWrap);

   • checkUnChecked

     Задает отрицательное значение атрибута checked, убирает класс active для wrapper и $(elCheckWrap);

   • changeCheck

     Задает отрицательное значение атрибута checked, если оно положительное, и наоборот (своего рода toogle);

   • checkAllChecks

     Задает положительное значение атрибута checked для всех переданных объектов;

   • checkAllReset

     Задает отрицательное значение атрибута checked для всех переданных объектов;

   • checkAllDisabled

     Задает положительное значение атрибута disabled для всех переданных объектов, добавляет класс disabled к wrapper и $(elCheckWrap);

   • checkAllEnabled

     Задает отрицательное значение атрибута disabled для всех переданных объектов, убирает класс disabled для wrapper и $(elCheckWrap);

3. События

   Навешивание всех событий используется с namespace-ом (nstcheck)

   • reset (form)

     Обработчик события задействует метод checkAllReset для всех прежде не выбраных и checkAllChecks для прежде выбраных;

   • mousedown (input)

     Обработчик события отменяет стандартное поведение и изменяет состояние;

   • click (input)

     Обработчик задейстует метод stopPropagation() к объекту события;

   • keyup (input)

     Обработчик события отменяет стандартное поведение при нажатии клавиши «пробел» и изменяет состояние;

   • focus (input)

     Обработчик события добавляет класс focus для $(elCheckWrap) и wrapper;

   • blur (input)

     Обработчик события убирает класс focus для $(elCheckWrap) и wrapper;

   • change (input)

     Обработчик события отменяет стандартное поведение;

   • click (wrapper)

     Обработчик события “повешен” на элемент wrapper (изменяет состояние).

4. Кастомные события

   Навешивание всех кастомных событий происходит с namespace-ом (nstcheck)

   Все кастомные события записывают в объект события одно свойство:
   el ($(elCheckWrap));

   Эти события можно повесить на какой-нибудь input, который задействован в этом плагине, например так:

   $('input').on('nstcheck.cc', function(e){
        console.log(this); // $('input') - объект, в контексте которого вызывается //событие
        console.log(e.el); // выведет $(elCheckWrap)
   });
   

   • nstcheck.cc

     Настает при вызове метода checkChecked;

   • nstcheck.cuc

     Настает при вызове метода checkUnChecked;

   • nstcheck.ad

     Настает при вызове метода checkAllDisabled;

   • nstcheck.ae

     Настает при вызове метода checkAllEnabled.

Заключение

Плагин снабжен полным функционалом стандартных чекбоксов, имеет компактную структуру HTML — представление по сравнении со структурой стандартных, а также снабжен кастомными событиями и колбеками. Можно стилизовать любое состояние, которое есть в стандартных, работает при Tab обходе, работает стандартная кнопка reset.

Автор: frontMisc

Источник ^[3]