2012年最有用的50款 jQuery 插件集锦——《导航篇》
来源:互联网 发布:网络授权书可以作假吗 编辑:程序博客网 时间:2024/05/07 12:10
继续向大家分享 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 是一款非常轻量的插件,能够帮助你实现自定义的下拉导航菜单效果(需要翻墙),使用示例:
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
>
特别说明:需要翻墙访问(⊙﹏⊙b汗)
插件下载 效果演示
最后推荐一款强大的导航菜单在线制作工具》CSS Menu Maker
原文地址:http://www.cnblogs.com/lhb25/archive/2013/02/20/50-jquery-plugins-b.html- 2012年最有用的50款 jQuery 插件集锦——《导航篇》
- 2012年最有用的50款 jQuery 插件集锦——《网页布局篇》
- 2012年最有用的50款 jQuery 插件集锦——《表单篇》
- 2012年最有用的50款 jQuery 插件集锦——《网页布局篇》
- 2012年最有用的50款 jQuery 插件集锦——《表单篇》
- 2012年最有用的50款 jQuery 插件集锦——《网页布局篇》
- Web 开发最有用的50款 jQuery 插件集锦——《综合篇》
- Web 开发最有用的50款 jQuery 插件集锦——《图片特效篇》
- Web 开发最有用的50款 jQuery 插件集锦——《内容滑块篇》
- Web 开发最有用的50款 jQuery 插件集锦——《内容滑块篇》
- Web 开发最有用的50款 jQuery 插件集锦——《内容滑块篇》
- jQuery 插件集锦——《导航篇》
- 2010年75个最有用的jQuery插件
- 10款有用的JQuery插件
- 分享13款非常有用的 jQuery 插件
- 推荐12款非常有用的流行 jQuery 插件
- 40款非常有用的 jQuery 插件推荐
- 15款很有用的jquery时钟插件和教程
- 数据库中的记录如何递归添加TreeView
- kernel IPv6 路由学习笔记(1)原理.
- android, 删除SD卡音乐文件。通过getContentResolver读取音乐文件,可以获取到一个完整的路径,直接new File(这括号写获取的路径).delete();
- C#中ref和out关键字
- HBase 系统架构
- 2012年最有用的50款 jQuery 插件集锦——《导航篇》
- 模板说明
- POJ 2196
- test
- 哈夫曼树和哈夫曼编码
- 常用模式
- 那些帮助你成为优秀前端工程师的讲座——《Web 应用篇》
- Ural 1068
- adb shell 命令详解