6个出色的基于JQuery的Tab选项卡实例

今天在修整博客侧栏信息时,利用到了Tab选项卡方式,因为ZBlog封装的是JQuery库,所以很自然地就想到了IdTabs。顺便也找来了不少优秀的Tab选项卡实例,在这里与大家分享一下。当然,最终我没有用到IdTabs以及如下任何一个实例,我只是很不服气的自己写了个小插件,尚不完善,就不于此共享了。先来看看老外们出色的基于JQuery的各式Tab选项卡吧:

NEW. KandyTabs 基于标准模式的万能选项卡

有了这个选项卡插件,以下的6个基本可以另作考虑了。如果你只需要简单的应用,可以直接看第7个。毫不夸张!KandyTabs选项卡以HTML标准及用户体验为指导思想,顺便美其名曰有利于SEO,在保留了网页应有的格式与外观的情况下,有效的将内容选项卡化。它不仅能让网页布局更紧凑,在失去它的作用时,网页的本色同样精彩!强大的预置功能,可以实现大部分你想要的效果,在最新版中,你还可以将其应用为slide幻灯片或according选项卡。到底有多好玩,现在就去看看吧!

演示 | 下载 | 介绍

1. jQuery 选项卡界面 / 选项卡结构菜单教程

这种类型的菜单在网页设计与开发中非常著名的。此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单。要非常留心此演示哟,你一定会喜欢上它的。

演示 | 下载 | 介绍

2. jQuery目录导航插件

这个jQuery插件为我们提供了添加基于字母顺序的导航小部件到有序和无序列表的方法。一个在列表之上的简易的(via CSS)导航条,向用户展示从A到Z的检索。通过从列表中选择一个字母来显示以此字母开头的所有元素。在可选字母上面显示的计数,是表明当你点击此字母的时候会有多少项目被现实。除此之外还有其他的基本功能可供选择。

演示 | 下载 | 介绍

3. jQuery的Kwicks菜单

Kwicks起源于Mootools中的一个效果(相同名字),逐渐演变成一个高度可定制的通用部件.

演示 | 下载 | 介绍

4. jQuery褪色菜单 -更换内容

CSS-tricks上很好的教程,讲解如何使用css和jQuery, 这次是他们教导如何使用 jquery使得菜单选项褪色。

演示 | 下载 | 介绍

5. jQuery idTabs

idTabs是jQuery的插件。他能非常容易的为网站添加选项卡. 但是他也为无穷的可能性敞开大门。

演示 | 下载 | 介绍

6. jQuery + CSS创建顺畅的选显卡内容区

网页设计师设法把大量的信息浓缩在一个网页上而不失可用性是最大的挑战之一。内容选项卡化是处理此类问题非常棒的方法,最近广泛被应用于博客。这是一篇非常棒的教程讲解,使用HTML建立一个小的选项卡信息盒,最后使用一些简单js功能与jQuery库实现。

演示

7. jQuery1.4 轻松搞定Tab选项卡

这个跟我目前博客用到的TAB选项卡原理差不多,只不过是基于最新版jQuery的,代码更简洁了,几乎必要的一行就能搞定,当然这是提供了一个思路,对初学者应该是有很大帮助的。

教程+演示