跟我一起学JQuery插件开发(2)


(function( $ ) {
$.fn.myPlugin = function() {
// 这里开始写功能需求
};
})( jQuery );


现在我们需要写的插件的功能很简单,就是把一个对象给慢慢的隐藏起来。就是使用fadeOut()这个方法。
OK,我们打开 VS 2012.新建一个jscript文件,并且命名为:MyPlugin.js,并在里面添加如下代码:

复制代码 代码如下:


(function ($) {
$.fn.myPlugin = function () {
this.fadeOut('normal');
};
})(jQuery);


怎么用呢?很简单。
新建一个html页面,把jquery文件以及刚刚我们MyPlugin.js文件导入到本次页面中。如下:

复制代码 代码如下:


<script src="https://www.jb51.net/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="https://www.jb51.net/MyPlugin.js" type="text/javascript"></script>
js代码:
<script type="text/javascript">
$(document).ready(function () {
$("#btn1").click(function () {
$("#div1").myPlugin();
});
});
</script>


HTML代码:

复制代码 代码如下:


<div>
My God</div>
<input type="button" value="button" />


好的,你现在点击网页上面的按钮的时候,div就会缓缓的隐藏。。。因为我们设定的是normal嘛,里面也可以设定一些值之类的。
很兴奋的是,既然这个有智能提示,如下图:

跟我一起学JQuery插件开发

吧!
三.插件运用在多个元素控件中。
3.1 运用在多个元素控件中
在上面编写JQuery插件需要注意的地方的第四点,写道 如果要遍历 则可以用this.each方法。$("ID").each 可以遍历jquery对象、数组以及集合。
OK。知道了这样子,那么我们的新的代码如下:

复制代码 代码如下:


(function ($) {
$.fn.hoverElement = function () {
this.each(function () {
$(this).hover(
function () {
$(this).addClass("Add");
},
function () {
$(this).removeClass("Remove");
}
);
})
}
})(jQuery);


上面主要用到.each()方法进行遍历。代码很简单,就是把当前的对象的背景色css样式在“Add”和“Remove”直接切换。

HTML的代码是:

复制代码 代码如下:


<div>
First Button..
</div>
<div>
Second Button..
</div>
<div>
Third Button..
</div>


JS 代码:

复制代码 代码如下:


<script type="text/javascript">
$(document).ready(function () {
$(".hoverText").hoverElement();
});
</script>


很简单,不解释。
3.2 链式操作
链式操作?都听过吧。。。比如下面这一句话:
$("#div1").css("color", "red").addClass("Add").animate({"width":"100px"},1000);
就是能在当前的元素后面通过“.” 来实施更多的操作。这个动作特别的潇洒。
那我们要怎么才能实现这种效果呢?很简单,我能只需要把对象回去就可以了。请注意上面的第六点:插件应该返回一个JQuery对象,以便保证插件的可链式操作。
我们依旧看刚刚的例子:

复制代码 代码如下:


(function ($) {
$.fn.hoverElement = function () {
return this.each(function () {
$(this).hover(
function () {
$(this).addClass("Add");
},
function () {
$(this).removeClass("Remove");
}
);
})
}
})(jQuery);


代码都一样,唯一区别的是:this.each(function () { 这个前面加了一个 return。这样就实现了我们的链式操作。
然后 你这样:

复制代码 代码如下:


$(document).ready(function () {
$(".hoverText").hoverElement().css("color","yellow");
});


能看到 文字已经变成了yellow色的了。

四 自定义自己的插件
对于一个商业插件来说,自定义插件的样式是必不可少的。我们可以通过我们自己输入不同的样式,来改变开发者的默认样式。比如说最常见的 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);
这样子的话,就把用户自定义的值覆盖了默认用户的值。如果用户没定义值,就用系统自定义的。
代码如下:

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdjzff.html