如何重新加载 jquery easyui 插件中的选项卡？答案

【问题标题】：How to reload the tabs in jquery easyui plugin?如何重新加载 jquery easyui 插件中的选项卡？
【发布时间】：2013-02-20 21:40:23
【问题描述】：

我正在使用 jquery easyui 来实现选项卡。但是，选项卡上没有重新加载功能。官方文档上有reload的例子，但是好像只是添加了reload图标，没有实际的reload功能：

<div title="Tab3" iconCls="icon-reload" closable="true" style="padding:20px;display:none;">

那么，当我按下重载图标时，如何才能拥有真正的重载功能呢？

这是那个文件，它很短，一分钟读完 tabs document

更新：

刷新功能：

$(document).ready(function(){
    $('#tt').tabs({
        onSelect: function (title) {
            var currTab = $('#tabs').tabs('getTab', title);
            var iframe = $(currTab.panel('options').content);
            var src = iframe.attr('src');
            $('#tt').tabs('update', {
                tab: currTab, options: { content: createFrame(src)}
            });
         }
    });
});

添加标签会添加一个icon-reload:

function addTab(title, url){  
    if ($('#tt').tabs('exists', title)){  
        $('#tt').tabs('select', title);  
    } else {  
        var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';  
        $('#tt').tabs('add',{  
            title:title, 
            iconCls:'icon-reload', 
            content:content, 
            closable:true
        });  
    }  
}

html中的图标：

<a href="javascript:void(0)" class="tabs-inner">
 <span class="tabs-title tabs-closable tabs-with-icon">Create List</span>
 <span class="tabs-icon icon-reload"></span>
</a>

如何使用icon-reload调用函数重新加载标签？

jsfiddle link added

【问题讨论】：

jsfiddle 你的代码：jsfiddle.net
另一个包含一些信息的类似帖子：stackoverflow.com/questions/1634909/…
你想重新加载标签内的内容吗？
@jeffery_the_wind 谢谢，这是针对 jquery ui 而不是 jquery easy ui，我发现它们的行为方式不同
那个图标并没有像你想象的那样做。查看此演示，并注意第一个选项卡上的灰色小按钮：jeasyui.com/easyui/demo/tabs.html 该按钮实际上可以执行您想要的操作，查看源代码以了解他们是如何添加它的。

标签： javascript jquery jquery-easyui

【解决方案1】：

此刷新图标不应该更新选项卡的内容，但您可以调整插件来这样做。

HTML：

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">  
</div>

CSS：

.icon-reload {
    cursor: pointer;
}

jQuery：

$('#tt').tabs({
    border: false,
    onSelect: function(title) {
        //alert(title+' is selected');  
    }
}); 

function addTab(title, url) {
    if ($('#tt').tabs('exists', title)) {
        $('#tt').tabs('select', title);
    } else {
        var content = 'added tab';
        $('#tt').tabs('add', {
            title: title,
            iconCls: 'icon-reload',
            content: content,
            closable: true
        });
    }
}

function myTabUpdate(index) {
    return Math.random() + ' index ' + index;
}

$(".icon-reload").live('click', function() {
    var t = $('#tt');  
    var tabs = t.tabs('tabs');  
    var tabIndex = $(this).closest('li').index();

    $('#tt').tabs('update', {
        tab: tabs[tabIndex],
        options: {
            content: myTabUpdate(tabIndex)
        }
    });
});

addTab('Tab1', 'http://google.com');
addTab('Tab2', 'http://google.com');
addTab('Tab3', 'http://google.com');

在这里工作 jsFiddle：http://jsfiddle.net/YvdjR/4/

注意左侧ressources tab 中的三个资源（在 jsFiddle 网站中）：

jquery.easyui.min.js
icon.css
easyui.css

【讨论】：