jQuery插件--表格隔行变色-创新互联
插件分俩种:
创新互联公司是一家朝气蓬勃的网站建设公司。公司专注于为企业提供信息化建设解决方案。从事网站开发,网站制作,网站设计,网站模板,微信公众号开发,软件开发,微信小程序,十载建站对火锅店设计等多个行业,拥有丰富的网站制作经验。·类级别组件开发:
---即给JQuery命名空间下添加新的全局函数,也称静态方法。形式如下:
jQuery.myPlugin = function (){ //do something};
例如:$.ajax(options); $.type();
·对象级别组件开发
---挂在JQuery原型下的方法,通过选择器获取的JQuery对象实例能共享该方法,称为动态方法。形式如下:
//$.fn == $.prototype$.fn.myPlugin = function () { //do somthing};
例如:.addClass(); .attr();
同时,插件也要保持JQuery链式调用的特性,链式调用的形式如下:
$.fn.myPlugin = function (){
return this.each(function (){ //return实现链式调用
//do something
});
};
----------------------------------以上就是插件机制---------------------------------
下面实现一个简单的表格隔行变色插件:
//为了更好的兼容性,前面有个分号(function($){ $.fn.tableUI = function(options){ var defaults = { evenRowClass:"evenRow", oddRowClass:"oddRow", activeRowClass:"activeRow", clickRowClass:"clickRow" } var options = $.extend(defaults, options);//$.extend(option...)返回一个对象. //为了实现链式调用,用return返回对象 return this.each(function(){ //缓存this var thisTable = $(this); $(thisTable).find("tr:even").addClass(options.evenRowClass); $(thisTable).find("tr:odd").addClass(options.oddRowClass); $(thisTable).find("tr").bind("mouseover",function(){ $(this).removeClass(options.clickRowClass).addClass(options.activeRowClass); }); $(thisTable).find("tr").bind("mouseout",function(){ $(this).removeClass(options.clickRowClass).removeClass(options.activeRowClass); }); $(thisTable).find("tr").bind("click",function(){ $(this).addClass(options.clickRowClass); }); }); }; })(jQuery);
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网站栏目:jQuery插件--表格隔行变色-创新互联
本文链接:http://scyanting.com/article/dgjpig.html