0

私はこのスイッチャーを使用しています： http ：//widowmaker.kiev.ua/checkbox/ そして、スイッチがオフになるとコンテナ（境界線の色）を飾るcssクラスを変更するためのカスタムコードを追加したいと思います。

CSS（sass way）

.box {
    background: none repeat scroll 0 0 rgba(246, 246, 248, 0.7);
    padding: 4px;
    @include rounded_borders(#ccc, 0px, 6px);

    & .box-border {         
    background: #FFFFFF no-repeat scroll left top;      
        @include rounded_borders(#E0E5E9, 1px, 3px);
    }
}

.JS：

(function($){
    /* Little trick to remove event bubbling that causes events recursion */
    var CB = function(e)
    {
        if (!e) var e = window.event;
        e.cancelBubble = true;
        if (e.stopPropagation) e.stopPropagation();
    };

    $.fn.checkbox = function(options) {
        /* IE6 background flicker fix */
        try { document.execCommand('BackgroundImageCache', false, true);    } catch (e) {}

        /* Default settings */
        var settings = {
            cls: 'jquery-checkbox',  /* checkbox  */
            empty: 'images/empty.png'  /* checkbox  */
        };

        /* Processing settings */
        settings = $.extend(settings, options || {});

        /* Adds check/uncheck & disable/enable events */
        var addEvents = function(object)
        {
            var checked = object.checked;
            var disabled = object.disabled;
            var $object = $(object);

            if ( object.stateInterval )
                clearInterval(object.stateInterval);

            object.stateInterval = setInterval(
                function() 
                {
                    if ( object.disabled != disabled )
                        $object.trigger( (disabled = !!object.disabled) ? 'disable' : 'enable');
                    if ( object.checked != checked )
                        $object.trigger( (checked = !!object.checked) ? 'check' : 'uncheck')
                }, 
                10 /* in miliseconds. Low numbers this can decrease performance on slow computers, high will increase responce time */
            );
            return $object;
        };
        //try { console.log(this); } catch(e) {}

        /* Wrapping all passed elements */
        return this.each(function() 
        {
            var ch = this; /* Reference to DOM Element*/
            var $ch = addEvents(ch); /* Adds custom events and returns, jQuery enclosed object */

            /* Removing wrapper if already applied  */
            if (ch.wrapper) ch.wrapper.remove();

            /* Creating wrapper for checkbox and assigning "hover" event */
            ch.wrapper = $('<span class="' + settings.cls + '"><span class="mark"><img src="' + settings.empty + '" /></span></span>');
            ch.wrapperInner = ch.wrapper.children('span:eq(0)');
            ch.wrapper.hover(
                function(e) { ch.wrapperInner.addClass(settings.cls + '-hover');CB(e); },
                function(e) { ch.wrapperInner.removeClass(settings.cls + '-hover');CB(e); }
            );

            /* Wrapping checkbox */
            $ch.css({position: 'absolute', zIndex: -1, visibility: 'hidden'}).after(ch.wrapper);

            /* Ttying to find "our" label */
            var label = false;
            if ($ch.attr('id'))
            {
                label = $('label[for='+$ch.attr('id')+']');
                if (!label.length) label = false;
            }
            if (!label)
            {
                /* Trying to utilize "closest()" from jQuery 1.3+ */
                label = $ch.closest ? $ch.closest('label') : $ch.parents('label:eq(0)');
                if (!label.length) label = false;
            }
            /* Labe found, applying event hanlers */
            if (label)
            {
                label.hover(
                    function(e) { ch.wrapper.trigger('mouseover', [e]); },
                    function(e) { ch.wrapper.trigger('mouseout', [e]); }
                );
                label.click(function(e) { $ch.trigger('click',[e]); CB(e); return false;});
            }
            ch.wrapper.click(function(e) { $ch.trigger('click',[e]); CB(e); return false;});
            $ch.click(function(e) { CB(e); });
            $ch.bind('disable', function() { ch.wrapperInner.addClass(settings.cls+'-disabled');}).bind('enable', function() { ch.wrapperInner.removeClass(settings.cls+'-disabled');});
            $ch.bind('check', function() { ch.wrapper.addClass(settings.cls+'-checked' );}).bind('uncheck', function() { ch.wrapper.removeClass(settings.cls+'-checked' );});

            /* Disable image drag-n-drop for IE */
            $('img', ch.wrapper).bind('dragstart', function () {return false;}).bind('mousedown', function () {return false;});

            /* Firefox antiselection hack */
            if ( window.getSelection )
                ch.wrapper.css('MozUserSelect', 'none');

            /* Applying checkbox state */
            if ( ch.checked )
                ch.wrapper.addClass(settings.cls + '-checked');


            if ( ch.disabled )
                ch.wrapperInner.addClass(settings.cls + '-disabled');           
        });
    }
})(jQuery);

ありがとう！

4

1 に答える 1

0 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>    
<script src="jquery-ui-1.8.24.custom.min.js" type="text/javascript"></script>
<!--This has the Effects Core and all four boxes checked in the UI Core-->
<style type="text/css">    
.menu {
    height: 35px;
    padding: 15px 20px 5px 20px;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 1.3em;
    font-weight: bold;
    display: inline;
    float: right;
    background: none;
}
.menu-hover {
    height: 35px;
    padding: 15px 20px 5px 20px;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 1.3em;
    font-weight: bold;
    display: inline;
    float: right;
    background: url(../img/header-bg2.png) repeat-x;
}
</style>
<script>
    $(document).ready(function () {
        $('.menu').hover(function () {
            setTimeout($(this).addClass("menu-hover"), 1000);
        }, function () {
            setTimeout($(this).removeClass("menu-hover"), 1000);
        });
    });
</script>

<a href="#"><div class="menu">Contact</div></a>
<a href="#"><div class="menu">Services</div></a>
<a href="#"><div class="menu">About</div></a>
<a href="index.html"><div class="menu">Home</div></a>
于 2012-10-18T06:50:42.497 に答える