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

в 17:19, , рубрики: css, html, html-верстка, imagecms shop, javascript, Блог компании ImageCMS, верстка, метки: , , , , ,

Задача

Получить возможность стилизовать чекбоксы с полным функционалом стандартных, с возможностью оставить стандартные при выключенном 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-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

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js