Wie neu laden Sie die Tabs in jquery easyui plugin?

Question

Ich benutze die jquery easyui, um Tabs zu implementieren. Auf den Registerkarten gibt es jedoch keine Reload-Funktion. Es ist ein Reload Beispiel auf amtliches Dokument, aber es scheint, dass es nur ein Reload-Symbol ist das Hinzufügen statt mit einer tatsächlichen Nachlegefunktion:

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

Deshalb, wie die tatsächlichen Nachlegefunktion haben, wenn Ich drücke das Reload Icon? Hier

ist das Dokument, es ist kurz und fertig in einer Minute tabs document

Aktualisiert lesen:

Refresh-Funktion:

$(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)} 
      }); 
     } 
    }); 
}); 

Reiter hinzufügen eine icon-reload hinzufügen wird:

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 
     }); 
    } 
} 

Das Symbol in 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> 

Wie verwende ich icon-reload um die Funktion aufzurufen die Registerkarte neu zu laden?

jsfiddle link added

Answer 1

Dieses Refresh-Symbol sollte nicht den Inhalt des Registerkarte aktualisieren, aber Sie können das Plugin, dies zu tun zwicken.

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');​ 

Arbeits jsFiddle hier: 01.230.

Beachten Sie die drei Ressourcen in ressources tab auf der linken Seite (in der jsFiddle Website):

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