网站开发常用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插件总结(11)折叠插件Akordeon的更多相关文章
- 网站开发常用jQuery插件总结(六)关键词说明插件cluetip
我们开发的网站,总有它一定的用途.如企业站用来宣传企业或展示产品,技术站用来分享自己的思路和经验.既然网站有了它的用途,那么就拥有了它本身的关键词(关键词说明网站的主要内容).例如企业站的关键词大部分 ...
- 网站开发常用jQuery插件总结(七)背景插件backstretch
一.backstretch插件功能 优化网站外观.主要用于设置页面背景图片,也可以设置html元素的背景图片.背景图片可以设置多张,在间隔时间内循环显示. 注 但是在设置背景图片时,如果图片过大,网站 ...
- 网站开发常用jQuery插件总结(五)滚动条插件nanoscroller
网站在展示信息时,如果信息量过大,解决方法主要有三种.1.分页,将信息分页显示.2.整页显示,但是页面过长,影响浏览体验.3.使用滚动条,而默认滚动条样式太单一,用户体验不友好.所以我们需要美化滚动条 ...
- 网站开发常用jQuery插件总结(二)弹出层插件Lightbox_me
网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下, ...
- 网站开发常用jQuery插件总结(三)拖拽插件gridster
1.gridster插件功能 实现类似于win8 磁贴拖拽的功能 2.gridster官方地址 http://gridster.net/ 在官方的网站上也有插件的帮助和实例,但是按照官方的说明,我在本 ...
- 网站开发常用jQuery插件总结(二)弹出层插件Lightbox
网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下, ...
- 网站开发常用jQuery插件总结(12)固定元素插件scrolltofixed
这个插件在前段时间用过一次,当时是改一个网站.要求顶部的菜单栏随着滚动条的滚动而固定.也大体写了一下,不过在文章中也只是提了一下,文章地址:jQuery插件固定元素位置. 在这篇文章中,再进行总结一下 ...
- 网站开发常用jQuery插件总结(十)菜单插件superfish
网站对于菜单的依赖其实并不是很大,我们完全可以不使用菜单来设计网站,显示网站内容.但是如果网站的分类太多,“也许”使用菜单作为网站导航可以使 用户 更方便的寻找内容.superfish插件就是用于实现 ...
- 网站开发常用jQuery插件总结(八)标签编辑插件Tagit
一.Tagit插件功能 提高网站交互性,增加用户体验.至于其它的功能,还真没有.用一个input text就可以替换了它.但是text没有输入提示功能,而tagit拥有这个功能.官方示例如下图: 将关 ...
随机推荐
- lab 1实验报告
练习1:理解通过make生成执行文件的过程. 1.操作系统镜像文件ucore.img是如何一步一步生成的? 生成 bin/kern 部分 生成 init.o 生成 readline.o 生成 stdi ...
- Excel引用
Excel引用 1.绝对引用 相对引用 A:A 左右拉的话会自动变为 B:B,C:C等等 $A:$A 左右拉的话仍然是A列 A$1:A1 上下拉的话,会变成A$1:A2,A$1:A3等等
- js http 请求 多个相同参数名传值
最近在用js和api做对接的时候需要传参数类似于 rights=a1&rights=a2 因为有相同的参数名,试过很多方法都被覆盖了. 最后终于发现可以通过rights=[a1,a2]的方式, ...
- mysql数据库表中判断字段是否存在,如果不存在则创建该字段
$key_answer = 'answer'.$question_num; $test_question = mysql_query('DESCRIBE question_manage {$key_q ...
- Io_Language
Object ancestor := method ( prototype := self proto if (prototype != Obejct, writeln ("Slots of ...
- cglib源码分析(三):Class生成策略
cglib中生成类的工作是由AbstractClassGenerator的create方法使用相应的生成策略完成,具体代码如下: private GeneratorStrategy strategy ...
- AIDL通信原理
AIDL (Android Interface Definition Language),通过定义通信接口来实现进程间通信.这是Google提供的一种在安卓应用进程间通信的工具.所以要了解AIDL的通 ...
- [整理]:oracle spool 用法
本文来自iDB Stock:http://www.idb-stock.net/idb/2011/06/01/153.html 1.spool的作用是什么? spool的作用可以用一句话来描述:在sql ...
- 【邮件】imap与pop3的区别
文:铁乐猫 2015 10月14日 今天替一位在外出差的用户安装和设置完foxmail用于收发邮件,到下午被告知对方用foxmail发完邮件后,在网页上登录邮箱后并没有看到在foxmail中" ...
- (转)MyEclipse2014配置Tomcat开发JavaWeb程序JSP以及Servlet
1.安装准备 1).下载安装MyEclipse2014,这已经是最新版本. 2).下载Tomcat 官网:http://tomcat.apache.org/ 我们选择8.0: http://tomca ...