實(shí)例代碼講解jquery easyui動態(tài)tab頁
通過使用 jQuery EasyUI 可以很容易地添加 Tabs。您只需要調(diào)用 'add' 方法即可。
function addTab(title, href,icon){
var tt = $('#tabs');
if (tt.tabs('exists', title)){//如果tab已經(jīng)存在,則選中并刷新該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 = '未實(shí)現(xiàn)';
}
tt.tabs('add',{
title:title,
closable:true,
content:content,
iconCls:icon||'icon-default'
});
}
}
/**
* 刷新tab
* @cfg
*example: {tabTitle:'tabTitle',url:'refreshUrl'}
*如果tabTitle為空，則默認(rèn)刷新當(dāng)前選中的tab
*如果url為空，則默認(rèn)以原來的url進(jìn)行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(標(biāo)簽頁)上的內(nèi)容：“href遠(yuǎn)程請求”和“content本地內(nèi)容”。
兩者特點(diǎn)：
href方式加載數(shù)據(jù)的特點(diǎn)：
被加載的頁面只有body元素內(nèi)部的內(nèi)容才會被加載，也就是jQuery的ajax請求的只是html片段。
加載遠(yuǎn)程url時有遮罩效果，也就是“等待中……”效果，用戶體驗(yàn)較好。
當(dāng)加載的頁面布局較為復(fù)雜，或者有較多的js腳本需要運(yùn)行的時候，編碼往往就需要謹(jǐn)慎了，容易出問題，后面會詳細(xì)談。
content方式加載數(shù)據(jù)的特點(diǎn)：
比較靈活，你可以在腳本里面拼寫html代碼，然后賦值給tab的content屬性，不過這種寫法會使得代碼易讀性變差。
可以把iframe賦給content，把一個iframe嵌入也就沒有什么不能完成的了。
使用iframe會造成客戶端js重復(fù)加載，浪費(fèi)資源，比如說你主頁面要引用easyui的庫，你的iframe也要引用，浪費(fèi)就產(chǎn)生了。
相關(guān)文章
網(wǎng)站如何做到完全不需要jQuery也可以滿足簡單需求
據(jù)統(tǒng)計，目前全世界57.3%的網(wǎng)站使用它。也就是說，10個網(wǎng)站里面，有6個使用jQuery。如果只考察使用工具庫的網(wǎng)站，這個比例就會上升到驚人的91.7%2013-06-06
jQuery是一個非常優(yōu)秀的 JavaScript 框架，使用簡單靈活，同時還有許多成熟的插件可供選擇。其中，jQuery 最令人印象深刻的應(yīng)用之一就是對圖片的處理，它可以讓幫助你在你的項(xiàng)目中加入各種精美的圖片展示效果2012-08-08
基于jquery實(shí)現(xiàn)左右按鈕點(diǎn)擊的圖片切換效果
這篇文章主要介紹了基于jquery實(shí)現(xiàn)左右按鈕點(diǎn)擊的圖片切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-11-11
JQuery點(diǎn)擊事件回到頁面頂部效果的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄狫Query點(diǎn)擊事件回到頁面頂部效果的實(shí)現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要為大家詳細(xì)介紹了layui導(dǎo)航欄效果的實(shí)現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章介紹了jQuery提交多個表單的小例子，有需要的朋友可以參考一下2013-06-06
Jquery 數(shù)據(jù)選擇插件Pickerbox使用介紹
目前市面上很少見或幾乎沒有這數(shù)據(jù)(對象)選擇插件.比如,點(diǎn)擊input , select 元素時彈出div(窗口),載入數(shù)據(jù)讓用戶選擇數(shù)據(jù),選擇后在填充回對應(yīng)的元素.2012-08-08
jquery怎樣實(shí)現(xiàn)ajax聯(lián)動框(二)
ajax聯(lián)動框想必大家早有所耳聞，接下來將介紹jquery實(shí)現(xiàn)另一種形式的聯(lián)動框，右邊的聯(lián)動框用jquery生成，仿照上篇的js方法修改的，感興趣的你可以參考下希望可以幫助到你2013-03-03
使用jQuery ajaxupload插件實(shí)現(xiàn)無刷新上傳文件
項(xiàng)目中會經(jīng)常用到AJAX無刷新上傳圖片，但是iframe上傳和flash插件都是比較復(fù)雜的，所以就找了一個jquery的插件。下面通過實(shí)例代碼給大家介紹使用jQuery ajaxupload插件實(shí)現(xiàn)無刷新上傳文件功能，需要的朋友參考下吧2017-04-04
jQuery實(shí)現(xiàn)動畫效果的簡單實(shí)例
本篇文章主要是對jQuery實(shí)現(xiàn)動畫效果的簡單實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01