自定义自己的jQury插件

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

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

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

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

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

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

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

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

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

代码如下：

1. (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：

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

JS Code：

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

就能看到效果了。

希望对你们有帮助。