easyui tabs 创建、刷新及关闭

最新推荐文章于 2023-04-16 10:08:28 发布

转载最新推荐文章于 2023-04-16 10:08:28 发布 · 261 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/jingyao/blog/776629

文章标签：

#python #javascript #ViewUI

本文介绍了一种使用JavaScript实现网页Tab管理的方法，包括如何添加新窗口、刷新窗口、在子页面中刷新当前Tab以及关闭当前Tab等功能。此外还提供了在当前页面获取tabs所在位置标题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

一、（1）添加新窗口：

/**
 * 添加新窗口
 * @param title 新窗口标题
 * @param url 新窗口获取地址
 */
function addTab(title, url) {
    if ($('#body-tabs').tabs('exists', title)) {
        $('#body-tabs').tabs('select', title);
        refreshTab({tabTitle: title, url: url});
    }
    else {
        $('#body-tabs').tabs('add',
            {
                title: title,
                //overflow: 'hidden',
                content: '<iframe scrolling="yes" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>',
                closable: true
                //tools: [{
                //    //iconCls: 'icon-mini-refresh',
                //    handler: function () {
                //        $('#body-tabs').tabs('select', title);
                //        refreshTab(title);
                //    }
                //}]
            });
    }
}

（2）刷新窗口：

/**
 * 刷新窗口
 * @param title
 */
function refreshTab(title,url) {
    var refresh_tab = $('#body-tabs').tabs('getSelected');
    var _refresh_ifram = refresh_tab.find('iframe')[0];
    var refresh_url = _refresh_ifram.src;
    _refresh_ifram.contentWindow.location.href = refresh_url;
}

二、（1）窗口内创建新窗口：

function testAddSubPage(title, url) {
    var jq = top.jQuery;//跳出框架
    if (jq("#body-tabs").tabs('exists', title)) {
        jq("#body-tabs").tabs('select', title);
        refreshTab1(title,url);
    } else {
        var content = '<iframe scrolling="yes" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>';
        jq("#body-tabs").tabs('add', {
            title: title,
            content: content,
            closable: true
        });
    }
}

（2）刷新窗口内创建的新窗口：

function refreshTab1(title,url) {
    var jq = top.jQuery;//跳出框架
    var refresh_tab = jq('#body-tabs').tabs('getSelected');
    var _refresh_ifram = refresh_tab.find('iframe')[0];
    var refresh_url = _refresh_ifram.src;
    _refresh_ifram.contentWindow.location.href = url;
}

三、在当前页面获取tabs所在位置标题：

$('#body-tabs').tabs({
        onSelect: function (title,index) {
            if (title == '标题1') {
                //你要的操作
            }
        }
});

四、（1）子页面中刷新当前tab

function RefreshTab(){
   var currTab = self.parent.$("#tabs").tabs("getSelected");//获取当前tab
   var url = $(currTab.panel('options').content).attr('src');
   self.parent.$("#tabs").tabs('update',{
      tab:currTab,
      options:{
         content:'<iframe scrolling= "yes" frameborder = "0" src = "url" style = "width:100%;height:100%"></iframe>'//或者用href:url
      }
   });
}

（2）子页面中关闭当前tab

function CloseThisTab(){
   self.parent.$("#tab").tabs("close","tabs的title");
}

注：若要取tabs框架外的元素，则用self.parent方法。

转载于:https://my.oschina.net/jingyao/blog/776629