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

2009年8月21日 吉光片羽 2

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

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的,代码更简洁了,几乎必要的一行就能搞定,当然这是提供了一个思路,对初学者应该是有很大帮助的。
演示

预览更多JQuery强大应用,欢迎移驾到本人的汽车手绘画廊淘不?淘喏!

点击这里获取该日志的TrackBack引用地址

日志标签: jquery  css  Tab  选项卡  实例  xhtml  

已有人对此文发表了评论

  1. 引用该评论 漂叶 2010-6-11 22:11:37 回复
    不错,谢谢无私贡献
  2. 引用该评论 白龙 2010-5-27 17:49:35 回复
    不错啊!
    吉光片羽 于 2010-5-28 12:53:00 回复

    不客气,呵呵。

发表评论:

邮箱网址为选填;若您注册了GRAVATAR,请填写邮箱(不会公开),否则最好不填,您可在提交评论前选择表情头像;点击他人头像可引用其评论。插入UBB

About me

Name: KandyTang
Age: 20+
Location: Guilin, China
QQ: 121885959
Email: KandyT@qq.com

My Works

中文酷博聚合 汽车手绘·视频·教程 史努比(中文)网 免费的PJBlog皮肤 付费个性定制博客皮肤 桂林网站建设

Gallery

复线文字LOGO设计

复线文字L... (10)

订书钉的创意-微型城市

订书钉的创... (4)

2010元宵烟火

2010元宵烟火 (7)

国外贺卡设计欣赏

国外贺卡设计欣赏 (20)

2012高清海报

2012高清海报 (3)