jquery ui 1.7 ui.tabs 動(dòng)態(tài)添加與關(guān)閉(按鈕關(guān)閉+雙擊關(guān)閉)
更新時(shí)間：2010年04月01日 23:51:44 作者：
jquery ui 1.7 ui.tabs 動(dòng)態(tài)添加與關(guān)閉(按鈕關(guān)閉+雙擊關(guān)閉)實(shí)現(xiàn)代碼，需要的朋友可以參考下。
復(fù)制代碼 代碼如下:
$(document).ready(function(){
$('#tabs').tabs({add:addEventHandler}); //給tabs塊綁定addEventHandler事件
$('#newtabs').click(addTab);
})
var tabCounter = 1;
function addTab(){
if(tabCounter > 6){
alert('tabs can not more than 6!');
return;
}
$('<div id="new-tab-'+tabCounter+'">'+'New tab'+tabCounter+'</div>').appendTo('#tabs');
$('#tabs').tabs("add","#new-tab-"+tabCounter,'New tab'+tabCounter);
tabCounter++;
}
function addEventHandler(event,ui){
var li = $(ui.tab).parent();
$('<img src="close.gif"/>') //關(guān)閉按鈕
.appendTo(li)
.hover(function(){
var img = $(this);
img.attr('src','close_hover2.png');
},
function(){
var img = $(this);
img.attr('src','close.png');
}
)
.click(function(){ //關(guān)閉按鈕,關(guān)閉事件綁定
var li = $(ui.tab).parent();
var index = $('#tabs li').index(li.get(0));
$("#tabs").tabs("remove",index);
tabCounter--;
});
$(ui.tab).dblclick(function(){ //雙擊關(guān)閉事件綁定
var li = $(ui.tab).parent();
var index = $('#tabs li').index(li.get(0));
$("#tabs").tabs("remove",index);
tabCounter--;
});
}
您可能感興趣的文章:
- jQuery EasyUI API 中文文檔 - Tabs標(biāo)簽頁(yè)/選項(xiàng)卡
- jquery easyui 結(jié)合jsp簡(jiǎn)單展現(xiàn)table數(shù)據(jù)示例
- jquery easyui的tabs使用時(shí)的問題
- jQuery EasyUI 中文API Layout(Tabs)
- jquery-easyui關(guān)閉tab自動(dòng)切換到前一個(gè)tab
- jQuery EasyUI Tab 選項(xiàng)卡問題小結(jié)
- 基于Jquery easyui 選中特定的tab
- jQuery easyui刷新當(dāng)前tabs的方法
- jQuery EasyUI 布局之動(dòng)態(tài)添加tabs標(biāo)簽頁(yè)
- jqueryUI tab標(biāo)簽頁(yè)代碼分享
相關(guān)文章
Jquery動(dòng)態(tài)列功能完整實(shí)例
這篇文章主要介紹了Jquery動(dòng)態(tài)列功能,結(jié)合完整實(shí)例形式詳細(xì)分析了jQuery基于事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)屬性操作實(shí)現(xiàn)的動(dòng)態(tài)列顯示功能相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
jQuery實(shí)現(xiàn)類似滑動(dòng)門切換效果的層切換
滑動(dòng)門切換效果想必大家都有見到過吧，在本文為大家介紹下jQuery是如何實(shí)現(xiàn)層切換的2013-09-09
基于jQuery實(shí)現(xiàn)仿微博發(fā)布框字?jǐn)?shù)提示
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)仿微博發(fā)布框字?jǐn)?shù)提示的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07
Jquery promise實(shí)現(xiàn)一張一張加載圖片
通過jquery promise實(shí)現(xiàn)一張一張的連續(xù)圖片的加載功能，當(dāng)圖片加載錯(cuò)誤，超時(shí)后會(huì)顯示加載圖片加載失敗。對(duì)jquery promise實(shí)現(xiàn)加載圖片的相關(guān)資料感興趣的朋友參考下2015-11-11
jquery獲取select,option所有的value和text的實(shí)例
下面小編就為大家?guī)硪黄猨query獲取select,option所有的value和text的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
jQuery實(shí)現(xiàn)下拉框功能實(shí)例代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)下拉框功能實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-05-05
這里給大家推薦幾款比較好用實(shí)用易用的jQuery帶箭頭提示框tooltips插件，兼容性都很不錯(cuò)，大家根據(jù)需要自由選擇吧2014-11-11
用jquery實(shí)現(xiàn)學(xué)校的校歷(asp.net+jquery ui 1.72)
學(xué)校日歷有以下幾個(gè)特點(diǎn)：1顯示本周是本學(xué)期的第幾周；2顯示今日事件；3特殊顯示有事件的日期，點(diǎn)擊該日期顯示本日事件。2010-01-01
jQuery使用$.ajax進(jìn)行即時(shí)驗(yàn)證實(shí)例詳解
這篇文章主要介紹了jQuery使用$.ajax進(jìn)行即時(shí)驗(yàn)證的方法,以完整實(shí)例形式較為詳細(xì)的分析了jQuery前臺(tái)控制ajax交互與后臺(tái)asp.net響應(yīng)處理的詳細(xì)實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-12-12
在使用PDFObject.js時(shí)，由于后臺(tái)需要轉(zhuǎn)換數(shù)據(jù)，在前臺(tái)顯示的時(shí)候，有很長(zhǎng)一段時(shí)間顯示空白頁(yè)面，所以想到寫一個(gè)假的加載動(dòng)畫，下面看下實(shí)現(xiàn)代碼2016-12-12