2012年最有用的50款 jQuery 插件集锦——《导航篇》
继续向大家分享 2012 年发布的优秀 jQuery 插件,今天带来的实现导航功能的插件。2012年众多的 jQuery 新插件发布出来,可以说是一个伟大的 jQuery 年份。这个系列的文章向大家分享最具创新的,同时也是最有用的50款 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插件,图片特效插件,视频插件等等。
您可能感兴趣的相关文章
HorizontalNav
这是一款水平方向的 jQuery 导航插件,能够自适应容器的宽度。使用示例:
HTML:
1
2
3
4
5
6
7
8
9
|
<nav class= "horizontal-nav full-width horizontalNav-notprocessed" > <ul> <li><a href= "#" >Navigation Item</a></li> <li><a href= "#" >Work</a></li> <li><a href= "#" >Blog</a></li> <li><a href= "#" >About</a></li> <li><a href= "#" >Contact</a></li> </ul> </nav> |
CSS:
JavaScript:
1
2
3
4
|
$(document).ready( function () { // Call horizontalNav on the navigations wrapping element $( '.full-width' ).horizontalNav({}); }); |
stickyMojo
stickyMojo 是一款轻量的,灵活的侧栏固定导航插件,兼容 Firefox, Chrome, Safari, 以及 IE8+。
在 IE 更低版本的浏览器能够优雅降级处理,使用示例:
HTML:
1
2
3
4
5
6
7
8
9
10
11
|
< div id = "wrapper" > < div id = "sidebar" > < p >sidebar</ p > </ div > < div id = "main" > < p >main</ p > </ div > < div id = "footer" > Footer </ div > </ div > |
CSS:
JavaScript:
1
2
3
|
$(document).ready( function (){ $( '#sidebar' ).stickyMojo({footerID: '#footer' , contentID: '#main' }); }); |
ddSlick
ddSlick 是一款非常轻量的插件,能够帮助你实现自定义的下拉导航菜单效果(需要FQ),使用示例:
1
2
3
4
5
6
7
8
9
|
$( '#demoBasic' ).ddslick({ data: ddData, width: 300, imagePosition: "left" , selectText: "Select your favorite social network" , onSelected: function (data) { console.log(data); } }); |
jQuery Collapse
jQuery Collapse 这个插件为您提供一个方便和轻量级的解决方案,实现风格各异的折叠导航功能,使用示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
< div id = "demo" data-collapse = "accordion persist" > < h2 >Fruits</ h2 > < ul > < li >Apple</ li > < li >Pear</ li > < li >Orange</ li > </ ul > < h2 >Hint</ h2 > < div > < p >One fruit a day keeps the doctor away</ p > </ div > < h2 >Third</ h2 > < p >Just a paragraph here</ p > </ div > |
data-collapse 属性能够自动触发脚本,更详细教程参考这里:使用帮助。
jQuery Accordion
Akordeon 提供了一种实现手风琴效果的轻量解决方案,能够在有限的空间内展现各种形式的数据,使用示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
< div class = "akordeon" > < div class = "akordeon-item" > < div class = "akordeon-item-head" > < div class = "akordeon-item-head-container" > < div class = "akordeon-heading" > Header Here </ div > </ div > </ div > < div class = "akordeon-item-body" > < div class = "akordeon-item-content" > Contents here </ div > </ div > </ div > < div class = "akordeon-item-head" > < div class = "akordeon-item-head-container" > < div class = "akordeon-heading" > Header Here </ div > </ div > </ div > < div class = "akordeon-item-body" > < div class = "akordeon-item-content" > Contents here </ div > </ div > </ div > < script > $(document).ready(function () { $('.akordeon').akordeon(); }); </ script > |
特别说明:需要FQ访问(⊙﹏⊙b汗)
您可能感兴趣的相关文章
本文链接:2012年最有用的50款 jQuery 插件集锦——导航篇
编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源