$.fn.extend Demo

A simple demonstation of the $.fn.extend syntax

by Nick Hulea

HTML

<ul id="defaultList">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>    
</ul>
<ul id="customList">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>   
</ul>

CSS

ul{float:left; display:inline; width:50%;}
li{position:relative; display:block; margin:10px; color:#fff; font:bold 14px/30px Arial; text-align:center;}

#defaultList li{background:red;}
#defaultList li.dark{background:darkred;}

#customList li{background:blue;}
#customList li.light{background:lightblue;}

JavaScript

$.fn.extend({
    stripeMe: function(options) {
        var defaults = {
            className: 'dark',
            pseudoSort: ':even'
        };
        options = $.extend(defaults, options);
        this.each(function() {
            $(this).children(options.pseudoSort).addClass(options.className);
        });
        return this;
    },
    nudgeMe: function(options) {
        var defaults = {
            color: 'yellow'
        };
        options = $.extend(defaults, options);
        this.each(function() {          
            $(this).hover(function(){
                $(this).css('background',options.color);
            },function(){
                $(this).css('background','transparent');
            });
        });
        return this;
    }
});

$(document).ready(function() {
    $('#defaultList').stripeMe().nudgeMe();
    $('#customList').stripeMe({'className': 'light','pseudoSort': ':odd'}).nudgeMe();
});