0

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

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

在此处输入图像描述

因此，当我按下重新加载图标时，如何才能拥有实际的重新加载功能？

这是那个文件，它很短，一分钟内读完 标签文件

更新：

刷新功能：

$(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链接

4

1 回答 1

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
  • 图标.css
  • 易UI.css
于 2012-04-07T13:58:05.383 回答