JQueryUI(三)：Accordion
来源：互联网 发布：淘宝直通车费用 编辑：程序博客网 时间：2024/06/06 17:21
http://www.cnblogs.com/sunfishlu/archive/2009/09/25/1573678.html
1：Accordion的结构，首先我们先看一个基本的例子。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>A basic accordion implementation</title>
<link href="../css/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../css/redmond/ui.accordion.css" />
<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../ui/ui.core.js"></script>
<script type="text/javascript" src="../ui/ui.accordion.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#accordion").accordion({ header: "h3" });
});
</script>
<style type="text/css">
body
{
font: 62.5% "Trebuchet MS" , sans-serif;
margin: 10px;
}
</style>
</head>
<body>
<div id="accordion">
<div>
<h3>
<a href="#">First</a></h3>
<div>
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3>
<a href="#">Second</a></h3>
<div>
Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3>
<a href="#">Third</a></h3>
<div>
Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>
</body>
</html>
效果图如下：
![L~6[}X@MFAMV9]`78U)GMLC](http://images.cnblogs.com/cnblogs_com/sunfishlu/WindowsLiveWriter/JQueryUIAccordion_13386/L~6%5B%7DX@MFAMV9%5D%6078U)GMLC_thumb.jpg "L~6[}X@MFAMV9]`78U)GMLC")
2：配置项
2.1：active，初始化时，展开的项。
2.2：event，切换选项卡的事件，默认为click。（mouseover，鼠标滑过切换）
2.3：alwaysOpen，保证有一个选项是展开的。默认为true。
2.4：animated，设置动画效果。
2.5：autoHeight，各个选项的高度设置为所有内容中最高的高度。
2.6：clearStyle，折叠面板后自动清除 height 和 overflow 样式.
2.7：fillSpace，充满容器的高度，此时autoHeight无效。
2.8：header，设置头元素，$("#accordion").accordion({ header: "h3" });
2.9：navigation
2.10:navigationFilter
3：方法
3.1：destroy，销毁。$("#accordion").accordion("destroy");
3.2：enable和disable。$("#accordion").accordion("enable");和$("#accordion").accordion("disable");允许和禁止操作面板。
3.3：activate"，打开指定的面板。$("#accordion").accordion("activate", choice - 1);
3.4：option，得到折叠面板的属性。
获取：var clearStyle = $("#id").accordion("option","clearStyle");
设置：$("#id").accordion("option","clearStyle",true);
- JQueryUI(三)：Accordion
- jqueryui的accordion组件
- JQueryUI（Accordion）
- jQueryUI插件实现accordion效果
- JqueryUI学习笔记-手风琴面板accordion
- JqueryUI学习笔记-手风琴面板accordion .
- Using jQueryUI accordion to create a vertical menu
- 【jQueryUI】利用accordion、tabs与自定义面板布局
- jqueryUI
- [jQueryUI]
- JQueryUI
- JqueryUI
- JQueryUI
- 基于ASP.NET MVC的JQueryUI控件开发(3) - Accordion控件设计
- SlickGrid 样式在 JQueryUI Accordion 和 Bootstrap框架的兼容性解决办法
- Accordion
- accordion
- Accordion
- javascript的面向对象
- VS2010/MFC编程入门之前言
- CocoaPods版本升级
- java异步验证且json字符串传递
- 当想对她发脾气时6大克制办法
- JQueryUI(三)：Accordion
- 漫谈Google的Native Client技术（一）--历史动力篇（Web本地计算发展史）
- start_button.js-2014-04-21
- 列出目录下的文件
- 关于ssl证书的格式转换以及各方式的使用 收集以及案例,工具soap-ui
- 什么pdf转Word转换器可以批量转换
- Hibernate程序之实现功能（CRUD）
- SSH+Extjs4.2后台分页（易错点解析）
- Go语言 如果查询度量内存和GC使用状况
