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, 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汗）
您可能感兴趣的相关文章