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 Web サイト)の 3 つのリソースに注意してください。

  • jquery.easyui.min.js
  • icon.css
  • easyui.css
于 2012-04-07T13:58:05.383 に答える