自定义自己的jQury插件

时间：2022-10-20 05:54:16

对于一个商业插件来说，自定义插件的样式是必不可少的。我们可以通过我们自己输入不同的样式，来改变开发者的默认样式。比如说最常见的 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...' });

});

就能看到效果了。

希望对你们有帮助。

相关文章