常用的JQuery插件有如下几种写法:
1. 对JQuery自身的扩展插件
这种插件是对JQuery自身的方法库进行扩展的。在使用的时候通过$.MethodName()的方式直接使用。
$.extend({
handleTableUI : function(table){
var thisTable = $("#" + table);
$(thisTable).find("tr").bind("mouseover", function () {
$(this).css({ color: "#ff0011", background: "blue" });
});
$(thisTable).find("tr").bind("mouseout", function () {
$(this).css({ color: "#000000", background: "white" });
});
}
});说明
当要对JQuery自身进行扩展的时候,需要采用$.extend();的形式进行开发,JQuery的extend()方法为我们提供了扩展 JQuery自身的方式,在extend()方法中,我们采用{...}的形式编写具体的方法体。其中,最重要的是要定义我们自己的扩展方法,如示例中的 handleTableUI。定义的方式是:方法名 : function(参数){ 方法体 }。通过此种方式我们就可以定义JQuery自己的扩展方法,而且这个方法可以在web页面通过智能提示显示出来。
页面中调用的代码如下:
<script type="text/javascript">
$(document).ready(function () {
$.handleTableUI("newTable");
});
</script>2、 对JQuery对象的插件开发
(function ($) {
$.fn.setTableUI = function(options){
var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow"
}
var options = $.extend(defaults, options);
this.each(function(){
var thisTable=$(this);
$(thisTable).find("tr").bind("mouseover", function () {
$(this).css({ color: "#ff0011", background: "blue" });
});
$(thisTable).find("tr").bind("mouseout", function () {
$(this).css({ color: "#000000", background: "white" });
});
});
};
})(jQuery);具体调用代码如下:
<script type="text/javascript">
$(document).ready(function () {
$("#newTable").setTableUI();
});
</script>参考资料: jquery插件写法 http://www.studyofnet.com/news/500.html
本文出自 “学习也休闲” 博客,请务必保留此出处http://studyofnet.blog.51cto.com/8142094/1439453
原文:http://studyofnet.blog.51cto.com/8142094/1439453