1.1JQuery的插件分为3中类型:
(1)封装对象方法的插件(也就是对象级别的开发)
这种类型的插件是我们今天需要讲的插件。
(2)封装全局函数的插件(类级别开发)
指可以把独立的函数添加到JQuery命名空间之下。
jQuery.foo = function() {
alert('This is a test. This is only a test.');
};
jQuery.bar = function(param) {
alert('This function takes a parameter, which is "' + param + '".');
};
调用时和一个函数的一样的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');
使用命名空间
jQuery.myPlugin = {
foo:function() {
alert('This is a test. This is only a test.');
},
bar:function(param) {
alert('This function takes a parameter, which is "' + param + '".');
}
};
$.myPlugin.foo();
$.myPlugin.bar('baz');
二.第一个Jquery插件
(function ($) {
$.fn.myPlugin = function () {
this.fadeOut('normal');
};
})(jQuery);
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="MyPlugin.js" type="text/javascript"></script>
js代码:
<script type="text/javascript">
$(document).ready(function () {
$("#btn1").click(function () {
$("#div1").myPlugin();
});
});
</script>
三.插件运用在多个元素控件中。
(function ($) {
$.fn.hoverElement = function () {
this.each(function () {
$(this).hover(
function () {
$(this).addClass("Add");
},
function () {
$(this).removeClass("Remove");
}
);
})
}
})(jQuery);
HTML的代码是:
<div class="hoverText">
First Button..
</div>
<div class="hoverText">
Second Button..
</div>
<div class="hoverText">
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);
$(document).ready(function () {
$(".hoverText").hoverElement().css("color","yellow");
});
四 自定义自己的插件
(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");//获取当前对象的字体的颜色
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...' });
});