H+后台UI框架,单击按钮创建新选项卡

 点击视图创建新的选项卡并显示页面

 js调用:

// H+后台UI框架,单击按钮创建新选项卡
// 打开自定义新选项卡:<a href="#" οnclick="openTabPage('url', '自定义标题')">test</a>
// 打开系统选项卡:<a href="#" οnclick="openTabPage('url')">查看提现记录</a>
function openTabPage(url, title) {
    var wpd = $(window.parent.document);
    var mainContent = wpd.find('.J_mainContent');
    var thisIframe = mainContent.find("iframe[data-id='"+ url +"']");
    var pageTabs = wpd.find('.J_menuTabs .page-tabs-content ')
    pageTabs.find(".J_menuTab.active").removeClass("active");
    mainContent.find("iframe").css("display", "none");
    if(thisIframe.length > 0){    // 选项卡已打开
        thisIframe.css("display", "inline");
        pageTabs.find(".J_menuTab[data-id='"+ url +"']").addClass("active");
    }else{
        var menuItem = wpd.find("a.J_menuItem[href='"+ url +"']");
        var dataIndex = title == undefined ? menuItem.attr("data-index") : '9999';
        var _title = title == undefined ? menuItem.find('.nav-label').text() : title;
        var iframe = '<iframe class="J_iframe" name="iframe'+ dataIndex +'" width="100%" height="100%" src="' + url + '" frameborder="0" data-id="' + url
                + '" seamless="" style="display: inline;"></iframe>';
        pageTabs.append(
                ' <a href="javascript:;" class="J_menuTab active" data-id="'+url+'">' + _title + ' <i class="fa fa-times-circle"></i></a>');
        mainContent.append(iframe);
        //显示loading提示
        var loading = top.layer.load();
        mainContent.find('iframe:visible').load(function () {
            //iframe加载完成后隐藏loading提示
            top.layer.close(loading);
        });
    }
        
}

 html:

<!-- 此处我用的测试地址 -->
<a href="#" onclick="openTabPage('web/oee/gt/oeeDesabel.html','OEE Value')">
   <div id="mian" class="mianpoion" style="width:100%;height: 300px;"></div>
</a>

 

我从官方988元购买的,保证带文档 未压缩; 文件夹和文件结构: Hplus-v.3.0.1/ ├── css/(css文件夹,包含框架主要css及示例、插件的css文件) ├── docs/(开发文档) ├── fonts/(字体图标,包含FontAwesome字体图标和Bootstrap自带的Glyphicons字体图标) ├── img/(图片) ├── js/(js文件夹,包含框架主要的js及示例、插件的js文件) ├── plugins/(存放Flash等插件) ├── 404.html(404页面) ├── 500.html(500页面) ├── agile_board.html(任务清单) ├── article.html(文章页面) ├── badges_labels.html(徽章,标签,进度条) ├── basic_gallery.html(基本图库) ├── blog.html(文章列表) ├── blueimp.html(Blueimp相册) ├── buttons.html按钮) ├── calendar.html(日历) ├── carousel.html(图片切换) ├── chat_view.html(聊天窗口) ├── clients.html(客户管理) ├── code_editor.html(代码编辑器) ├── contacts.html(联系人) ├── css_animation.html(css动画) ├── diff.html(文本对比) ├── draggable_panels.html(拖动面板) ├── empy_page.html(空白页面) ├── faq.html(FAQ) ├── file_manager.html(文件管理) ├── form_advanced.html(高级表单) ├── form_avatar.html(富头像上传编辑器) ├── form_basic.html(基本表单) ├── form_builder.html(表单构建器) ├── form_editors.html(富文本编辑器) ├── form_file_upload.html(文件上传) ├── form_markdown.html(Markdown编辑器) ├── form_simditor.html(Simditor富文本编辑器) ├── form_validate.html(表单验证) ├── form_webuploader.html(百度 Web Uploader) ├── form_wizard.html(表单向导) ├── forum_main.html(论坛) ├── glyphicons.html(Glyphicons图标) ├── graph_echarts.html(百度ECHarts) ├── graph_flot.html(Flot图表) ├── graph_metrics.html(图表组合) ├── graph_morris.html(Morris.js图表) ├── graph_peity.html(Peity图表) ├── graph_rickshaw.html(Rickshaw图表) ├── graph_sparkline.html(Sparkline图表) ├── grid_options.html(栅格) ├── iconfont.html(阿里巴巴矢量图标库) ├── icons.html(字体图标) ├── index.html(主页) ├── index_v1.html(主页示例一) ├── index_v2.html(主页示例二) ├── index_v3.html(主页示例三) ├── index_v4.html(主页示例四) ├── index_v5.html(主页示例五) ├── invoice.html(单据) ├── invoice_print.html(单据打印) ├── jstree.html(树形视图) ├── layer.html(web弹层组件layer) ├── layerdate.html(日期选择器layerDate)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值