Задача


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



Посмотреть пример на jsfiddle
Скачать исходники из github

Проблема которую нужно решить


Надо иметь возможность на «лету» изменять одно из состояний стилизованного чекбокса:
  • чекнут
  • не чекнут
  • в фокусе
  • задизейбленый
  • задизейбленый и чекнутий
  • чекнутый и в фокусе

При этом дать какие то классы на него + на его родителя (что бы соотвествувало дизайну).

Возможность одержать на каждое изменение чекбокса соответствующее событие и обработать его.

Чтобы работало у всех популярных браузерах.

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


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-checks-not-standart’).nStCheck();


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


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

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

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

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

    • evCond (булевый тип)
      Эсли true будет вызван метод trigger, иначе будет вызван метод after;

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

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


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

    Также методы этого плагина можно вызвать так:
    $.nStCheck(‘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.