自定义自己的jQury插件

对于一个商业插件来说，自定义插件的样式是必不可少的。我们可以通过我们自己输入不同的样式，来改变开发者的默认样式。比如说最常见的 width、height、url、color等等。要是没有这些自定义的东西，那开发者开发的插件的利用价值就大大的减小了。

OK，下面的这个实例的意思是 当我们hover一个对象的时候，它能改变它的text、background、foreground三个属性，也就是文本、背景色、前景色。用户可以设定他自己想设定的值，而不是固定死的。当然，如果用户没有设置，我们会给他一个默认值。

定义这类插件的开发框架是：

$.fn.YouPlugin = function (options) {...}

为了防止一些偷懒的人，我们需要设置一些默认值，当它没有设置的时候，我们就用这些默认值。

var defaultVal = {
    Text: 'Your mouse is over',
    ForeColor: 'red',
    BackColor: 'gray'
};

那默认值和用户传进来的值是怎么联合在一起的呢？这个就需要我们在开篇的时候讲到的$.extend()知识了。

var obj = $.extend(defaultVal, options);

这样子的话，就把用户自定义的值覆盖了默认用户的值。如果用户没定义值，就用系统自定义的。

代码如下：

(function ($) {
    $.fn.textHover = function (options) {//options 经常用这个表示有许多个参数。

        var defaultVal = {

            Text: 'Your mouse is over',
            ForeColor: 'red',
            BackColor: 'gray'
        };
　　　　　　//默认值
        var obj = $.extend(defaultVal, options);

        return this.each(function () {

            var selObject = $(this);//获取当前对象

            var oldText = selObject.text();//获取当前对象的text值
            var oldBgColor = selObject.css("background-color");//获取当前对象的背景色
            var oldColor = selObject.css("color");//获取当前对象的字体的颜色
//下面两个function 实现的是鼠标移入hover和移出的效果。
            selObject.hover(function () {//定义一个鼠标移入hover方法。

                selObject.text(obj.Text);//进行赋值
                selObject.css("background-color", obj.BackColor);//进行赋值
                selObject.css("color", obj.ForeColor);//进行赋值
            },
            function () {//鼠标移出效果
                selObject.text(oldText);
                selObject.css("background-color", oldBgColor);
                selObject.css("color", oldColor);
            }
            );
        });
    }
})(jQuery);

代码也很简单，上面都有些了解释，此刻不在罗嗦。

怎么用呢？很简单。

HTML code：

<div id="div1" class="textBar">
    Mouse over here.....
</div>
<div id="div2" class="textBar">
    Mouse over here.....
</div>

JS Code：

$(document).ready(function () {

    $('#div1').textHover({
        Text: 'I am going to over..',
        ForeColor: 'yellow',
        BackColor: 'Red'
    });
    $('#div2').textHover({ Text: 'I am second div...' });
});

就能看到效果了。

希望对你们有帮助。