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