JQuery插件写法（以Tab插件为例子）

当前位置：网站建设 > 技术支持

JQuery插件写法（以Tab插件为例子）

资料来源：网络整理时间：2023/2/14 0:03:38 共计：3604 浏览

JQuery插件写法（以Tab插件为例子）

一.前言

把JQuery某个功能封装成插件是为了能更方便的重用，提供效率。

二.效果

支持IE6和最新的chrome浏览器。

三.插件代码

				
					(function($) { //2010-11-26  $.fn.extend({ //Tab插件名称  XQHTab: function(options) { //默认值  var defaults = {
                tabSelected: "tab_selected",
                tabWidth: "100%",
                autoHeight: "true"
            }; var options = $.extend(defaults, options);

            $(this).css("width", options.tabWidth); //选项卡 this指通过当前选择器获取的JQuery对象  var tab = $(".tab_menu ul li", this); //选项内容  var tabContent = $(".tab_box > div", this); if (options.autoHeight != "true") {
                tabContent.css("height", options.autoHeight);
            } //单击选项卡  tab.click(function() {
                $(this).addClass(options.tabSelected).siblings().removeClass(options.tabSelected); var curIndex = tab.index(this);
                tabContent.eq(curIndex).show().siblings().hide();
            }); //return this使JQuery方法可链  return this;
        }
    });
})(jQuery);

　　关键代码都加注释了,应该不难理解。

四.css代码

				
					.tab{ width:98%;} .tab_menu ul{ width:98%; list-style:none;} .tab_menu li{ list-style:none; float:left; margin-right:4px; display:block; border-right:#4488BB solid 1px;border-left:#4488BB solid 1px; border-top:#4488BB solid 1px; cursor:pointer; color:#000; height:20px; width:auto; padding:5px;} .tab_box{ border:solid #4488BB 1px; padding:4px; height:auto; width:98%; float:left;} .tab_selected{ background:#4488BB;} .tab_displayNone{ display:none;} li{ background:#EEEEEE; list-style:none;}

五.插件使用方法

				
					 <script type="text/javascript"> $(function() {
            $(".tab").XQHTab();
        }); </script> <div class="tab"> <div class="tab_menu"> <ul> <li class="tab_selected">JQuery</li> <li>ExtJs</li> <li>Sliverlight</li> </ul> </div> <div class="tab_box"> <div>Hello JQuery!</div> <div class="tab_displayNone">Hello ExtJs!</div> <div class="tab_displayNone">Hello Sliverlight!</div> </div> </div>

可以通过设置autoHeight属性来控制内容的高度默认为true自动适应高低，tabWidth来控制tab的宽度,默认为100%

六.总结

由于以前用户几乎清一色的用IE6,或者用Ext或Sliverlight开发,使得对浏览器兼容方面几乎不懂。经过这次自己写插件在IE6和chorme上的测试，刚开始在IE6上都正确显示，但跑到chrome上样式就走样了。经过查询,原来是浮动的关系。

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：JQuery实现点击div以外的位置隐藏该div窗口 | ·下一条：jQuery.extend 函数详解