快捷導(dǎo)航

jquery ui 1.7 ui.tabs 動態(tài)添加與關(guān)閉(按鈕關(guān)閉+雙擊關(guān)閉)

更新時間：2010年04月01日 23:51:44 作者：

jquery ui 1.7 ui.tabs 動態(tài)添加與關(guān)閉(按鈕關(guān)閉+雙擊關(guān)閉)實現(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動態(tài)列功能完整實例
這篇文章主要介紹了Jquery動態(tài)列功能,結(jié)合完整實例形式詳細分析了jQuery基于事件響應(yīng)及頁面元素動態(tài)屬性操作實現(xiàn)的動態(tài)列顯示功能相關(guān)操作技巧,需要的朋友可以參考下
2019-08-08
jQuery實現(xiàn)類似滑動門切換效果的層切換
滑動門切換效果想必大家都有見到過吧，在本文為大家介紹下jQuery是如何實現(xiàn)層切換的
2013-09-09
基于jQuery實現(xiàn)仿微博發(fā)布框字數(shù)提示
這篇文章主要為大家詳細介紹了基于jQuery實現(xiàn)仿微博發(fā)布框字數(shù)提示的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-07-07
Jquery promise實現(xiàn)一張一張加載圖片
通過jquery promise實現(xiàn)一張一張的連續(xù)圖片的加載功能，當圖片加載錯誤，超時后會顯示加載圖片加載失敗。對jquery promise實現(xiàn)加載圖片的相關(guān)資料感興趣的朋友參考下
2015-11-11
jquery獲取select,option所有的value和text的實例
下面小編就為大家?guī)硪黄猨query獲取select,option所有的value和text的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-03-03
jQuery實現(xiàn)下拉框功能實例代碼
這篇文章主要介紹了jQuery實現(xiàn)下拉框功能實例代碼的相關(guān)資料,需要的朋友可以參考下
2016-05-05
jQuery帶箭頭提示框tooltips插件集錦
這里給大家推薦幾款比較好用實用易用的jQuery帶箭頭提示框tooltips插件，兼容性都很不錯，大家根據(jù)需要自由選擇吧
2014-11-11
用jquery實現(xiàn)學(xué)校的校歷(asp.net+jquery ui 1.72)
學(xué)校日歷有以下幾個特點：1顯示本周是本學(xué)期的第幾周；2顯示今日事件；3特殊顯示有事件的日期，點擊該日期顯示本日事件。
2010-01-01
jQuery使用$.ajax進行即時驗證實例詳解
這篇文章主要介紹了jQuery使用$.ajax進行即時驗證的方法,以完整實例形式較為詳細的分析了jQuery前臺控制ajax交互與后臺asp.net響應(yīng)處理的詳細實現(xiàn)技巧,需要的朋友可以參考下
2015-12-12
jQuery生成假加載動畫效果
在使用PDFObject.js時，由于后臺需要轉(zhuǎn)換數(shù)據(jù)，在前臺顯示的時候，有很長一段時間顯示空白頁面，所以想到寫一個假的加載動畫，下面看下實現(xiàn)代碼
2016-12-12