如何在jquery easyui插件中重新加载选项卡？

Question

我正在使用jquery easyui来实现标签。但是，选项卡上没有重新加载功能。官方文档上有一个重新加载示例，但它似乎只是添加了一个重新加载图标，而不是具有实际的重载功能：

<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

Answer 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