用js实现tabcontrol效果

昨天我们说到了用winform实现tabcontrol效果《浅谈C#tabcontrol应用》，今天我们谈谈怎么使用js实现类似效果。js实现的原理和winform的tabcontrol一样，同样由两部分组成即Navbar(菜单导航栏)、iframe承载容器。原理的效果图如图1所示，在标签页显示位置系统默认拥有左右切换标签的按钮，我们可以通过传参的形式来控制是否需要显示不显示。

图1 效果展示图

本控件由stabcontrol.js和stabstyle.css两个主要文件组成，图片文件在img目录下。图片名称分别为：next.png、prev.png、list.png，具体可以在stabstyle.css文件下更改对应的文件所在路径。

1、参数说明：

   //#region 构造函数
    var Tab = function (options) {
        this.needBtn = options.needBtn || false;//是否需要左右切换的按钮
        this.animatSpeed = options.animatSpeed || 150; //切换动画速度
        this.needMenu = options.needMenu || true;//是否需要所有的菜单显示
        this.containerClass = options.containerClass;//tabcontrol 承载容器
        this.pageContent = options.pageContent;//iframe 承载容器
        this.preClass = options.preClass || "";//左右切换按钮设置 上一个
        this.nextClass = options.nextClass || "";//左右切换按钮设置 下一个
        this.radius = options.radius || "0";//圆角弧度 默认为0 格式左上角 右上角 右下角 左下角
        this.sBorder = options.sBorder || "none";//设置边框样式 1px silver solid
        this.marginLefts = options.marginLefts || "8px";//设置左边距
        this.normalBackColor = options.normalBackColor || "#f6f9f9";//设置背景色
        this.normalColor = options.normalColor || "#343434";//a标签元素字体元素
        this.activeBackColor = options.activeBackColor || "#3c618a";//点击的背景色
        this.activeColor = options.activeColor || "#FFF";//点击的字体颜色
        this.refreshClass = options.refreshClass || "";//刷新按钮操作
        this.callback = options.callback || function () {//回调函数
        };
        this.createHtml();
    }
    //#endregion

这边的大部分参数是非必须的，但是有几个参数是必须传递的，那就是containerClass和pageContent。这两个的参数分别意义是承接标签页容器、承载iframe容器，这边可以传递class或id。由于这边的参数是用户自动赋值的，比如我们iframe承载器传递进来的值为"#pageContent"，那么您需要在各自的模块css中加上以下的代码，保证承载iframe能自适应大小。代码如下：

#pageContent{
    float: left;
    display: block;
    width: 100%;
    height: calc(100% - 44px);
}
#pageContent .iframe-content {
    width: 100%;
    height: 100%;
    border: none;
    display: none;
}
#pageContent .active {
    display: block;
}

上述的代码中的 #pageContent为iframe的承载容器，因此需要对其子集 .iframe-content以及 .active添加CSS样式，这样可以使得iframe的大小随着窗体的大小改变而改变。

如果您对参数needBtn赋值为true，那么就会出现下方图片中显示中的那左右按钮，左右按钮的功能为切换显示标签页，当然你也可以自己创建左右切换的按钮，然后对preClass和nextClass进行赋值同时你不需要绑定点击事件，控件将自动为你的按钮创建事件。refreshClass[刷新按钮]同理。

图2 needBtn值为true效果展示

2、调用说明：

控件初始化为CreateTab,创建标签页为GlobalAddTab以及自动创建绑定标签功能AutoTab,下方将对这三个功能进行说明及实例展示。

A、CreateTab

上述说道该功能是控件初始化即对参数进行赋值，实例如下图所示，使用该功能需要提前引用stabcontrol.js。

图3 控件初始化说明

B、GlobalAddTab

   该功能是创建标签页，为此只能针对a标签元素有效，并且你也只能传递a标签元素，具体使用看下方实例：

图4 调用举例

C、AutoTab

系统自动为你的菜单绑定点击事件，了解此功能的同时我们先看下实现代码，这边需要你的代码结构也是a标签元素。代码格式如下图：[注：下图的href中的建议为正常的链接地址]

图5 自动绑定 元素格式

实现的代码如下：

/**
 * 元素绑定 指定元素绑定 例如：$(this)
 * @returns {$}  
*/
$.fn.AutoTab = function () {
    //绑定点击事件
    $(this).each(function (index, item) {
        if ($(item).find('span').length < 2 && $(item).attr('class') != 'remove') {
            $(item).bind("click", function () {
                $.GlobalAddTab(item);
                return false;   //不跳转
            });
        }
    });
    return this;
};

js代码中有相对应的代码注释，直接贴代码：

(function ($) {

    //#region 定义
    var tempTab;//用于全局保存Tab的实例化对象
    var listUrl = new Array();//将没有加载进来的URL（a元素）保存起来，左右切换按钮判断使用
    var currentUrl;//记录当前点击的标签页
    //#endregion

    //#region 构造函数
    var Tab = function (options) {
        this.needBtn = options.needBtn || false;//是否需要左右切换的按钮
        this.animatSpeed = options.animatSpeed || 150; //切换动画速度
        this.needMenu = options.needMenu || true;//是否需要所有的菜单显示
        this.containerClass = options.containerClass;//tabcontrol 承载容器
        this.pageContent = options.pageContent;//iframe 承载容器
        this.preClass = options.preClass || "";//左右切换按钮设置 上一个
        this.nextClass = options.nextClass || "";//左右切换按钮设置 下一个
        this.radius = options.radius || "0";//圆角弧度 默认为0 格式左上角 右上角 右下角 左下角
        this.sBorder = options.sBorder || "none";//设置边框样式 1px silver solid
        this.marginLefts = options.marginLefts || "8px";//设置左边距
        this.normalBackColor = options.normalBackColor || "#f6f9f9";//设置背景色
        this.normalColor = options.normalColor || "#343434";//a标签元素字体元素
        this.activeBackColor = options.activeBackColor || "#3c618a";//点击的背景色
        this.activeColor = options.activeColor || "#FFF";//点击的字体颜色
        this.refreshClass = options.refreshClass || "";//刷新按钮操作
        this.callback = options.callback || function () {//回调函数
        };
        this.createHtml();
    }
    //#endregion

    //#region 程序初始化设置
    /**
     * 程序初始化设置
     */
    Tab.prototype.createHtml = function () {
        var self = this;

        //#region  创建html代码
        var $lhtml = '<div id="page-tab">';
        if (self.needBtn)
            $lhtml += ' <button class="tab-btn" id="page-prev"></button>';
        $lhtml += '<nav id="page-tab-content"><div id="menu-list"></div></nav>';
        if (self.needBtn)
            $lhtml += '<button class="tab-btn" id="page-next"></button>';
        if (self.needMenu)
            $lhtml += ' <div id="page-operation"><div id="menu-all"><ul id="menu-all-ul"></ul></div></div>';
        $lhtml += ' </div>';
        $(self.containerClass).append($lhtml);
        var height = $(self.containerClass).height();
        $("#page-tab").css({
            "height": height,
            "line-height": height,
        })
        if (self.needBtn) {
            var width = 60;
            if (self.needMenu)
                width = 90;
            $("#page-tab-content").css("width", "calc(100% - " + width + "px)");
        }

        // 创建右键菜单
        var contextMenu = $('' +
            '<div class="contextMenu">\n' +
            '    <div data-index="0" class="closeCurrent">关闭标签</div>\n' +
            '    <div data-index="1" class="openNew">新窗体打开</div>\n' +
            '    <div data-index="2" class="closeOther">关闭其他标签</div>\n' +
            '    <div data-index="3" class="closeLeft">关闭左边标签</div>\n' +
            '    <div data-index="4" class="closeRight">关闭右边标签</div>\n' +
            '</div>')
        $("#page-tab").append(contextMenu);

        // 提示框
        var tooltips = $('<div class="tooltips">提示框</div>');
        $("#page-tab").append(tooltips);

        //#endregion

        // 右键菜单事件绑定
        contextMenu.find("div").bind("click", function (e) {
            e.stopPropagation();
            if ($(this).hasClass("enable")) return false;
            var url = $("#menu-list a.active").data("url");//获取当前点击对象url地址
            var val = $("#menu-list a.active").data("value");//获取当前点击对象显示文本
            var _index = $("#menu-list a[data-url='" + url + "'][data-value='" + val + "']").index();
            var closeArray = [];//存储用于关闭标签页
            $("#page-tab .contextMenu").css("display", "none");
            switch ($(this).data("index")) {
                case 0://关闭标签
                    $("#menu-list a.active .menu-close").click();
                    break;
                case 1://新窗体打开
                    InvokeDragDropFrm(currentUrl);
                    $("#menu-list a.active .menu-close").click();
                    break;
                case 2://关闭其他标签
                    $("#menu-list ").find("a").each(function (index, item) {
                        if (index == _index) {
                            return false;
                        }
                        closeArray.push(item);
                    });
                    break;
                case 3://关闭左边标签
                    $("#menu-list ").find("a").each(function (index, item) {
                        if (index < _index) {
                            closeArray.push(item);
                        }
                    });
                    break;
                case 4://关闭右边标签
                    $("#menu-list ").find("a").each(function (index, item) {
                        if (index > _index) {
                            closeArray.push(item);
                        }
                    });
                    break;
            }
            //#region 执行关闭操作
            if (closeArray.length > 0) {
                for (var i = 0; i < closeArray.length; i++) {
                    var url = closeArray[i].dataset["url"];
                    var value = closeArray[i].dataset["value"];
                    var _url = url + "※" + value;//元素拼接 方便切换按钮使用
                    listUrl.splice($.inArray(_url, listUrl), 1);//移除集合元素
                    var temp = $("#menu-list a[data-url='" + url + "'][data-value='" + value + "']");
                    temp.animate({
                        "width": "0",
                    }, self.animatSpeed).remove();
                    $(self.pageContent + " .iframe-content[data-url='" + url + "'][data-value='" + value + "']").remove();
                    $("#menu-all-ul li[data-url='" + url + "'][data-value='" + value + "']").remove();
                }
                self.changeWidth();
            }
            //#endregion
        })


        //#region 如果需要创建按钮,则绑定点击事件
        if (self.needBtn) {
            //前翻页事件
            $("#page-prev").bind("click", function () {
                var index = listUrl.indexOf(currentUrl);
                if (index > 0) {
                    var _prevUrl = listUrl[index - 1];
                    var _url = _prevUrl.split("※")[0];
                    var _value = _prevUrl.split("※")[1];
                    self.changFrame(_url, _value);
                }
            });
            //向后翻页事件
            $("#page-next").bind("click", function () {
                var index = listUrl.indexOf(currentUrl);
                if (index < (listUrl.length - 1)) {
                    var _prevUrl = listUrl[index + 1];
                    var _url = _prevUrl.split("※")[0];
                    var _value = _prevUrl.split("※")[1];
                    self.changFrame(_url, _value);
                }
            });
        }

        if (self.needMenu) {
            //所有菜单按钮点击事件
            $("#page-operation").bind("click", function () {
                var menuall = $("#menu-all");
                var left = $(this).offset().left - menuall.width() + $(this).width();
                var top = $(this).offset().top + $(this).height() + 1;
                if (menuall.is(":visible")) {
                    menuall.hide();
                } else {
                    menuall.css({
                        "left": left,
                        "top": top
                    }).show();
                }
            });
            //注册点击body隐藏所有菜单事件
            $("body").bind("mousedown", function (event) {
                event = window.event || event; // 兼容IE7
                var obj = $(event.srcElement || event.target);
                if (!(event.target.id === "menu-all"
                        || event.target.id === "menu-all-ul"
                        || event.target.id === "page-operation"
                        || event.target.parentElement.id === "menu-all-ul"
                        || $(obj).is(".contextMenu,.contextMenu *")
                    )) {
                    $("#menu-all").hide();
                    $("#page-tab .contextMenu").css("display", "none");
                }
            });
        }
        //#endregion

        //#region 后退
        if (self.preClass.length > 0) {
            //绑定左右切换的按钮点击事件
            $(self.preClass).bind("click", function () {//后退按钮
                var index = listUrl.indexOf(currentUrl);
                if (index > 0) {
                    var _prevUrl = listUrl[index - 1];
                    var _url = _prevUrl.split("※")[0];
                    var _value = _prevUrl.split("※")[1];
                    self.changFrame(_url, _value);
                }
            });
        }
        //#endregion

        //#region 前进
        if (self.nextClass.length > 0) {
            $(self.nextClass).bind("click", function () {//前进按钮
                var index = listUrl.indexOf(currentUrl);
                if (index < (listUrl.length - 1)) {
                    var _prevUrl = listUrl[index + 1];
                    var _url = _prevUrl.split("※")[0];
                    var _value = _prevUrl.split("※")[1];
                    self.changFrame(_url, _value);
                }
            });
        }
        //#endregion

        //#region 刷新操作
        if (self.refreshClass.length > 0) {
            $(self.refreshClass).bind("click", function () {
                var url = currentUrl.split('※')[0];
                var val = currentUrl.split('※')[1];
                var frame = $(self.pageContent + " .iframe-content[data-url='" + url + "'][data-value='" + val + "']");
                frame.attr("src", url);
            })
        }
        //#endregion
    }
    //#endregion

    //#region 关闭菜单栏
    /**
     * 关闭菜单栏
     */
    Tab.prototype.closeMenu = function () {
        var self = tempTab;
        // 关闭动画设置
        $(this.parentElement).animate({
            "width": "0",
            "height": "0"
        }, 0, function () {
            var _url = $(this).data("url") + "※" + $(this).data("value");//元素拼接 方便切换按钮使用
            listUrl.splice($.inArray(_url, listUrl), 1);//移除集合元素
            if ($(this).hasClass("active")) {
                //active后一个菜单，如果当前为最后一个菜单，则active前一个菜单
                var linext = $(this).next();
                if (linext.length > 0) {
                    //赋值当前点击的a元素
                    currentUrl = linext.data("url") + "※" + linext.data("value");//元素拼接
                    linext.click();
                } else {
                    var liprev = $(this).prev();
                    if (liprev.length > 0) {
                        //赋值当前点击的a元素
                        currentUrl = liprev.data("url") + "※" + liprev.data("value");//元素拼接
                        liprev.click();
                    }
                }
            }
            var url = $(this).data("url");
            var value = $(this).data("value");
            $(this).remove();  //移除当前dom元素
            $(self.pageContent + " .iframe-content[data-url='" + url + "'][data-value='" + value + "']").remove();
            $("#menu-all-ul li[data-url='" + url + "'][data-value='" + value + "']").remove();
            $("#menu-all-ul li[data-url='" + currentUrl.split('※')[0] + "'][data-value='" + currentUrl.split('※')[1] + "']").addClass("active");
            self.changeWidth();
        })
    }
    //#endregion

    //#region 切换标签页
    /**
     * 切换标签页
     * @param url 链接地址
     * @param value 文本信息
     */
    Tab.prototype.changFrame = function (url, value) {
        var self = this;
        //  激活iframe

        $("#menu-list a.active").css({
            "color": self.normalColor,
            "background-color": self.normalBackColor,
        });
        $("#menu-list a.active").removeClass("active");

        var temp = $("#menu-list a[data-url='" + url + "'][data-value='" + value + "']");
        temp.addClass("active");
        if (temp.hasClass("active")) {
            temp.css({
                "color": self.activeColor,
                "background-color": self.activeBackColor,
            });
        }

        //激活menu
        $(self.pageContent + " iframe.active").removeClass("active");
        $(self.pageContent + " .iframe-content[data-url='" + url + "'][data-value='" + value + "']").addClass("active");

        //移除所有菜单中的li
        $("#menu-all-ul li.active").removeClass("active");
        $("#menu-all-ul li[data-url='" + url + "'][data-value='" + value + "']").addClass("active");

        // 将没有创建过的标签页元素放入listUrl集合中 ，用于左右切换 注：array 不能使用add
        var seldom = $("#menu-list a[data-url='" + url + "'][data-value='" + value + "']");
        var _url = url + "※" + value;//元素拼接
        if (seldom.length === 0)
            listUrl.push(_url);

        //赋值当前点击的a元素
        currentUrl = _url;
        this.changeWidth();
    }
    //#endregion

    //#region 更改标签页的大小
    //todo 更改标签页的大小
    Tab.prototype.changeWidth = function () {
        var self = this;
        //获取标签页的元素个数
        var count = $("#menu-list").find("a").length;
        if (count > 0) {
            var marginLeft = 0;
            var width = 0;
            $("#menu-list").find("a").each(function () {
                marginLeft += parseInt($(this).css("margin-left").split('px')[0]);
                marginLeft += parseInt($(this).css("border-left-width").split('px')[0]);
                marginLeft += parseInt($(this).css("border-right-width").split('px')[0]);
            });
            width = ($("#menu-list").width() - marginLeft) / (count);
            width = width > 210 ? 210 : width;
            $("#menu-list").find("a").each(function () {
                var _width = $(this).data("width");
                $(this).animate({
                    "width": (width < _width ? width : _width)
                }, self.animatSpeed);
            });
        }
    }
    //#endregion

    //#region 全局函数
    $.extend({
        //#region 初始化创建tabcontrol
        CreateTab: function (options) {
            tempTab = new Tab(options);
            return tempTab
        },
        //#endregion
        //#region 创建 page
        /**
         * 创建 page
         * @param item item 限制a标签元素
         * @constructor
         */
        GlobalAddTab: function (item) {
            var self = tempTab;
            //链接地址
            var linkUrl = item.href;
            //链接文本
            var linkHtml = item.text.trim();
            // 判断是否已经创建过标签页
            var selDom = $("#menu-list a[data-url='" + linkUrl + "'][data-value='" + linkHtml + "']");

            //没有创建过menu和显示Iframe
            if (selDom.length == 0) {

                // 创建i元素 关闭专用
                var cls = $("<i>", {
                    "class": "menu-close"
                }).bind("click", self.closeMenu);

                var sp = $("<span>" + linkHtml + "</span>")
                // 创建a元素
                var linkA = $("<a>", {
                    "href": "javascript:void(0);",
                    "data-url": linkUrl,
                    "data-value": linkHtml
                }).bind("click", function (event) {
                    event.stopPropagation();
                    $("#page-tab .contextMenu").css("display", "none");
                    self.changFrame($(this).data("url"), $(this).data("value"));
                }).bind("mousedown", function (event) {//右键功能
                    event.stopPropagation();
                    if ($(this).hasClass("active")) {
                        if (event.which == 3) {//todo (1:代表左键 2:代表中键 3:代表右键)

                            //todo 先判断是否有下标签页和上一个标签页
                            $("#page-tab .contextMenu .closeRight").removeClass("enable");
                            $("#page-tab .contextMenu .closeLeft").removeClass("enable");
                            var linext = $(this).next();
                            if (!(linext.length > 0)) //没有下一个标签页
                                $("#page-tab .contextMenu .closeRight").addClass("enable");

                            var liprev = $(this).prev();
                            if (!(liprev.length > 0))
                                $("#page-tab .contextMenu .closeLeft").addClass("enable");

                            var x = event.clientX;
                            var y = event.clientY;
                            $("#page-tab .contextMenu").css({
                                "display": "block",
                                "left": x,
                                "top": y
                            });
                        }
                    } else {
                        $("#page-tab .contextMenu").css("display", "none");
                    }
                }).append(sp).append(cls).appendTo("#menu-list");
                var height = $(self.containerClass).height();
                linkA.css({
                    "height": height,
                    "line-height": height + "px",
                    "color": self.normalColor,
                    "border-radius": self.radius,
                    "border": self.sBorder,
                    "background-color": self.normalBackColor,
                    "margin-left": self.marginLefts,
                });
                linkA.data("width", linkA.width());
                linkA.find("span").each(function () {
                    $(this).css({
                        "height": height,
                        "line-height": height + "px",
                    })
                })

                linkA.children("span").mouseenter(function (event) {
                    event.stopPropagation();
                    var txt = $(this).parent().data("value");
                    $("#page-tab .tooltips").text(txt);
                    var left = $(this).parent().offset().left;
                    var top = $(this).parent().offset().top + $(this).height() + 2;
                    $("#page-tab .tooltips").css({
                        "display": "block",
                        "left": left,
                        "top":
                        top
                    })
                })
                linkA.children("span").mouseleave(function () {
                    $("#page-tab .tooltips").css("display", "none");
                })

                // 创建iframe
                $("<iframe>", {
                    "class": "iframe-content",
                    "id": "childFrame",
                    "data-url": linkUrl,
                    "data-value": linkHtml,
                    src: linkUrl
                }).appendTo(self.pageContent);

                // 创建所有的菜单列表
                $("<li>", {
                    "html": linkHtml,
                    "data-url": linkUrl,
                    "data-value": linkHtml
                }).bind("click", function (event) {
                    self.changFrame($(this).data("url"), $(this).data("value"));
                    $("#menu-all").hide();
                    event.stopPropagation();
                }).appendTo("#menu-all-ul");
                //todo 代码注释 暂且不用
                // .on("load",function () {//程序加载的时候，给iframe的body绑定点击事件
                //         $("body", this.contentDocument).click(function (e) {
                //             $("#page-tab .contextMenu").css("display", "none");
                //         });
                //     })

                //元素拼接 方便切换按钮使用 格式为url +"※"+value
                var _url = linkUrl + "※" + linkHtml;
                listUrl.push(_url);
            }
            self.changFrame(linkUrl, linkHtml);
        }
        //#endregion
    });
    /**
     * 元素绑定 指定元素绑定 例如：$(this)
     * @returns {$}
     */
    $.fn.AutoTab = function () {
        //绑定点击事件
        $(this).each(function (index, item) {
            if ($(item).find('span').length < 2 && $(item).attr('class') != 'remove') {
                $(item).bind("click", function () {
                    $.GlobalAddTab(item);
                    return false;   //不跳转
                });
            }
        });
        return this;
    };
    //#endregion

})(jQuery);

css的完整代码如下：

/*tab所有dom*/

#page-tab,
#page-tab * {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

/*按钮样式设置*/
#page-tab button {
    background: #fff;
    border: 0;
    cursor: default;
}

/*标签页总容器*/
#page-tab {
    display: block;
    float: left;
    width: 100%;
    height: 100%;
}

/*上一个*/
#page-tab #page-prev {
    display: block;
    float: left;
    width: 30px;
    height: 100%;
    background: url("../img/prev.png") center no-repeat;
    background-size: 20px 20px;
}

/*标签页容器*/
#page-tab #page-tab-content {
    display: block;
    float: left;
    width: calc(100% - 30px);
    height: 100%;
    overflow: hidden;
}

/*下一个*/
#page-tab #page-next {
    display: block;
    float: left;
    width: 30px;
    height: 100%;
    border-left: 1px solid #F1F0F0;
    border-right: 1px solid #F1F0F0;
    background: url("../img/next.png") center no-repeat;
    background-size: 20px 20px;
}

/*标签页*/
#page-tab #menu-list {
    display: block;
    float: left;
    width: 100%;
    height: 100%;
}

#page-tab #menu-list a {
    display: block;
    float: left;
    min-width: 50px;
    height: 30px;
    line-height: 30px;
    text-decoration: none;
    font-size: 12px;
    cursor: pointer;
    background-color: #ffffff;
    transition: background-color 0.5s;
    -moz-transition: background-color 0.5s; /* Firefox 4 */
    -webkit-transition: background-color 0.5s; /* Safari and Chrome */
    -o-transition: background-color 0.5s; /* Opera */
    margin-left: 8px;
    border: none;
    max-width: 210px;
}

#page-tab #menu-list a:nth-child(1) {
    margin-left: 0px;
}

#page-tab #menu-list a:hover {
    background-color: #F1F0F0;
}

#page-tab #menu-list a.active {
    background-color: #3c618a;
    color: #FFFFFF;
    border-right: none;
    transition: color 0.5s;
    -moz-transition: color 0.5s; /* Firefox 4 */
    -webkit-transition: color 0.5s; /* Safari and Chrome */
    -o-transition: color 0.5s; /* Opera */
    transition: background-color 0.5s;
    -moz-transition: background-color 0.5s; /* Firefox 4 */
    -webkit-transition: background-color 0.5s; /* Safari and Chrome */
    -o-transition: background-color 0.5s; /* Opera */
}

#page-tab #menu-list a.active:hover {
    color: #ffffff;
}

#page-tab #menu-list a span {
    display: block;
    float: left;
    width: calc(100% - 40px);
    margin-left: 10px;
    height: 30px;
    line-height: 30px;
    /*text-overflow: ellipsis;*/
    /*white-space: nowrap;*/
    /*overflow: hidden;*/
}

/*关闭*/
#page-tab .menu-close {
    display: block;
    float: left;
    width: 30px;
    height: 30px;
    background: url("../img/close.png") center no-repeat;
    background-size: 15px 15px;
    cursor: pointer;
}

#page-tab .menu-close:hover {
    background-image: url(../img/closehover.png);
    background-size: 20px 20px;
}

/*所有菜单列表*/
#page-tab #page-operation {
    display: block;
    float: left;
    width: 30px;
    height: 100%;
    background: url("../img/list.png") center no-repeat;
    background-size: 20px 20px;
    cursor: pointer;
}

#page-tab #page-operation:hover {
    background-color: #F1F0F0;
}

/*所有的菜单*/
#menu-all {
    position: absolute;
    display: none;
    width: 140px;
    border: 1px solid silver;
    z-index: 100;
    min-height: 28px;
    overflow-y: auto;
    max-height: 260px;
    top: 0;
    right: 0;
    background-color: #ffffff;
    -moz-box-shadow: 2px 2px 10px #909090;
    -webkit-box-shadow: 2px 2px 10px #909090;
    box-shadow: 2px 2px 10px #909090;
}

#menu-all #menu-all-ul {
    width: 100%;
    height: 100%;
}

#menu-all #menu-all-ul li {
    color: #3c618a;
    height: 26px;
    line-height: 26px;
    list-style: none;
    cursor: pointer;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 12px;
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
}

#menu-all #menu-all-ul li.active {
    background-color: #3c618a;
    color: #ffffff;
}

#menu-all #menu-all-ul li:not(.active):hover {
    background-color: #F1F0F0;
}

/*右键样式设置*/
#page-tab .contextMenu {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 110px;
    border: 1px #F0F0F0 solid;
    border-radius: 2px;
    background-color: #FFFFFF;
    -moz-box-shadow: 2px 2px 10px #909090;
    -webkit-box-shadow: 2px 2px 10px #909090;
    box-shadow: 2px 2px 10px #909090;
    font-size: 12px;
    color: #343434;
}

#page-tab .contextMenu > div {
    cursor: pointer;
    display: block;
    width: 100%;
    height: 26px;
    line-height: 26px;
    float: left;
    text-align: left;
    text-indent: 18px;
    margin-top: 2px;
}

/*不可点击操作*/
#page-tab .contextMenu .enable {
    background-color: #EBEBEB;
}

#page-tab .contextMenu > div:nth-child(2) { /*分割线*/
    border-bottom: 1px #EBEBEB solid;
}

/*最后一个项*/
#page-tab .contextMenu > div:nth-child(5) {
    margin-bottom: 2px;
}

.contextMenu > div:hover {
    background-color: #E9F3FF;
}

/*提示框*/
#page-tab .tooltips {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    min-height: 28px;
    line-height: 28px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px #F0F0F0 solid;
    border-radius: 2px;
    background-color: #FFFFFF;
    -moz-box-shadow: 2px 2px 10px #909090;
    -webkit-box-shadow: 2px 2px 10px #909090;
    box-shadow: 2px 2px 10px #909090;
    font-size: 12px;
    color: #343434;
}

这边需要说明的是，js中新窗体打开中出现的代码：InvokeDragDropFrm(currentUrl);该代码是触发C#后台处理的方法，你只需要更改成网页相关的调用方法即可。 //#region 和//#endregion是将代码块包起来。

完整代码资源下载路径

预告：下一节我们将用js来实现具有联动和搜索功能的combobox。