网站开发常用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

你可能感兴趣的:(jquery插件)