Home >Web Front-end >JS Tutorial >Example code explains jquery easyui dynamic tab page_jquery
Tabs can be easily added using jQuery EasyUI. You just need to call the 'add' method.
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; }
The above code is simple and easy to understand. The code is just a comment. If you have any questions, please leave me a message.
ps: jQuery Easyui's tabs plug-in has two ways to load the content on a tab (tab): "href remote request" and "content local content".
Features of both:
Characteristics of loading data in href mode:
Only the content inside the body element of the loaded page will be loaded, that is, jQuery's ajax request is only the html fragment.
There is a masking effect when loading the remote URL, that is, the "Waiting..." effect, which provides a better user experience.
When the layout of the loaded page is more complex, or there are many js scripts that need to be run, coding often needs to be cautious, and problems are prone to occur, which will be discussed in detail later.
Features of content loading data:
It is more flexible. You can spell the html code in the script and then assign it to the content attribute of the tab. However, this way of writing will make the code less readable.
You can assign iframe to content, and there is nothing that cannot be accomplished by embedding an iframe.
Using iframe will cause the client js to be loaded repeatedly, which wastes resources. For example, if your main page needs to reference the easyui library, your iframe will also need to reference it, and waste will occur.