Задача
Получить возможность стилизовать чекбоксы с полным функционалом стандартных, с возможностью оставить стандартные при выключенном 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();
Что еще можно знать
Параметры
Все параметры имеют дефолтное значение.
Элемент-обертка, по которому будет производиться переключение чекбокса;wrapper
(jQuery объект)
Элемент-обертка, который и будет использоваться для отображения различных состояний чекбокса;elCheckWrap
(jQuery селектор)
название класса, который надо удалить уclassRemove
$(elCheckWrap)
(позволяет оставлять стандартное или же использовать нестандартное отображение чекбоксов).
ЭслиevCond
(булевый тип)true
будет вызван методtrigger
, иначе будет вызван методafter
;
при вызове получает четыре параметра:trigger
(метод)
- объект, в контексте которого вызван плагин;
wrapper
;elCheckWrap
;- объект события (функции обработчика события).
при вызове получает те же параметры, что иafter
(метод)trigger
. Если используется, то состояние чекбокса не меняется, его можно изменить непосредственно в функции (это нужно, к примеру, если мы ждем ответ от сервера);
Методы
Все методы принимают единственный параметр$(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)
;
События
Навешивание всех событий используется с 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)
Обработчик события “повешен” на элемент wrapper (изменяет состояние).click
(wrapper
)
Кастомные события
Навешивание всех кастомных событий происходит с 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.