H+框架新增选项卡功能扩展

H+主题选项卡扩展

最新推荐文章于 2025-07-22 12:52:06 发布

转载最新推荐文章于 2025-07-22 12:52:06 发布 · 221 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c08c2cd518825666808cd26

文章标签：

#javascript #ViewUI

本文介绍如何在H+主题中扩展选项卡功能，通过自定义JS方法实现页面按钮创建新选项卡展示页面，适用于基于Bootstrap3.3.6的扁平化主题。

H+是一个完全响应式，基于Bootstrap3.3.6最新版本开发的扁平化主题。前段时间本人做项目时刚好遇到新的需求，需要通过页面按钮创建新的选项卡展示页面，很遗憾，原框架没有提供此功能，只能自己去探索源码方法，找到js/contabs.js文件进行扩展，见于网友问我，现整理出来方便大家学习共享。

将以下方法拷贝到js/contabs.js文件中：

  /**
     * 添加选项卡（扩展）
     * @param dataUrl 请求路径
     * @param menuName tab名称
     * @param dataIndex tab标识
     * @returns
     */
    function addMenuTab(dataUrl,menuName,dataIndex) {
        // 获取标识数据
        var flag = true;
        if (dataUrl == undefined || $.trim(dataUrl).length == 0)return false;

        // 选项卡菜单已存在
        $('.J_menuTab').each(function () {
            if ($(this).data('id') == dataUrl) {
                if (!$(this).hasClass('active')) {
                    $(this).addClass('active').siblings('.J_menuTab').removeClass('active');
                    scrollToTab(this);
                    // 显示tab对应的内容区
                    $('.J_mainContent .J_iframe').each(function () {
                        if ($(this).data('id') == dataUrl) {
                            $(this).show().siblings('.J_iframe').hide();
                            return false;
                        }
                    });
                }
                flag = false;
                return false;
            }
        });

        // 选项卡菜单不存在
        if (flag) {
            var str = '<a href="javascript:;" class="active J_menuTab" data-id="' + dataUrl + '">' + menuName + ' <i class="fa fa-times-circle"></i></a>';
            $('.J_menuTab').removeClass('active');

            // 添加选项卡对应的iframe
            var str1 = '<iframe class="J_iframe" name="iframe' + dataIndex + '" width="100%" height="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataUrl + '" seamless></iframe>';
            $('.J_mainContent').find('iframe.J_iframe').hide().parents('.J_mainContent').append(str1);

            // 添加选项卡
            $('.J_menuTabs .page-tabs-content').append(str);
            scrollToTab($('.J_menuTab.active'));
        }
        return false;
    }
复制代码