网站开发常用jQuery插件总结(11)折叠插件Akordeon
实现折叠菜单,可以完全不使用插件。如果使用jquery的话,实现起来也比较简单,我们只需要定义折叠菜单的样式,然后使用jquery中的渐隐渐现就可以了。如果我们自己写折叠菜单,可以方便的使用我们自己的样式。如果我们使用jquery插件,需要根据插件的设计来定义样式,其实就是修改插件的Akordeon默认样式。在这里既然写的是jquery插件,也就把折叠插件Akordeon算进去了。Akordeon插件定义了很多固定的样式,如折叠菜单的高度宽度等。我在测试时,简单的修改了插件默认的样式,自定义的样式仍然使用的是覆盖的方式。其实在项目开发中,如果需要使用这个插件,完全可以修改Akordeon插件自带的样式。
一.Akordeon插件功能
以折叠的方式显示内容,不一定非要用于导航。官方demo中演示的为非导航功能。而在本例中,演示的是导航功能。但是官方的实例可能完全不适合现实项目的应用。
二.Akordeon官方地址
http://www.egrappler.com/a-stylo-modern-jquery-accordion-akordeon/,在官方中有属性的说明,在demo中也简单的说明了属性的应用。
三.Akordeon使用方法
1.文件引用
<script src="jquery.min.js" type="text/javascript"></script>
<link href="jquery.akordeon.css" rel="stylesheet" type="text/css" />
<script src="jquery.akordeon.js" type="text/javascript"></script>
2.使用的样式。简单的修改了demo中自带的样式,如高度、宽度等。覆盖了自带样式的颜色和字体。但是在ie8以下现实不正常。现实项目中,如果需要使用Akordeon,完全可以修改jquery.akordeon.css。本文只是测试,所以只是做了简单的修改。样式代码有点多,所以在这里不贴出了。有兴趣的可以看“测试文件”。修改后的样式为:
3.js代码。js代码很简单,使用的属性也就是官方的那几个,需要了解的可以看官方文档。本例使用的代码为:
$(document).ready(function () {
$('#buttons').akordeon({buttons: false});
//官方提供的第二个demo,使用的属性.
//$('#button-less').akordeon({ buttons: false, toggle: true, itemsOrder: [2, 0, 1] });
});
4.html代码。Akordeon插件主要使用ul来实现折叠菜单。可以看“测试文件”。
测试文件:折叠插件Akordeon
最新文章
- sudo 命令情景分析
- 单用户模式下修改root密码
- CentOS 安装Zookeeper-3.4.6 单节点
- iOS运行时工具-cycript
- springMVC 拦截器简单配置
- 在Windows2008系统中利用IIS建立FTP服务器
- hdu 1520
- 【转载】【JQuery学习】jQuery插件开发
- compass模块----Helpers
- 搭建MHA环境【1】规划+linux相关的设置
- 在Ubuntu上录制视频和编辑(很全)
- 腾讯QQ会员技术团队:人人都可以做深度学习应用:入门篇(下)
- Java基础知识二次学习-- 第一章 java基础
- cpp智能指针
- .Net业务搭配实用技术栈
- npm与yarn常用命令对比
- JS页面跳转代码怎么写?总结了5种方法
- linux内核initcall
- 使用Python3.x抓取58同城(南京站)的演出票的信息
- CSS------如何让大小不一样的div顶部对齐