GMgKe586q6suSQnyqZLlGCooeWM

Pages

Search

Thursday, February 17, 2011

Extending jQuery With Options

<script src="jquery.js"></script>

<div id="one">Winning Eleven</div>
<div id="two">Winning Eleven</div>
<div id="three">Winning Eleven</div>

<script>

(function($){
    $.fn.bigBlue = function(options){
        // set the kinds of options
        var settings = {
            'color' : 'blue',
            'size' : '50'
        }
        // use the template
        if(options){
            $.extend(settings, options);
        }
        // code goes here
        $(this).css({'color':settings.color,
                     'font-size':   settings.size});

        return $(this);
    };
})(jQuery);

$('#one').bigBlue();    // use default options
$('#two').bigBlue({'color':'lime'});
$('#three').bigBlue({'color':'pink','size':100});

</script>

Share/Bookmark

No comments:

Post a Comment