您的位置: 首页  >  IT文章  >  jQuery组件系列：封装标签页（Tabs）

jQuery组件系列：封装标签页（Tabs）

分类: IT文章 • 2022-09-01 15:08:29

我自己封装的组件，你也行，静态链接地址

http://www.cnblogs.com/leee/p/5190489.html

声明。最好，先把代码拷过去运行一下，其实特别丑~再往下看

我没优化，因为我木时间，上班呢。这篇文章是证明我能写组件的能力的。

需要明白的的知识点

  • $.data缓存读 写
  • prop()js对象属性和attr() DOM属性区别
  • this作用域（谁调用，this指向谁）
  • call改变作用域this，木用apply，数组麻烦
  • 原型啥东东

<!DOCTYPE>
<html>
<head>
    <title></title>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
            font: 12px/1.5 arial;
        }
        li
        {
            list-style: none;
        }
        /* #wrap{80%; margin:20px auto;}*/
        .hide
        {
            display: none;
        }
        #tab-title
        {
            height: 27px;
            border-bottom: 1px solid #ccc;
            background: red;
            overflow: hidden;
        }
        /*#ccc*/
        #tab-title li
        {
            line-height: 26px;
            min- 50px;
            float: left;
            margin: 0 4px;
            text-align: center;
            border: 1px solid #ccc;
            border-bottom: none;
            background: green;
            cursor: pointer;
        }
        /*#f5f5f5;min-80px; 80px;  */
        #tab-title .active
        {
            line-height: 27px;
            background: #fff;
        }
        #tab-content
        {
            border: 1px solid #ccc;
            border-top: none;
            padding: 20px;
        }
        .closed-icon
        {
            float: right;
            margin-right: 3px;
            display: block;
            height: 16px;
             16px;
            background: url('img/tabs_icons.png') no-repeat -32px center;
        }
        /*ie 6 7导致父节点li变高，需要处理*/
        .closed-icon:hover
        {
            background: blue url('img/tabs_icons.png') no-repeat -32px center;
        }
        /*ie6不支持，需要处理*/
    </style>
    <script src="Scripts/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        (function ($) {
            function _initTab(obj, param) {
                ///<summary>初始化所有tab（1添加序号index，2注册click事件,3注册点击图标click，添加序号index，删除事件）</summary>
                var tabtitleEle, tabContentEle;
                tabtitleEle = $("#tab-title li");
                tabContentEle = $("#tab-content div");
                for (var i = 0; i < tabtitleEle.length; i++) {
                    tabtitleEle[i].index = i; //加上一个property
                    tabContentEle[i].index = i;
                    tabtitleEle.eq(i).click(function () {
                        titleRemoveActiveNotThis(tabtitleEle, this.index);
                        contentAddHideNotThis(tabContentEle, this.index);
                    })
                }
                _iconClose();
                _setStyle(obj, param);
            }
            function titleRemoveActiveNotThis(obj, index) {
                ///<summary>移除所有tab选中状态，为当前点击tab设置选中</summary>
                obj.removeClass("active").eq(index).addClass("active");
            }
            function contentAddHideNotThis(obj, index) {
                ///<summary>隐藏所有tab，为当前点击tab移除隐藏</summary>
                obj.addClass("hide").eq(index).removeClass("hide");
            }
            function _iconClose() {
                ///<summary>点击关闭按钮时，关闭某一tab</summary>
                $(".closed-icon").unbind('click');
                $(".closed-icon").click(function () {
                    var index = $(this).parent("li").prop("index");
                    $("#tab-title li").eq(index).remove();
                    $("#tab-content div").eq(index).remove();
                    _registorIndex();
                    if (!$("#tab-title .active").prop("index")) {
                        $("#tab-title li:last").addClass("active");
                        $("#tab-content div:last").removeClass("hide");
                    }
                })
            }
            function _registorIndex() {
                var tabtitleEle, tabContentEle;
                tabtitleEle = $("#tab-title li");
                tabContentEle = $("#tab-content div");
                for (var i = 0; i < tabtitleEle.length; i++) {
                    tabtitleEle[i].index = i; //加上一个property
                    tabContentEle[i].index = i;
                }
            }
            function _setStyle(obj) {
                ///<summary>设置用户设置的样式</summary>
                ///<param name="obj" type="object">目标</param>
                var state = $.data($(obj)[0], "tabs");
               // alert('111');
                if (state) {
                   // alert('2222');
                    if (state["width"]) {
                        obj.children("#tab-title").children("li").css("width", state["width"]);
                    }
                    if (state["height"]) {
                        liHeight = parseInt(state["height"]) + 1 + 'px';
                        obj.children("#tab-title").css("height", liHeight).children("li").css("line-height", state["height"]);
                        obj.children("#tab-title").children(".active").css("line-height", liHeight);
                    }
                }
            }
            function _addTab(obj, param) {
                ///<summary>添加一个tab，并重新初始化</summary>
                ///	<param name="which" type="object">{title:"插件加",content:"",...}</param>
                var opts = $.data($(obj)[0], "tabs");
               // alert(opts['onAdd']);
                if (opts) {
                    opts.onAdd.call(obj[0], obj, param);
                }


                if (obj.children("#tab-title").children("li").length > 0) {//children()方法里面用层级选择器不能选中
                    obj.children("#tab-title").children("li").removeClass("active");
                    obj.children("#tab-title").children("li:last").after('<li class="active">' + param.title + '<span class="closed-icon"></span></li>');
                }
                else {
                    obj.children("#tab-title").append('<li class="active">' + param.title + '<span class="closed-icon"></span></li>');
                }
                if (obj.children("#tab-content").children("div").length > 0) {
                    obj.children("#tab-content").children("div").addClass("hide");
                    obj.children("#tab-content").children("div:last").after('<div>' + param.content + '</div>')
                } else {
                    obj.children("#tab-content").append('<div>' + param.content + '</div>');
                }
                _initTab(obj, param);
            }
            function _closeTab(obj, which) {
                ///	<param name="which" type="string/number">选项卡面板的标题或者索引（默认从0开始）</param>
                var index = which;
                var titleli = obj.children("#tab-title").children("li");
                var contentdiv = obj.children("#tab-content").children("div");
                if (typeof which == 'number') {
                    titleli.eq(index).remove();
                    contentdiv.eq(index).remove();
                    if (!$("#tab-title .active").prop("index")) {//处理:被删的tab是，最后一个、选中
                        $("#tab-title li:last").addClass("active");
                        $("#tab-content div:last").removeClass("hide");
                    }
                }
                else if (typeof which == 'string') {
                    for (var i = 0; i < titleli.length; i++) {
                        if ($(titleli[i]).text() == which) {
                            $(titleli[i]).remove();
                            $(contentdiv[i]).remove();
                            if (!$("#tab-title .active").prop("index")) {
                                $("#tab-title li:last").addClass("active");
                                $("#tab-content div:last").removeClass("hide");
                            }
                            break;
                        }
                    }
                }
                _initTab(obj);
            }
            //1.定义jquery的扩展方法Tab
            $.fn.Tab = function (options, param) {
                ///	<summary>
                ///	实例方法（原型）
                ///	</summary>
                ///	<param name="options" type="string">方法名</param>
                ///	<param name="param" type="object">字符串或者json对象</param>
                if (typeof options == 'string') {
                    //如果是字符串（方法和（属性事件同用）不同用），代表方法，加“return”好处1，执行对应的方法2，不再往下执行
                    return $.fn.Tab.methods[options](this, param); //this调用，然后木用
                }
                //2.将调用时候传过来的参数和default参数合并
                options = $.extend({}, $.fn.Tab.defaults, options || {});
                if (!$.data(this[0], "tabs")) {
                    $.data(this[0], "tabs", options)

                    //$.data($(this)[0], "tabs", options)
                   // alert($.data($(this)[0], "tabs").width);
                }
                //3.添加默认值
                _setStyle(this);
            }

            //5.如果传过来的是字符串，代表调用方法。
            $.fn.Tab.methods = {
                tabs: function (obj) {//在文档中，相当木有参数
                    obj.html('<ul ></div>')
                },
                add: function (obj, param) {
                    _addTab(obj, param)
                },
                close: function (obj, which) {
                    _closeTab(obj, which)
                },
                exists: function (obj) {
                },
                update: function (obj) {
                }
            };
            //6.默认参数列表
            $.fn.Tab.defaults = {
                 null,
                height: null,
                onAdd: function (obj, param) { },
                close: function () { },
                onBeforeClose: function () { },
                onClose: function (value) { },
                onSelect: function () { }
            };
        })(jQuery);
        $(function () {
            $("#wrap").Tab("tabs");
            $("#wrap").Tab({
                 "300px",
                height: "150px"
            })

            $("#wrap").Tab({
                 "80px",
                height: "27px",
                onAdd: function (o, p) {
                    //alert('1');
                }
            })
            $("#wrap").Tab("add", {
                title: "插件加的标题1",
                content: "11111111111"//<iframe src='https://www.baidu.com'></iframe>
            });
            $("#wrap").Tab("add", {
                title: "插件加的标题2",
                content: "1222221222222"//"<iframe src='https://www.baidu.com'></iframe>"
            });
            $("#wrap").Tab("add", {
                title: "插件加的标题3",
                content: "11133333333"//"<iframe src='https://www.baidu.com'></iframe>"
            });
            $("#wrap").Tab("add", {
                title: "插件加的标题4",
                content: "1114444444444"//"<iframe src='https://www.baidu.com'></iframe>"
            });
            var index = 1;
            $("#wrap").Tab("close", index);
            /* var title = "插件加的标题3";
            $("#wrap").Tab("close", title);*/

        })
    </script>
</head>
<body>
    <div >
        <!--<ul >
            <li class="active">选项1<span class="closed-icon"></span></li>
            <li>选项2<span class="closed-icon"></span></li>
            <li>选项3<span class="closed-icon"></span></li>
            <li>选项4<span class="closed-icon"></span></li>
        </ul>
        <div >
            <div>
                内容1</div>
            <div class="hide">
                内容2</div>
            <div class="hide">
                内容3</div>
            <div class="hide">
                内容4</div>
        </div>-->
    </div>
</body>
</html>

相关推荐