超强1000个jquery极品插件(一)(导航类)
1.导航类(1)Horizontal accordion: jQuery
基于jQuery开发，非常简单的水平方向折叠控件。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907001904r.jpg" border="0" alt="" />
(2)jQuery-Horizontal Accordion
具有XBOX360 blade界面风格的水平方向Accordion。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907001905n.jpg" border="0" alt="" />
(3)jQuery plugin: Accordion
用于创建 折叠菜单的jQuery插件。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907001907Z.jpg" border="0" alt="" />
(4)Accordion Menu script
基于jQuery开发的可折叠菜单。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907001908a.jpg" border="0" alt="" />
(5)模仿ext的tab选项卡
TabPanel(选项卡组件)
参数说明
renderTo<渲染到某容器string | jQuery object | NULL>
将选项卡组件渲染到某容器，参数类型可以为字符串，也可以为jQuery所加载的对象，如果为声明该参数，组件默认的承载容器为BODY。
items<选项卡元素集合array>
选项卡组件渲染后就会显示的选项卡元素集合，具体参数请查看选项卡元素。
width<宽度string | number>
选项卡组件的总宽度，默认400px。
height<高度string | number>
选项卡组件中页面显示层的高度，默认300px。
border<是否显示边框string>
嵌套显示选项卡时，会出现重复边框的情况，影响美观，将border设置为”none”，则可以避免，默认显示边框，不接受除”none”之外的参数值。
active<渲染后默认激活哪个选项卡元素number>
下标以0为开始，默认为0。
maxLength<最多显示几个选项卡元素number>
-1为无限，默认为-1。
tabs<获得选项卡组件所有的选项卡元素return array>
可根据需要获得选项卡组件的所有选项卡元素。
公共方法
addTab(添加一个选项卡元素object)
动态向选项卡组件中添加一个选项卡元素。
flush(刷新选项卡元素的内容string | number)
将选项卡元素的内容刷新，参数可以为选项卡元素的ID或下标。
show(显示选项卡元素string | number)
显示制定选项卡元素，参数可以为选项卡元素的ID或下标。
Kill(关闭选项卡元素string | number)
关闭选项卡元素，参数可以为选项卡元素的ID或下标。
getTabsCount()<获得选项卡元素数量return number>
getTitle(获得选项卡元素的标题string | number) <return string>
setTitle(设置选项卡元素的标题string | number, string)
getContent(获得选项卡元素的内容string | number) <return string>
setContent(设置选项卡元素的内容string | number, string)
getDisable(选项卡元素是否禁用string | number) <return boolean>
setDisable(设置选项卡元素是否禁用string | number)
getCloseable(选项卡元素是否可关闭string | number) <return boolean>
setCloseable(设置选项卡元素是否可关闭string | number, boolean)
getActiveTab()<获得被激活的选项卡元素return object>
使用方法
页面引入jQuery.js、TabPanel.js、Fader.js、TabPanel.css
new TabPanel({
renderTo:'tabs',
width: '100%',
height: '500px',
active: 0,
items: [{
title:'工作中心',
html:'<iframe width="100%" height="100%" frameborder="0"></iframe>',
closable: false
}]
});
TabPanel item(选项卡元素)
参数说明
id<元素IDstring>
必须唯一，或者不设置该参数，否则将无法添加到选项卡组件中，默认自动生成。
title<元素标题string>
可以动态设置。
closeable<是否可关闭boolean>
true可关闭，false不可关闭，默认为true。
（7）De-Constructing Accordion and Hover Effects with jQuery
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907001912E.jpg" alt="How to Make a Threadless Style T-Shirt Gallery" width="480" height="300" />
（8）导航到页内指定位置
Automatically generate table of contents using jQuery
（9） “Outside the Box” Navigation with jQuery
This tutorial will cover a few ways to do just that with OS X style docks and stacks navigation.
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907001918Q.jpg" alt="outside-box-drop-down-multi-level-menu-navigation" width="570" height="224" />
（10） Sexy Drop Down Menu w/ jQuery & CSS
In this tutorial you will learn how to create a sexy drop down menu that can also degrade gracefully.
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907001922h.jpg" alt="sexy-jquery-drop-down-multi-level-menu-navigation" width="570" height="224" />
（11） A Different Top Navigation
In this tutorial you will use jQuery to create a different multi-layered horizontal navigation system that is still intuitive enough for anyone to use for the first time.
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907001925K.jpg" alt="different-jquery-drop-down-multi-level-menu-navigation" width="570" height="224" />
（12）Sliding Jquery Menu Tutorial <img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907001931h.jpg" alt="sliding-jquery-drop-down-multi-level-menu-navigation" width="570" height="224" />
（13）Animated Drop Down Menu with jQuery <img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907001934p.jpg" alt="animated-drop-down-multi-level-menu-navigation" width="570" height="224" />
14. jQuery UI Potato Menu<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907001938A.jpg" alt="potato-ui-drop-down-multi-level-menu-navigation" width="570" height="224" />
15. Make a Mega Drop-Down Menu with jQuery <img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907001942u.jpg" alt="mega-drop-down-multi-level-menu-navigation" width="570" height="224" />
（16）Superfish v1.4.8 – jQuery menu plugin by Joel Birch
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907001948P.jpg" alt="superfish-jquery-drop-down-multi-level-menu-navigation" width="570" height="224" />
（17）jQuery (mb)Menu 2.7 <img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907001952b.jpg" alt="jquery-drop-down-multi-level-menu-navigation" width="570" height="224" />
（18） jQuery File Tree
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907001956r.jpg" alt="jquery-tree-drop-down-multi-level-menu-navigation" width="570" height="224" />
19.jQuery & CSS Example – Dropdown Menu
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907001959S.jpg" alt="designreviver-jquery-drop-down-multi-level-menu-navigation" width="570" height="224" />
20. Reinventing a Drop Down with CSS and jQuery
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002002J.jpg" alt="reinventing-drop-down-multi-level-menu-navigation" width="570" height="224" />
21. Simple jQuery Dropdowns
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002006H.jpg" alt="simple-jquery-drop-down-multi-level-menu-navigation" width="570" height="224" />
22. Styling Drop Down Boxes with jQuery
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002008e.jpg" alt="styling-jquery-drop-down-multi-level-menu-navigation" width="570" height="224" />
23. jQuery iPod-style Drilldown Menu
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002011C.jpg" alt="ipod-drop-down-multi-level-menu-navigation" width="570" height="224" />
24. jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002015D.jpg" alt="recreated-drop-down-multi-level-menu-navigation" width="570" height="224" />
25. mcDropdown jQuery Plug-in v1.2.07
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002018C.jpg" alt="mc-plugin-drop-down-multi-level-menu-navigation" width="570" height="224" />
26. jQuery Drop Line Tabs
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002023e.jpg" alt="jquery-tabs-drop-down-multi-level-menu-navigation" width="570" height="224" />
27. Cut & Paste jQuery Mega Menu
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002027h.jpg" alt="cut-paste-drop-down-multi-level-menu-navigation-1" width="570" height="224" />
28. jdMenu Hierarchical Menu Plugin
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002030L.jpg" alt="jdmenu-drop-down-multi-level-menu-navigation" width="570" height="224" />
7. JQTreeTable (演示地址)
JQTreeTable这个jQuery插件能够将普通的HTML表格转换成带有嵌有Tree控件的表格。
8. jQuery Simple Tree (演示地址)
jQuery Simple Tree是一个可拖放的树形控件。支持通过Ajax动态加载树节点，具有简单易于使用和漂亮的外观等特点。
9. jQuery plugin: Treeview (演示地址)
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002031Y.jpg" border="0" alt="" />
这个插件能够把无序列表转换成可展开与收缩的Tree。
14. jQuery Menu
jQuery Menu是一个极好的菜单系统，可用于创建简单的下拉菜单，iPod-like菜单和Flyout风格的导航菜。
15. NotesForMenu (演示地址)
NotesForMenu是一个非常简单的jQuery插件用于创建多层级树形菜单，只需一行代码就能够实现。
18. Advanced docking using jQuery (演示地址)
类似于MS的VS侧边可停靠工具栏。
注：不支持IE6
20. Contactable (演示地址)
Contactable这个jQuery插件可以帮助你在页面边框处创建一个可伸缩的反馈表单。
21.FastFind Menu Script
可拖动的嵌套菜单窗体，基于动态"AJAX"响应。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002033D.jpg" border="0" alt="" />FastFind Menu Script
22 jQuery UI Tabs
jQuery UI Tabs：一个功能强大，易于使用的Tab控件。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002034D.jpg" border="0" alt="" />
jQuery UI Tabs
23jstree
jsTree是一个基于jQuery的Tree控件。支持XML，JSON，Html三种数据源。提供创建，重命名，移动，删除，拖"放节点操作。可以自己自定义创建，删除，嵌套，重命名，选择节点的规则。在这些操作上可以添加多种监听事件。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002035d.jpg" border="0" alt="" />
jstree
24jQuery File Tree
jQuery File Tree是一个可配置的Ajax文件浏览器jQuery插件。可以通过CSS定制外观，指定文件树展开图标，可以自己定义展开／收缩事件、速度，配置加载信息等。 jQuery File Tree通过Ajax来获取文件信息。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002036I.jpg" border="0" alt="" />
jQuery File Tree
25Superfish
jQuery菜单插件。支持水平/垂直方向。弹出子菜单不会被<SELECT>标签挡住。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002037A.jpg" border="0" alt="" />
Superfish
26.accordion menu
Accordion风格的jQuery菜单。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002038K.jpg" border="0" alt="" />
accordion menu
27.CSS Dock Menu
采用jQuery+CSS实现，仿Mac Dock Menu的一个导航菜单。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/201009070020393.jpg" border="0" alt="" />
CSS Dock Menu
28.CheckTree
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002032b.gif" border="0" alt="" />
带Checkbox的树型jQuery插件。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002039C.jpg" border="0" alt="" />
CheckTree
29.idTabs
idTabs是一个能够创建简单到复杂Tab控件的jQuery插件。支持动态添加和选择Tab，idTabs能够绑定到不同的事件如mouseover。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002040e.jpg" border="0" alt="" />
30. jQuery Context Menu
jQuery Context Menu是一个右键菜单插件。通过非常少的设置就能够轻松实现右键菜单功能。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002041F.jpg" border="0" alt="" />
jQuery Context Menu
31. jQuery Right-click
这个插件能够让你使用jQuery来捕获由鼠标右键触发的事件。这些事件包括：click、mouseup、mousedown。
jQuery Right-click
32.jQuery Multi Level CSS Menu
这是一个多级水平CSS菜单，利用规则嵌套的HTML列表标签创建。当子菜单靠近窗体右边缘时，将自动调整展示方面。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002042G.jpg" border="0" alt="" />
jQuery Multi Level CSS Menu
33.ListNav
ListNav是一个用于创建按字母顺序分类导航的jQuery插件。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002043c.jpg" border="0" alt="" />
ListNav
34.Simpletip
Simpletip是一个基于jQuery开发的Tooltips控件。Tooltips可以附在任意元素（标签）之上。并定制展示方式与位置。tooltips可以是静态，动态或通过Ajax加载。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002044i.jpg" border="0" alt="" />
Simpletip
35. Smooth Navigation Menu
Smooth Navigation Menu是一个采用jQuery开发，基于CSS的多层级网站导航菜单。菜单项的内容既可以直接从当前页面中获取，也可以从一个外面文件或通过Ajax获取。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002045p.jpg" border="0" alt="" width="432" height="194" />
Smooth Navigation Menu
36. jdMenu
jdMenu是用于创建水平/垂直分层下拉菜单的jQuery插件.支持通过Ajax加载菜单项，自定义动画效果，易于定制外观，支持相对(relative)与绝对(absolute) 定位等。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002046O.jpg" border="0" alt="" />
jdMenu
37.jqDock
这是一个能够将一组图片转换成类似于Mac风格鱼眼菜单(Dock Menu)的jQuery插件。菜单可以是水平方向或垂直方向。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002046O.jpg" border="0" alt="" />
jqDock
38 Animated Menu using jQuery
A technique for animating menu items when a user hovers over them. Source files, including the PSD file, are available to download.
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002049A.jpg" alt="Animated Menu using jQuery" width="500" height="151" />
View Demo Page
39. Garagedoor Effect using jQuery
Gaya Kessler presents a wonder JavaScript menu that mimics the real garage door using jQuery.
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002051n.jpg" alt="Garagedoor Effect using jQuery" width="500" height="109" />
View Demo Page
40.JGlide Menu
A very unique menu that floats on the page. Users can drag it to a position they desire.
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002056k.jpg" alt="JGlide Menu" width="500" height="200" />
View Demo Page
41. Vertical Sliding jQuery Menu
HVDesigns presents a menu that drops down and reveals more links.
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002058M.jpg" alt="Sliding jQuery Menu" width="500" height="192" />
View Demo Page
42.LavaLamp
When you hover an item, you’ll see the CSS sliding door technique created using jQuery. An alternate version for MooTols can be here.
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002100o.jpg" alt="LavaLamp" width="500" height="96" />
43. Sliding JavaScript Menu Highlight
This sliding hover effect script is an easy technique for highlighting menu items.
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/201009070021031.jpg" alt="Sliding JavaScript Menu Highlight" width="500" height="107" />
44. Fading Menu - Replacing Content
This technique allows you to fade in and fade out menu items.
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002104b.jpg" alt="Fading Menu - Replacing Content" width="500" height="129" />
View Demo Page
45. Simple Multi-level Drop-Down Menu
A simple JavaScript drop down menu tutorial.
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002106m.jpg" alt="Simple Multi-level Drop-Down Menu" width="500" height="167" />
46. Using jQuery for Background Image Animations
A technique for creating animated menus using jQuery and CSS background-position properties.
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/201009070021088.jpg" alt="Using jQuery for Background Image Animations" width="500" height="150" />
View Demo Page
47Tabpanel - jerichotab
- 效果图:
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002109W.png" border="0" alt="" width="433" height="37" />
简介:
jerichoTab是一款模拟 firefox 标签页的插件, 通过丰富的API可以轻松的实现动态添加, 删除, 激活tab, 当tab页过多时会在左右两段增加滚动条...
导航:
详细介绍 | 在线演示
48jDiv: jQuery 导航 Tab
一个可以显示丰富内容的下拉导航菜单（演示要翻墙）。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002155w.jpg" alt="jDiv: A jQuery navigation menu alternative" />
49. 基于 CSS3 和 jQuery 的半透明导航系统
鼠标在导航菜单上移动，显示半透明的指示图标。CSS3 做这个实在太容易了。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907002203Z.jpg" alt="Halftone Navigation Menu With jQuery CSS3" />
50导航滑块
这种风格的导航已经见于很多站点，鼠标在导航菜单上移动的时候，一个高亮指示条随着鼠标滑动，指示当前的导航位置。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/201009070022061.jpg" alt="jQuery Magic Line Sliding Style Navigation" />
51. 流感导航菜单
下面的导航菜单，当鼠标在上面移动的时候，会很流畅地垂下解释菜单，当你将鼠标在上面快速左右移动的时候，会怀疑这是 Flash。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/201009070022462.jpg" alt="Fluid Navigation How to create an informative menu-bar with jQuery CSS" />
查看完整版本： 超强1000个jquery极品插件(一)(导航类)
Tags: