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)代碼，需要的朋友可以參考下。

 
$(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--; 
}); 
} 

您可能感興趣的文章:

相關(guān)文章

Jquery動(dòng)態(tài)列功能完整實(shí)例
這篇文章主要介紹了Jquery動(dòng)態(tài)列功能,結(jié)合完整實(shí)例形式詳細(xì)分析了jQuery基于事件響應(yīng)及頁面元素動(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ì)顯示加載圖片加載失敗。對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
jQuery帶箭頭提示框tooltips插件集錦
這里給大家推薦幾款比較好用實(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
jQuery生成假加載動(dòng)畫效果
在使用PDFObject.js時(shí)，由于后臺(tái)需要轉(zhuǎn)換數(shù)據(jù)，在前臺(tái)顯示的時(shí)候，有很長一段時(shí)間顯示空白頁面，所以想到寫一個(gè)假的加載動(dòng)畫，下面看下實(shí)現(xiàn)代碼
2016-12-12