Jquery插件范例

今天学习了Javascript的闭包和jQuery编写插件的实例,乘着热乎劲,写了个小的功能。

Html

<p>Hello Javascript<p>

Javacript

/*
    This is just a test!!!
     Hilight text,user-defined css style by function format
    @author Rick.Xu
*/

(function($) {
    var defaluts =  {
        css:{"color":"black","background-color":"yellow"}
       };

    $.fn.extend({hilight:function(settings) {
        var opts = $.extend(true,{},defaluts,settings);  
        return this.each(function() {
            var $this = $(this);
            if(opts.format) {
                var txt = opts.format($this.html());
                $this.html(txt);
            }
            $this.css(opts.css);
            
        });
    }});
})(jQuery);

$(function() {
    $("p").hilight({
        css:{
            color:"red"
        },
        format:function(txt) {
            return "<I>"+txt+"</I>";
        }
    });
});

Result:

Hello Javascript

jQuery插件开发