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上样式就走样了。经过查询,原来是浮动的关系。