JavaScript:12大选项卡特效

选项卡英文称之为Tab Panel,先前也有介绍过一个特效,此特效和滑动门特效融合使用非常符合Web2.0的标准,昨天介绍的几个有几个属于是选项卡特效和滑动门特效的混合体,下面列举的也有和滑动门一样的脚本,而且有些脚本支持Ajax。

jQuery Coda Slider – The sliding effect is what the Coda-Slider is all about; Nice, slick content presentation
115.jpg
jQuery的应用。目前最新版本为1.1。滑动门和选项卡的混合体,外加Ajax支持,作出了横向滑动改变各个选项卡的内容,适合做演示或者说明之类。

Perspective Tabs – Perspective tabs (formerly Sliding Tabs) is a simple mootools plug-in that allow for a lagre number of tabs to fit into a small space
106.jpg
Moo Tools的应用。选项卡横向滑动,内容部分同样上下滑动,非常酷的特效脚本如果能修改修改CSS样式,前途无量啊。

jQuery ID Tabs – idTabs is a plugin for jQuery – It makes adding tabs into a website super simple, but it can also open the door to endless possiblities
210.jpg
jQuery的应用。试用了一番给我的感觉就像是在耍杂技,功能繁多,让人看到目不暇接。

Tab Accordion – Tabbed style accordion script written with Moo.FX
35.jpg
滑动门和选项卡的混合体。10大滑动门特效文中已经介绍过了,这里不在复述。

XP Style Tab Panes - It’s easy to configure this script. You put your content into separate DIVs and then call a javascript function which creates the tabs dynamically
45.jpg
从名字就可以看出仿XP特效的选项卡效果,而且点击选项卡的X立即可以关闭点中的选项卡!!这里看演示:点这里哦

jQuery UI Tab – jQuery plugin for accessible, unobtrusive tabs
UI Tabs
jQuery的应用。小羽毛推荐的,修改样式后效果非常的漂亮。

jQuery Nested Tab Set with Demo – Ok, there have been some changes, but I’ll try to keep it easy, with an example, and there will be an included .zip file. First, you’ll need the latest JQuery build, as well as the latest version of the Tabs Plugin. Pay attention to the pathing I have created in my code snippets here
75.jpg
jQuery的应用。从作者的网站发现这个特效好像改自上面的那个特效。

Ajax Tabs Reloaded – From time to time you run across a cool site or test code and think that you may use it somewhere. I thought that about the HavocStudios Ajax tab system so I went back to the site to check it out
85.jpg
主要体现的Ajax特效,而且其功能可以想上面介绍的XP Style Tab Panel一样关闭选项卡还可以动态加载选项卡,同时还具有加载事件,关闭事件,失去焦点事件弹出对话框提醒的功能。这里看演示:点这里哦

Tabs in Scriptaculous – This script will allow you to create interactive tabs for use in an application
95.jpg
滑动门和选项卡的混合体。有些类似上面的Tab Accordion。

还有两个不知道什么原因网站无法打开,但是都可以PING通,通过代理也无法访问,也许是服务器的问题,这里暂时也把他们归为12大里面,分别是:

Ajax Tabs – The purpose of doing Tabs in Ajax is not just to do something in Ajax. The context for which this is used is not for novelty
55.jpg

Tabbed Page Interface – There are quite a few Javascript implementations of tabbed interfaces out there on the web. How much better, though, to be able to change from pagetab to pagetab without a page refresh
65.jpg

文中介绍的其中10个来自tutorialblog中一文:原贴地址

5 thoughts on “JavaScript:12大选项卡特效

  1. 换主题了。。。。。不错不错。不过有点不习惯sidebar在左边。。

    对了,如果没事参加我组织的博客串联活动好了。

  2. 估计以后我的博客走向就是wordpress + jQuery :)

  3. @漫步 呵呵,变回旧主题了,在此基础上改了一些
    @猴子 猴子夸奖人很少见哦~~
    @羽毛 呵呵~jQuery的UI站的资源很不错哦~