Geekly Articles each Day
📜 ⬆️ ⬇️

Custom Checkboxes

Task


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



See an example on jsfiddle
Download source from github

Problem to solve


We must be able to change one of the states of the stylized checkbox on the fly:

At the same time, to give some classes to him + to his parent (which would correspond to the design).
')
Opportunity to get the corresponding event for each change of the checkbox and process it.

To work with all popular browsers.

How it works


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:
The b_n class in styles should have a background-image:none rule in order to save standard checkboxes when javascript is off.

Js:
 $('.frame-checks-not-standart').nStCheck();


What else can you know


  1. Options
    All parameters have default value.

    • wrapper (jQuery object)
      The wrapper element that will be used to switch the checkbox;

    • elCheckWrap (jQuery selector)
      The wrapper element that will be used to display various states of the checkbox;

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

    • evCond (boolean type)
      If true the trigger method will be called, otherwise the after method will be called;

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

    • after (method)
      when called, it receives the same parameters as trigger . If used, the state of the check box 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 take a single parameter $(elCheckWrap) - if the method is called as a function. If the method is called in the context of $(elCheckWrap) , then in the handler function it takes the value of the this operator.
    Let me remind you an example of a method call:
     $('.niceCheck').nStCheck('changeCheck')

    Also the methods of this plugin can be called as follows:
     $.nStCheck('changeCheck')($('.niceCheck'))

    • _changeCheckStart
      The method sets the initial state (called when the plug-in is initialized);

    • checkChecked
      Sets the positive value of the checked attribute, adds the class active for wrapper and $(elCheckWrap) ;

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

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

    • checkAllChecks
      Sets the positive value of the checked attribute for all transferred objects;

    • checkAllReset
      Sets the negative value of the checked attribute for all transferred objects;

    • checkAllDisabled
      Sets the positive value of the attribute disabled for all objects passed, adds the class disabled to the wrapper and $(elCheckWrap) ;

    • checkAllEnabled
      Sets the negative value of the disabled attribute for all passed objects, removes the disabled class for the wrapper and $(elCheckWrap) ;


  3. Developments
    Hanging all events is used with namespace ( nstcheck )
    • reset ( form )
      The event handler uses the checkAllReset method for all previously unselected and checkAllChecks for the previously selected;

    • mousedown ( input )
      The event handler cancels the default behavior and changes the state;

    • click ( input )
      The handler attaches the stopPropagation() method to the event object;

    • keyup ( input )
      The event handler cancels the default behavior when you press the space key and changes the state;

    • focus ( input )
      The event handler adds a focus class for $(elCheckWrap) and wrapper ;

    • blur ( input )
      The event handler removes the focus class for $(elCheckWrap) and wrapper ;

    • change ( input )
      The event handler cancels the default behavior;

    • click ( wrapper )
      The event handler is “hung” on the wrapper element (changes state).


  4. Custom events
    All custom events are hung with namespace ( nstcheck )

    All custom events write one property to the event object:
    el ( $ (elCheckWrap) );

    These events can be hung on any input that is involved in this plugin, for example:
     $('input').on('nstcheck.cc', function(e){ console.log(this); // $('input') - ,     // console.log(e.el); //  $(elCheckWrap) });

    • nstcheck.cc
      It comes when you call the checkChecked method;

    • nstcheck.cuc
      It comes when calling the checkUnChecked method;

    • nstcheck.ad
      It comes when you call the checkAllDisabled method;

    • nstcheck.ae
      It comes when you call the checkAllEnabled method.


Conclusion


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

Source: https://habr.com/ru/post/204030/

More articles:


All Articles