checkboxes

not standart checkboxes

by domovoj

HTML

<fieldset>
    <form class="frame-checks-not-standart">
        <pre>
&lt;label&gt;
    &lt;span class=&quot;niceCheck b_n&quot;&gt;
        &lt;input type=&quot;checkbox&quot; tabindex=&quot;-1&quot;/&gt;
    &lt;/span&gt;
    &lt;span class=&quot;title&quot;&gt;unchecked&lt;/span&gt;
&lt;/label&gt;
        </pre>
        <legend>Not standart checkboxes</legend>
        <label>
            <span class="niceCheck b_n">
                <input type="checkbox"/>
            </span>
            <span class="title">unchecked</span>
        </label>
        <label>
            <span class="niceCheck b_n">
                <input autofocus type="checkbox" checked="checked" tabindex="1"/>
            </span>
            <span class="title">focus checked</span>
        </label>
        <label>
            <span class="niceCheck b_n">
                <input type="checkbox" checked="checked"/>
            </span>
            <span class="title">checked</span>
        </label>
        <label>
            <span class="niceCheck b_n">
                <input type="checkbox" disabled="disabled"/>
            </span>
            <span class="title">disabled</span>
        </label>
        <label>
            <span class="niceCheck b_n">
                <input type="checkbox" disabled="disabled" checked="checked"/>
            </span>
            <span class="title">disabled and checked</span>
        </label>
        <input type="reset" value="reset">
    </form>
</fieldset>
<fieldset>
    <form class="frame-checks-standart">
        <pre>
&lt;span class=&quot;niceCheck b_n&quot;&gt;
    &lt;input type=&quot;checkbox&quot; tabindex=&quot;-1&quot; id=&quot;id1&quot;/&gt;
&lt;/span&gt;
&lt;label for=&quot;id1&quot;&gt;
    &lt;span class=&quot;title&quot;&gt;unchecked&lt;/span&gt;
&lt;/label&gt;
        </pre>
        <legend>Standart checkboxes</legend>
        <span class="niceCheck b_n">
            <input type="checkbox" id="id1"/>
        </span>
        <label for="id1">
     ...

CSS

.niceCheck{background-position: 0 0;}
.niceCheck.active{background-position: 0 -40px;}

label:hover .niceCheck{background-position: 0 -20px;}
label:hover .niceCheck.active{background-position: 0 -60px;}

.niceCheck.focus, label:active .niceCheck{background-position: 0 -80px;}
.niceCheck.focus.active, label:active .niceCheck.active{background-position: 0 -100px;}

label .niceCheck.disabled{background-position: 0 -120px;}
label .niceCheck.disabled.active{background-position: 0 -140px;}

.nstcheck.niceCheck input{-moz-opacity: 0;-khtml-opacity: 0;opacity: 0;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);}/*.nstcheck - add when initialize plugin*/
.b_n.niceCheck{background: none;}

.niceCheck{float: left;margin-right: 5px;}
.niceCheck.nstcheck{position: relative;top: -2px;width: 18px;height: 19px;background-repeat: no-repeat;background-image:...

JavaScript

/*plugin nstCehck*/
(function($) {
    $.existsN = function(nabir) {
        return (nabir.length > 0);
    };
    var aC = 'active',
    dC = 'disabled',
    fC = 'focus',
    nS = "nstcheck",
    methods = {
                init: function(options) {
                    if ($.existsN(this)) {
                        var settings = $.extend({
                            wrapper: $("label:has(.niceCheck)"),
                            elCheckWrap: '.niceCheck',
                            evCond: false,
                            classRemove: 'b_n',
                            trigger: function() {
                            },
                            after: function() {
                            }
                        }, options);
                        var frameChecks = $(this),
                                wrapper = settings.wrapper,
                                elCheckWrap = settings.elCheckWrap,
                                evCond = settings.evCond,
                                classRemove = settings.classRemove,
                                after = settings.after,
                                trigger = settings.trigger

                        frameChecks.find(elCheckWrap).removeClass(dC + ' ' + aC + ' ' + fC);
                        //init event click on wrapper change state
                        frameChecks.find(wrapper).removeClass(dC + ' ' + aC + ' ' + fC).off('click.' + nS).on('click.' + nS, function(e) {
                            var $this = $(this),
                                    nstcheck = $this.find(elCheckWrap);
                            if (!$.existsN(nstcheck))
                                nstcheck = $this;
                            if (!$this.hasClass(dC)) {
                                if (!evCond) {
                                    methods.changeCheck(nstcheck);
                                    after(frameChecks, $this, nstcheck, e);
                                }
                     ...