转载

简洁小巧的jQuery手风琴插件

简要教程

jquery.accordion是一款非常实用的jQuery手风琴插件。它代码简单，文件体积小，并且兼容IE8浏览器。它通过简单的设置即可以得到漂亮的手风琴图片切换效果。

简洁小巧的jQuery手风琴插件

查看演示 下载插件

使用方法

使用该手风琴插件需要引入jQuery，jquery.accordion.js和jquery.accordion.css文件。

<link rel="stylesheet" type="text/css" href="css/jquery.accordion.css"> <script src="lib/jquery-1.11.1.min.js"></script> <script src="js/jquery.accordion.js"></script>

HTML结构

该手风琴特效的HTML结构非常简单：使用一个<div>作为包裹元素，在里面使用一个无序列表来制作手风琴项。

<div class="accordion">   <ul>     <li class="item1 active"><a href=""></a></li>     <li class="item2"><a href=""></a></li>     <li class="item3"><a href=""></a></li>     <li class="item4"><a href=""></a></li>     <li class="item5"><a href=""></a></li>   </ul> </div>

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该手风琴插件。

<script type="text/javascript">   $(document).ready(function(){     $(".accordion").accordion();   }); </script>

配置参数

该jQuery手风琴插件有3个可用的配置参数。

$(".accordion").accordion({   max:"620px",   //展示项区域的图片宽度     默认620px   min:"140px",   //隐藏区域的图片宽度       默认140px   speed:"5000"   //速度 });

本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/jQuery/Accordion/201510122659.html

正文到此结束

所属分类：编程技术

本文标签： ip HTML java 代码 http CSS src UI lib jquery 参数配置插件 DOM js Document
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

简洁小巧的jQuery手风琴插件

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流