jQuery+HTML5+CSS3制作支持響應式布局時間軸插件
691
2024-02-22
通過使用 jQuery EasyUI 可以很容易地添加 Tabs。您只需要調用 '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="http://www.gimoo.net/t/1904/5cbd6671d0faa.html'+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; }
以上代碼簡單易懂,代碼就是注釋,有疑問歡迎給我留言。
ps: jQuery Easyui 的tabs插件有兩種方式加載某個tab(標簽頁)上的內容:“href遠程請求”和“content本地內容”。
兩者特點:
href方式加載數據的特點:
被加載的頁面只有body元素內部的內容才會被加載,也就是jQuery的ajax請求的只是html片段。
加載遠程url時有遮罩效果,也就是“等待中……”效果,用戶體驗較好。
當加載的頁面布局較為復雜,或者有較多的js腳本需要運行的時候,編碼往往就需要謹慎了,容易出問題,后面會詳細談。
content方式加載數據的特點:
比較靈活,你可以在腳本里面拼寫html代碼,然后賦值給tab的content屬性,不過這種寫法會使得代碼易讀性變差。
可以把iframe賦給content,把一個iframe嵌入也就沒有什么不能完成的了。
使用iframe會造成客戶端js重復加載,浪費資源,比如說你主頁面要引用easyui的庫,你的iframe也要引用,浪費就產生了。
#免責聲明#
本站[綠夏技術導航]提供的一切軟件、教程和內容信息僅限用于學習和研究目的;不得將上述內容用于商業或者非法用途,否則,一切后果請用戶自負。本站信息來自網絡收集整理,版權爭議與本站無關。您必須在下載后的24個小時之內,從您的電腦或手機中徹底刪除上述內容。如果您喜歡該程序或內容,請支持正版,購買注冊,得到更好的正版服務。我們非常重視版權問題,如有侵權請郵件[admin@lxwl520.com]與我們聯系進行刪除處理。敬請諒解!