Heim >Web-Frontend >js-Tutorial >Beispielcode erklärt die dynamische Registerkarte „JQuery EasyUI' von „page_jquery'.
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?$('#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?cfg.url:_refresh_ifram.src; //_refresh_ifram.src = refresh_url; _refresh_ifram.contentWindow.location.href=refresh_url; }
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.