Heim > Web-Frontend > js-Tutorial > Hauptteil

Beispielcode erklärt die dynamische Registerkarte „JQuery EasyUI' von „page_jquery'.

WBOY
Freigeben: 2016-05-16 15:31:42
Original
1055 Leute haben es durchsucht

Tabs können einfach mit jQuery EasyUI hinzugefügt werden. Sie müssen nur die Methode „add“ aufrufen.

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; 
  } 
Nach dem Login kopieren

Der obige Code ist einfach und leicht zu verstehen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht.

ps: Das Tabs-Plugin von jQuery Easyui bietet zwei Möglichkeiten, den Inhalt auf einem Tab (Tab) zu laden: „href remote request“ und „content local content“.

Merkmale von beiden:

Eigenschaften des Ladens von Daten im href-Modus:

Nur ​​der Inhalt im Body-Element der geladenen Seite wird geladen, d. h. die Ajax-Anfrage von jQuery ist nur das HTML-Fragment.
Beim Laden der Remote-URL kommt es zu einem Maskierungseffekt, also dem „Warten…“-Effekt, der für ein besseres Benutzererlebnis sorgt.
Wenn das Layout der geladenen Seite komplexer ist oder viele JS-Skripte ausgeführt werden müssen, muss beim Codieren häufig vorsichtig vorgegangen werden, und es kann zu Problemen kommen, die später ausführlich besprochen werden.

Funktionen von Daten zum Laden von Inhalten:

Es ist flexibler, den HTML-Code im Skript zu buchstabieren und ihn dann dem Inhaltsattribut der Registerkarte zuzuweisen. Diese Schreibweise macht den Code jedoch weniger lesbar.
Sie können Inhalten Iframes zuweisen, und es gibt nichts, was nicht durch die Einbettung eines Iframes erreicht werden kann.
Die Verwendung von Iframe führt dazu, dass die Client-JS wiederholt geladen werden, was Ressourcen verschwendet. Wenn Ihre Hauptseite beispielsweise auf die EasyUI-Bibliothek verweisen muss, muss auch Ihr Iframe darauf verweisen, was zu Verschwendung führt.

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage