最近研究jquery-ui-1.7.1的tabs的使用。之前都有用开ext的tabs的。由于觉得ext的库比较大，而且我不需要ext那么强大的库。我需要简单好用够用就可以了。jquery和它的ui库比较适合我的需求。但是jquery ui的tabs库从开始追踪到现在。tabs的控件都没带上自动关闭按钮。虽然新的api中有remove事件和方法。经过一番研究。经过tabs自身的一些api进行了定制，实现带有关闭按钮的tabs的控件。 思路大概如下： tabs的有一个属性tabTemplate是设置tab标签头的模板的。在模板中增加一个关闭按钮。然后在tabs的添加（add）的事件中增加该按钮的事件，在事件中关闭本tabs标签。

下边是两个sample测试文件,把文件复制到jquery-ui-1.7.1的示范目录中运行。 test.htm file



	
		
		daozaho jQuery UI Example
				
		

	<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
	<script type="text/javascript" src="test2.js"></script>
	<style>
	.tab-close{ position: relative ; float: left}
	</style>
</head>
<body>

	<div id="demoHeader"> 
		<h1>Welcome to jQuery UI--Tabs(close by self).</h1>
		<p>Author:daozhao. blog: <a href="http://daozhao.goflytodya.com">daozhao.goflytoday.com</a></p>
		<a id="add" href="#">Add new tabs</a><br>
		<div id="tabs">
			<ul>
				<li><a href="#tabs-1">aaaaaaaaa</a></li>
				<li><a href="#tabs-2">bbbbb</a></li>
				<li><a href="#tabs-3">ccccccccc</a></li>
			</ul>
			<div id="tabs-1">
				aaaaaaaaaaaaaaaaaaaaa
			</div>
			<div id="tabs-2">
				bbbbbbbbbbbbbbbbbbbbbbbbbbbbb
			</div>
			<div id="tabs-3">
				cccccccccccccccccccccccccccc
			</div>
		</div>
	</div>

</body>
6-7行的css文件和js文件根据自己的测试环境更改。 11行css代码是修正关闭按钮在firefox的显示效果的。ie和chrome浏览器有没有这个css都可以。

test.js 文件。

$(function(){
tabid = 1;
tab = $('#tabs').tabs(
		{add: function(event, ui) {
			   $(ui.tab.nextSibling).click(function(){
					var li = $(this).parent();
					var index = $('#tabs li').index(li.get(0));
                                        if(confirm('Are you sure to close "' + li.text() + '" tab?'))
                                        {
						tab.tabs("remove",index );
                                        }
                                        else
                                        {
                    	                     return false;
                                        }
                                        return true;
				});
			 }
		,tabTemplate: '
	
  • #{label}
    • 
'
		});

$('#add').click(function(){
		tab.tabs("add","#newtab"+tabid,"new tab "+tabid);
		$("#newtab" + tabid ).html("new tabs content tabid:"+tabid);
		tabid++;
	});

});

    第5行的$(ui.tab.nextSibling)代码是根据tabTemplate的html代码来定的，这个示范例子ui.tab.nextSibling就是代表关闭按钮。如果你的tabTemplate和我的不一样，就需要修改这个，但是不要修改成$(".tab-close")，这样的话有一个bug. 你不信，可以修改成下边的代码。

    		
       tab = $('#tabs').tabs(
		{add: function(event, ui) {
			   $(".tab-close").click(function(){
					var li = $(this).parent();
					alert(li.text() + " close button is click");
                    return true;
				});
			 }
		,tabTemplate: '
	
  • #{label}
    • 
'
		});

    你测试的时候，在网页上点击多几次增加按钮。然后点击每一个tab的关闭按钮。你就知道有什么bug了。

    你会发现点击一次tab的关闭按钮，但是会出现几次的alert对话框。最早添加的tab会出现最多次数的alert对话框。最后添加的tab只会出现一次。