Tab Interface Using Chain.js

admin
August 22, 2008 at 1:23 pm

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

2 Commentsrss »

  • January 6, 2017
    4:31 pm

    Wie KФtzchen zu nennen? Fand hier eine vollstФndige http://allcatsnames.com/female-cat-names Liste der Namen fÐÑr Katzen.

  • March 4, 2017
    1:16 am

    Setiap pasangan suami istri pasti ingin segera memperoleh keturunan, tetapi sayangnya mereka sering kurang beruntung dalam mendapatkan momongan. Anak merupakan hal yang paling dinantikan dalam sebuah keluarga, karena anak merupakan penerus bagi kelangsungan keluarga mereka. Selain itu anak juga dianggap sebagai generasi penerus bangsa. Karena itu semua orang tua pasti berharap segera memiliki anak, sehingga bisa membesarkan anak itu menjadi pribadi yang berguna bagi bangsa dan negara. Jika anak mereka bisa sukses ataupun bisa berguna bagi bangsa dan negara maka orang tua pasti akan senang. Sayangnya kadang hal itu tidak bisa terwujud karena banyak pasangan yang kesulitan mendapatkan keturunan. Atau bahkan beberapa dari mereka sangat lama untuk mendapatkan keturunan. Untuk mengantisipasi hal itu, berikut ini akan dibahas cara cepat hamil yang mudah dan praktis.Cara cepat hamil yang mudah dan praktisCara cepat hamil yang pertama adalah memilih posisi seks yang benar agar memudahkan sperma untuk berenang kearah ovum sehingga cepat hamil. Posisi seks yang cocok agar cepat hamil adalah dengan posisi wanita dibawah. Ketika anda dan pasangan anda melakukan hubungan intim dan saat sperma masuk pada mulut rahim, sebaiknya anda tidak langsung membersihkannya. Anda harus menunggu hingga sperma tersebut masuk pada rahim anda. untuk menjaga sperma masuk secara sempurna, anda bisa mengganjal pinggang anda dengan bantal. Anda hanya perlu menunggu berapa menit saja sebeelum membersihkannya. Jika ingin lebih cepat, anda bisa melakukan hubungan intim ini sekali dalam dua hari agar sperma bisa masuk dan membuahi ovum dengan baik.10 Cara Mengatasi HipotensiCara cepat hamil yang kedua adalah dengan menghindari pil KB. Mengonsumsi pil KB sebelum anda memiliki momongan akan berdampak buruk pada rahim anda sehingga akan sulit bagi anda untuk mendapatkan keturunan. Tetapi kadang banyak wanita yang ingin mengonsumsi pil ini meskipun sudah mengetahui resiko tersebut. mereka ingin mengonsumsi pil ini agar bisa menunda kehamilan mereka. Salah satu faktor yang mendorong penundaan kehamilan ini adalah kareena sibuknya pekerjaan dan karir yang sedang ditempuh. Untuk mendapatkan jabatan dan rezeki kadang seseorang rela untuk menunda kehamilan mereka, tetapi anda juga perlu memikirkan jangka panjangnya karena anda bisa beresiko untuk tidak bisa hamil. Cara Cepat Hamil yang Mudah dan Praktis

Leave a comment