Un exemple de code explique l'onglet dynamique jquery easyui page_jquery

Des onglets peuvent être facilement ajoutés à l'aide de jQuery EasyUI. Il vous suffit d'appeler la méthode 'add'.

function addTab(title, href,icon){ 
  var tt = $('#tabs'); 
  if (tt.tabs('exists', title)){//如果tab已经存在,则选中并刷新该tab     
    tt.tabs('select', title); 
    refreshTab({tabTitle:title,url:href}); 
  } else { 
    if (href){ 
      var content = '<iframe scrolling="no" frameborder="0" src="'+href+'" style="width:100%;height:100%;"></iframe>'; 
    } else { 
      var content = '未实现'; 
    } 
    tt.tabs('add',{ 
      title:title, 
      closable:true, 
      content:content, 
      iconCls:icon||'icon-default' 
    }); 
  } 
} 
/**   
 * 刷新tab 
 * @cfg 
 *example: {tabTitle:'tabTitle',url:'refreshUrl'} 
 *如果tabTitle为空，则默认刷新当前选中的tab 
 *如果url为空，则默认以原来的url进行reload 
 */ 
function refreshTab(cfg){ 
  var refresh_tab = cfg.tabTitle&#63;$('#tabs').tabs('getTab',cfg.tabTitle):$('#tabs').tabs('getSelected'); 
  if(refresh_tab && refresh_tab.find('iframe').length > 0){ 
  var _refresh_ifram = refresh_tab.find('iframe')[0]; 
  var refresh_url = cfg.url&#63;cfg.url:_refresh_ifram.src; 
  //_refresh_ifram.src = refresh_url; 
  _refresh_ifram.contentWindow.location.href=refresh_url; 
  } 

Le code ci-dessus est simple et facile à comprendre. Le code n'est qu'un commentaire. Si vous avez des questions, laissez-moi un message.

ps : le plug-in d'onglets de jQuery Easyui propose deux manières de charger le contenu d'un onglet (onglet) : "requête à distance href" et "contenu local".

Caractéristiques des deux :

Caractéristiques du chargement des données en mode href :

Seul le contenu à l'intérieur de l'élément body de la page chargée sera chargé, c'est-à-dire que la requête ajax de jQuery n'est que le fragment html.
Il existe un effet de masquage lors du chargement de l'URL distante, c'est-à-dire l'effet "En attente...", qui offre une meilleure expérience utilisateur.
Lorsque la mise en page de la page chargée est plus complexe ou que de nombreux scripts js doivent être exécutés, le codage doit souvent être prudent et des problèmes sont susceptibles de survenir, qui seront discutés en détail plus tard.

Caractéristiques des données de chargement de contenu :

C'est plus flexible. Vous pouvez épeler le code html dans le script puis l'attribuer à l'attribut content de l'onglet. Cependant, cette façon d'écrire rendra le code moins lisible.
Vous pouvez attribuer une iframe au contenu, et rien ne peut être accompli en intégrant une iframe.
L'utilisation d'iframe entraînera le chargement répété du client js, ce qui gaspillera des ressources. Par exemple, si votre page principale doit faire référence à la bibliothèque easyui, votre iframe devra également la référencer, et un gaspillage se produira.