Home > Internet > jQuery插件:jwTabs
2009November . 19th

jQuery插件:jwTabs

jwTabs是Jeffrey制作的一个基于jQuery的Tab插件,与比较出名的idTab相比,它具有以下优点:

1. 可以自由选择过渡效果
2. 可以自动切换Tab
3. 插件大小只有1K
4. Has everything you’d actually use…and nothing more.(怎么翻译?)
5. 不需要对代码进行特殊标记

插件的主页是:Introducing jwTabs

例子:

假设你需要对以下代码进行Tab处理:

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
<div id="tab-container">
 	<div>
		<h2>1st tab</h2>
		<p> .......</p>
	</div>
 
	<div>
		<h2>2nd tab</h2>
		<p>......</p>			
	</div>
 
	<div>
		<h2>3rd tab</h2>
		<p>......</p>			
		<p>......</p>			
		<p>......</p>						
	</div>	
 
 	<div>
		<h2>4th tab</h2>
		<p>......</p>
	</div>
 
 	<div>
		<h2>5th tab</h2>
		<p>......</p>
	</div>
 
 	<div>
		<h2>6th tab</h2>
		<p>......</p>
	</div>				
 </div>

你不需要对HTML再作任何处理,只需要添加以下脚本:

1
2
3
4
5
jQuery('#tab-container').jwTabs({
	interval : 6000,//自动切换Tab的时间间隔,单位ms
	startTab : 4,//默认显示的Tab序号
	tabTitleReference : 'h2'//Tab标签的标题
});

DEMO:http://jeffrey-way.s3.amazonaws.com/015_jwTabs/jwTabs/index.html

  1. 2009November . 19th - 4:17 PM

    沙发,现在还没弄个tab效果呢

  2. 2009November . 19th - 10:21 PM

    我博客有2处用到tab,都是用代码实现的,看来这个插件简单嘛,装上就直接可以用了

  3. 2009November . 19th - 11:27 PM

    收藏备用一下~ 嘿嘿~

  4. 2009November . 19th - 11:49 PM

    貌似很不错咧,试试

  5. 2009November . 20th - 2:14 AM

    看来我来晚了 呵呵~

  6. 2009November . 20th - 4:21 AM

    不错 收藏

  7. 2009November . 20th - 9:03 AM

    Has everything you’d actually use…and nothing more的google的翻译是:您想拥有一切实际使用,仅此而已…,好像翻译得还行

  8. 2009November . 20th - 11:33 AM

    在哪里能看到效果呢

  9. 2009November . 20th - 1:13 PM

    传说中的滑动门。

  10. 2009November . 20th - 1:16 PM

    我点开的这个国外网站很大气

  11. 2009November . 20th - 2:02 PM

    奥,OK,暂时放弃看

  12. 2009November . 20th - 4:35 PM

    我最不敏感的就是代码了

  13. 2009November . 20th - 11:19 PM

    话说你那个 overlay4wp 又更新啦~~ 更新了些什么东西. 告诉我!

  14. 2009November . 21st - 10:14 AM

    不错的东西,自动翻页的功能自己想实现也不会太麻烦呵呵

  15. 2009November . 21st - 12:45 PM

    @超人
    更新了JS库,添加了自定义背景色功能

  16. 2009November . 21st - 5:17 PM

    学习一下再说

  17. 2009November . 21st - 7:14 PM

    有了JQuery什么都好办哈。

  18. 2009November . 21st - 7:39 PM

    @sleepy
    这不会是机器翻译的吧?
    @LAONB
    这不是滑动门,哈哈
    @keelii
    也不能这样说,有些东西用jQuery的话比直接用JavaScript麻烦很多

  19. 2009November . 21st - 9:58 PM

    jq是个好东西啊,插件也N多

  20. 2009November . 21st - 10:51 PM

    jquery的插件太多了,效果不错,JS文件也可以忽略不计。

  21. 2009November . 22nd - 11:49 AM

    直接开发一个傻瓜都会用的插件出来嘛

  22. 2009November . 22nd - 1:08 PM

    看了DEMO,没有防刷新功能?

  23. 2009November . 22nd - 8:28 PM

    @先看看
    这个插件已经非常简单了,在简单的插件也需要一点技术才能灵活使用的
    @三七八蛋
    DEMO比较简单,你可以自己加入其他功能的

  24. 2009November . 23rd - 9:55 AM

    学习一下,估计以后用这个的地方就多了

  25. 2009November . 23rd - 1:37 PM

    额..虫虫第一次来… 博主关注技术性的东东呀

  26. 2009November . 26th - 10:31 AM

    Has everything you’d actually use…and nothing more.

    画龙点睛,满足你最需要的!

Subscriber selector

Close