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

时间：2023-01-17 10:29:24

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

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{width: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-width: 50px;

            float: left;

            margin: 0 4px;

            text-align: center;

            border: 1px solid #ccc;

            border-bottom: none;

            background: green;

            cursor: pointer;

        }

        /*#f5f5f5;min-width:80px; width: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;

            width: 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 id="tab-title"></ul><div id="tab-content"></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 = {

                width: null,

                height: null,

                onAdd: function (obj, param) { },

                close: function () { },

                onBeforeClose: function () { },

                onClose: function (value) { },

                onSelect: function () { }

            };

        })(jQuery);

        $(function () {

            $("#wrap").Tab("tabs");

            $("#wrap").Tab({

                width: "300px",

                height: "150px"

            })

            $("#wrap").Tab({

                width: "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 id="wrap">

        <!--<ul id="tab-title">

            <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 id="tab-content">

            <div>

                内容1</div>

            <div class="hide">

                内容2</div>

            <div class="hide">

                内容3</div>

            <div class="hide">

                内容4</div>

        </div>-->

    </div>

</body>

</html>

相关文章