Tab Interface Using Chain.js

admin
August 22, 2008 at 1:23 pm
Code, Tutorial

Creating Tab Interface using chain.js and interface.js is pretty simple. Because chain.js is unobtrusive, we can start with the design first.

We start with the html code.

1
2
3
4
5
6
7

<div id="tabs">
	<div class="tab"><span class="title">Title</span></div>
	<div style="clear:both;"></div>
</div>
<div id="content">
	<div class="content">Content goes here.</div>
</div>

#tabs ist the container of the tabs, containing <div class="tab">, a prototype of our tab item.
And we put a clear div, because we plan to make the tab horizontal aligned with float:left.

To make it more stylish, we add some css to it.

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

.tab {
	float: left;
	cursor: pointer;
	background: #0080FF;
	padding :3px 10px;
	margin-right: 5px;
	color: white;
}
 
#content {
	border: 1px solid #0080FF;
	padding: 5px;
	min-height: 30px;
	width: 500px;
}

Now the tab widget should look like this:

Tab 1

Now lets add some magic :D. The tab interface will be chained to the data.

1
2
3
4
5
6
7

$('#tabs')
	.items([
		{title:'Tab1', content:'<b>Testing</b> With Tab 1'},
		{title:'Tab2', content:'Does it work?'},
		{title:'Another Tab', content:'It <i>seems</i> to <b>work</b>'}
	])
	.chain();
Lets take a look at what it does:
Tab 2

Hmm, something is wrong! The <div style="clear:both;"> is gone! We have to do some workarounds.

1
2
3
4
5
6
7
8
9
10
11
12

var divclear = $('<div style="clear:both"></div>'); // The clear:both
$('#tabs')
	// The Workaround
	.update(function(){
		$(this).chain('anchor').append(divclear);
	})
	.items([
		{title:'Tab1', content:'<b>Testing</b> With Tab 1'},
		{title:'Tab2', content:'Does it work?'},
		{title:'Another Tab', content:'It <i>seems</i> to <b>work</b>'}
	])
	.chain();

So it will append the css clear each time the tabs is updated. Now it looks like this:

Tab 3

To make the tab selectable, lets add selectable() and add some css.

1

.tab.selected {background: #3D3DFF;}

now the javascript looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13

var divclear = $('<div style="clear:both"></div>'); // The clear:both
$('#tabs')
	// The Workaround
	.update(function(){
		$(this).chain('anchor').append(divclear);
	})
	.items([
		{title:'Tab1', content:'<b>Testing</b> With Tab 1'},
		{title:'Tab2', content:'Does it work?'},
		{title:'Another Tab', content:'It <i>seems</i> to <b>work</b>'}
	])
	.selectable({required:true})
	.chain();

The actual progress:

Tab 4

Now you can select tabs, but still the content wont change. lets link the content below to the tabs.

1

$('#content').item('link', '#tabs', 'selected').chain();

Viola! you have a tabbed interface. Pretty easy, isn’t it?

Tab 5

You can make your tabs sortable etc. pretty easily, just with sortable(). Now the full javascript code with sortable.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var divclear = $('<div style="clear:both"></div>'); // The clear:both
$('#tabs')
	// Workaround for float. Clearing tab each time it is updated
	.update(function(){
		$(this).chain('anchor').append(divclear);
	})
	.items([
		{title:'Tab1', content:'<b>Testing</b> With Tab 1'},
		{title:'Tab2', content:'Does it work?'},
		{title:'Another Tab', content:'It <i>seems</i> to <b>work</b>'}
	])
	.selectable({required:true})
	.draggable({axis:'x'})
	.sortable({align:'horizontal'})
	.chain();
 
$('#content')
	.item('link', '#tabs', 'selected')
	.chain();

take a look at the full demo here

No Commentsrss »

Leave a comment