- 时间:2022-02-06 11:59 编辑: 来源: 阅读:
- 扫一扫,手机访问
摘要:基于JQuery的6个Tab选项卡插件
顺便也找 来了不少优秀的Tab选项卡实例,在这里与大家分享一下。当然,最终我没有用到IdTabs以及如下任何一个实例,我只是很不服气的自己写了个小插件,尚 不完善,就不于此共享了。先来看看老外们出色的基于JQuery的各式Tab选项卡吧:
[b]1. jQuery 选项卡界面 / 选项卡结构菜单教程[/b]
这种 类型的菜单在网页设计与开发中非常著名的。此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单。要非常留心此 演示哟,你一定会喜欢上它的。
[url=http://www.queness.com/resources/html/tabmenu/jquery-tabbed-menu-queness.html]演示[/url] | [url=http://www.queness.com/resources/archives/jquery-tab-menu.zip]下载[/url] | [url=http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial]介绍[/url]
[b]2. jQuery目录导航插件[/b]
这个jQuery插件为我们提供了添加基于字母顺序的导航小部件到有序和无序列表的方法。一个在 列表之上的简易的(via CSS)导航条,向用户展示从A到Z的检索。通过从列表中选择一个字母来显示以此字母开头的所有元素。在可选字母上面显示的计数,是表明当你点击此字母的 时候会有多少项目被现实。除此之外还有其他的基本功能可供选择。
[url=http://www.ihwy.com/Labs/Demos/Current/jquery-listnav-plugin.aspx]演示[/url] | [url=http://www.ihwy.com/Labs/downloads/jquery-listnav/2.0/jquery.listnav-2.0.js]下载[/url] | [url=http://www.ihwy.com/Labs/jquery-listnav-plugin.aspx]介绍[/url]
[b]3. jQuery的Kwicks菜单[/b]
Kwicks起源于Mootools中的一个效果(相同名字),逐渐演变成一个高度可定制 的通用部件.
[url=http://www.jeremymartin.name/examples/kwicks.php?example=1]演示[/url] | [url=http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks/Kwicks-1.5.1.zip]下载[/url] | [url=http://www.jeremymartin.name/projects.php?project=kwicks]介绍[/url]
[b]4. jQuery褪色菜单 -更换内容[/b]
CSS-tricks上很好的教程,讲解如何使用css和jQuery, 这次是他们教导如何使用 jquery使得菜单选项褪色。
[url=http://css-tricks.com/examples/MenuFader/]演示[/url] | [url=http://css-tricks.com/examples/MenuFader.zip]下 载[/url] | [url=http://css-tricks.com/learning-jquery-fading-menu-replacing-content/]介绍[/url]
[b]5. jQuery idTabs[/b]
idTabs是jQuery的插件。他能非常容易的为网站添加选项卡. 但是他也为无穷的可能性敞开大门。
[url=http://www.sunsean.com/idTabs/#t1]演示[/url] | [url=http://www.sunsean.com/idTabs/jquery.idTabs.min.js]下载[/url] | [url=http://www.sunsean.com/idTabs/#t2]介绍[/url]
[b]6. jQuery + CSS创建顺畅的选显卡内容区[/b]
网页设计师设法把大量的信息浓缩在一个网页上而不失可用性是最大的挑战之 一。内容选项卡化是处理此类问题非常棒的方法,最近广泛被应用于博客。这是一篇非常棒的教程讲解,使用HTML建立一个小的选项卡信息盒,最后使用一些简 单js功能与jQuery库实现。
[url=http://nettuts.s3.amazonaws.com/001_Tabbed/site/jQuery.html]演示[/url] | [url=http://www.sunsean.com/idTabs/jquery.idTabs.min.js]下载[/url] | [url=http://www.sunsean.com/idTabs/#t2]介绍[/url]