jquery-ui-1.7.1 new tabs and close tabs by self

admin — Tue, 07 Apr 2009 07:49:27 +0000

最近研究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


<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>daozaho jQuery UI Example</title>
		<link type="text/css" href="css/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet"/>		
		<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
		<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>
</html>

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只会出现一次。

大蕉 » ui

jquery-ui-1.7.1 new tabs and close tabs by self

请看看相关文章