Custom Checkboxes / ImageCMS Blog

Task

Get the opportunity to style checkboxes with the full functionality of the standard ones, with the ability to leave the standard ones when javascript is turned off, and arm them with various callbacks and custom events. Have the ability to change the state of the checkbox group.

View jsfiddle example

Download source from github

Problem to be solved

It is necessary to be able to change one of the states of a stylized checkbox on the fly:

• check
• don't check
• in focus
• zeizeybleny
• zeizeybleny and cheknutiy
• hammered and in focus

At the same time, give some classes to him + to his parent (which would correspond to the design).

The ability to hold for each change of the checkbox the corresponding event and process it.

To work on all popular browsers.

How it works

HTML:

focus checked

CSS:

A class b_nin styles should have a rule background-image:nonein order to save standard checkboxes when javascript is turned off.

JS:

$(‘.frame-checks-not-standart’).nStCheck();

What else can i know

1. Options

   All parameters have a default value.
   
   

   • wrapper (jQuery object)

     The wrapper element by which the checkbox will be switched;
     
     

   • elCheckWrap (jQuery selector)

     The wrapper element, which will be used to display the various states of the checkbox;
     
     

   • classRemove

     name of the class to be removed from $(elCheckWrap) (allows you to leave the standard or use a non-standard display of checkboxes).
     
     

   • evCond (boolean type)

     If the true method is called trigger, otherwise the method is called after;
     
     

   • trigger (method)

     when called, it receives four parameters:
     
     • the object in the context of which the plugin is called;
     • wrapper;
     • elCheckWrap;
     • event object (event handler functions).
     
     

   • after (method)

     when called, gets the same parameters as trigger. If used, then the state of the checkbox does not change, it can be changed directly in the function (this is necessary, for example, if we are waiting for a response from the server);
     
     
   
   

2. Methods

   All methods accept a single parameter $(elCheckWrap)- if the method is called as a function. If the method is called in context $(elCheckWrap), then in the handler function it takes the value of the operator this.
   Let me remind you an example of a method call:
   

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

   
   Also, the methods of this plugin can be called like this:
   

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

   
   

   • _changeCheckStart

     The method sets the initial state (called when the plugin is initialized);
     
     

   • checkChecked

     Sets a positive attribute value checked, adds a class active for wrapper and $(elCheckWrap);
     
     

   • checkUnChecked

     Sets a negative attribute value checked, removes the class active for wrapper and $(elCheckWrap);
     
     

   • changeCheck

     Specifies the negative value of the attribute checked, if it is positive, and vice versa (a kind of toogle);
     
     

   • checkAllChecks

     Specifies a positive attribute value checked for all transferred objects;
     
     

   • checkAllReset

     Specifies a negative attribute value checked for all transferred objects;
     
     

   • checkAllDisabled

     Sets a positive attribute value disabled for all transferred objects, adds a class disabled to wrapper and $(elCheckWrap);
     
     

   • checkAllEnabled

     Sets a negative attribute value disabled for all transferred objects, removes the class disabled for wrapper and $(elCheckWrap);
     
     
   
   

3. Events

   Hanging all events is used with namespace ( nstcheck )
   

   • reset ( form )

     The event handler checkAllReset invokes the method for all previously not selected and checkAllChecks for previously selected;
     
     

   • mousedown ( input )

     An event handler overrides standard behavior and changes state;
     
     

   • click ( input )

     The handler invokes the method stopPropagation()on the event object;
     
     

   • 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.
     

Заключение

The plugin is equipped with the full functionality of standard checkboxes, has a compact HTML structure - presentation in comparison with the standard structure, and is also equipped with custom events and callbacks. You can stylize any state that is in the standard ones, it works with Tab traversal, the standard reset button works .