东南亚廉价航空查询与比价网站
首页 > 编程 > jquery-ui-1.7.1 new tabs and close tabs by self

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

2009年4月7日
阅读评论 发表评论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<!DOCTYPE html>
<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 文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

$(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: '
	<li><a href="#{href}"><span>#{label}</span></a></li>
'
		});
 
$('#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.
你不信，可以修改成下边的代码。

3
4
5
6
7
8
9
10
11
12
13
14

       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: '
	<li><a href="#{href}"><span>#{label}</span></a></li>
'
		});

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

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

Bookmark and Share

编程 , , ,

  1. How I Lost Thirty Pounds in Thirty Days
    2009年5月4日06:51 | #1
    回复 | 引用

    Hi, nice post. I have been pondering this topic,so thanks for posting. I’ll definitely be subscribing to your blog.

  1. 本文目前尚无任何 trackbacks 和 pingbacks.