jQuery Accordion插件
<!-- 内容 --><h1>jQuery UI Accordion 示例</h1>
本篇介绍 Accordion 组件(类似手风琴可以摺叠的 UI 组件)。
基本用法
jQuery Accordion UI 组件可以把一个包含有具有 Header (标题头)和 Content(内容)对的容器转变成 Accordion 组件。
比如如下一个 Id=”accordion”Div HTML 元素。
<div id="accordion"><h1>Section 1</h1><div><p>Description 1</p></div><h2>Section 2</h2><div><p>Description 3</p></div><h3>Section 3</h3><div><p>Description 3</p><ul><li>List item one</li><li>List item two</li><li>List item three</li></ul></div>
</div>
对于 <div id=”accordion”> 裡面的元素,According 允许使用任意的标记,只要是一个 Header 紧接著一个 Content,比如上面的 H3,你可以换成 H1,H2等其它标记,或者通过 Header 选项来配置。 有了这样的 HTML 元素,然后对其使用 Accordion 方法,就将该 HTML 元素变成 Accordion 样式了
<script>$("#accordion").accordion();
</script>
本例完整代码如下:
<!doctype html>
<html lang="en">
<head><meta charset="utf-8" /><title>jQuery UI Demos</title><link rel="stylesheet" href="themes/trontastic/jquery-ui.css" /><script src="scripts/jquery-1.9.1.js"></script><script src="scripts/jquery-ui-1.10.1.custom.js"></script><script>$(function () {});</script>
</head>
<body><div id="accordion"><h1>Section 1</h1><div><p>Description 1</p></div><h2>Section 2</h2><div><p>Description 3</p></div><h3>Section 3</h3><div><p>Description 3</p><ul><li>List item one</li><li>List item two</li><li>List item three</li></ul></div></div><script>$("#accordion").accordion();</script>
</body>
</html>
摺叠内容
Accordion 组件预设情况下总有一项内容是展开的,如说图 Section1的内容是可见的,点击其它部分的标题,该部分内容可见,但无法将所有内容都摺叠起来,如果要支持所有部分都可以摺叠,可以通过配置 collapsible 属性,如:
$(function() {$( "#accordion" ).accordion({collapsible: true});});
自定义图标
可以自定义 Accordion 组件标题前的图标,预设的图标为箭头(未展开是箭头向右,展开时向下),使用 jQuery CSS 框架中定义的类或是通过自定义背景图像类,可以重新配置这两个图标:
$(function() {var icons = {header: "ui-icon-circle-arrow-e",activeHeader: "ui-icon-circle-arrow-s"};$( "#accordion" ).accordion({icons: icons});$( "#toggle" ).button().click(function() {if ( $( "#accordion" ).accordion( "option", "icons" ) ) {$( "#accordion" ).accordion( "option", "icons", null );} else {$( "#accordion" ).accordion( "option", "icons", icons );}});});
设置 HeightStyle
因为 Accordion 由「Block 级」元素组成(可以参加 CSS 的 display),因此它预设在水平方向佔据父元素的宽度,为了在高度方向也能充满其父容器,可以通过配置 heightStyle 为 fill .HeightStyle 可以使用的值如下:
- “auto”: 所有 Panel 使用最高的那个 Panel 的高度.
- “fill”: 根据父容器的高度来填充.
- “content”: 每个 Penel 的高度取决于其内容.
<!doctype html>
<html lang="en">
<head><meta charset="utf-8" /><title>jQuery UI Demos</title><link rel="stylesheet" href="themes/trontastic/jquery-ui.css" /><script src="scripts/jquery-1.9.1.js"></script><script src="scripts/jquery-ui-1.10.1.custom.js"></script><style>#accordion-resizer {padding: 10px;width: 350px;height: 300px;}</style><script>$(function () {$("#accordion").accordion({heightStyle: "fill"});});$(function () {$("#accordion-resizer").resizable({minHeight: 140,minWidth: 200,resize: function () {$("#accordion").accordion("refresh");}});});</script>
</head>
<body><h3 class="docs">Resize the outer container:</h3><div id="accordion-resizer" class="ui-widget-content"><div id="accordion"><h3>Section 1</h3><div><p>Mauris mauris ante, blandit et,ultrices a, suscipit eget,quam. Integer ut neque. Vivamus nisi metus,molestie vel, gravida in,condimentum sit amet, nunc. Nam a nibh.Donec suscipit eros. Nam mi.Proin viverra leo ut odio.Curabitur malesuada.Vestibulum a velit eu antescelerisque vulputate.</p></div><h3>Section 2</h3><div><p>Sed non urna. Donec et ante.Phasellus eu ligula.Vestibulum sit amet purus.Vivamus hendrerit,dolor at aliquet laoreet,mauris turpis porttitor velit,faucibus interdum telluslibero ac justo.Vivamus non quam.In suscipit faucibus urna. </p></div><h3>Section 3</h3><div><p>Nam enim risus, molestie et,porta ac,aliquam ac, risus. Quisque lobortis.Phasellus pellentesque purus in massa.Aenean in pede. Phasellusac libero ac telluspellentesque semper.Sed ac felis. Sed commodo,magna quis lacinia ornare,quam ante aliquam nisi,eu iaculis leo purusvenenatis dui. </p><ul><li>List item one</li><li>List item two</li><li>List item three</li></ul></div><h3>Section 4</h3><div><p>Cras dictum. Pellentesquehabitant morbitristique senectus et netuset malesuadafames ac turpis egestas.Vestibulumante ipsum primis in faucibusorci luctuset ultrices posuere cubiliaCurae;Aenean lacinia maurisvel est. </p><p>Suspendisse eu nisl. Nullam ut libero.Integer dignissim consequat lectus.Class aptent taciti sociosqu ad litoratorquent per conubia nostra,per inceptos himenaeos. </p></div></div></div></body>
</html>
滑鼠移动式自动打开内容
预设情况下,打开 Accordion 某个部分内容,是点击该部分标题,如果需要实现移动滑鼠到该部分自动展开内容,可以设置 event 属性,例如:
$(function () {$("#accordion").accordion({event: "mouseover"});
});
支持调整顺序
使用 sortable 方法允许重新调整 Accordion 每个部分的顺序,可以通过拖放的方法调整顺序:
查看源代码列印帮助
<!doctype html>
<html lang="en">
<head><meta charset="utf-8" /><title>jQuery UI Demos</title><link rel="stylesheet" href="themes/trontastic/jquery-ui.css" /><script src="scripts/jquery-1.9.1.js"></script><script src="scripts/jquery-ui-1.10.1.custom.js"></script><style>/* IE has layout issues when sorting (see #5413) */.group {zoom: 1;}</style><script>$(function () {$("#accordion").accordion({header: "> div > h3",collapsible: true}).sortable({axis: "y",handle: "h3",stop: function (event, ui) {// IE doesn't register the blur when sorting// so trigger focusout handlers to remove .ui-state-focusui.item.children("h3").triggerHandler("focusout");}});;});</script>
</head>
<body><div id="accordion"><div class="group"><h3>Section 1</h3><div><p>Description 1</p></div></div><div class="group"><h3>Section 2</h3><div><p>Description 2</p></div></div><div class="group"><h3>Section 3</h3><div><p>Description 3</p><ul><li>List item one</li><li>List item two</li><li>List item three</li></ul></div></div><div class="group"><h3>Section 4</h3><div><p>Description 4</p></div></div></div></body>
</html>
注意,这裡使用 Header 属性,标题部分由 div ,h3 共同构成。
</div>
jQuery Accordion插件相关推荐
- jQuery Accordion
jQuery Accordion jQuery Accordion 插件用于创建折叠菜单.它通常与嵌套的列表.定义列表或嵌套的 div 一起使用.选项用于指定结构.激活的元素和定制的动画. 该插件现在 ...
- jQuery的Accordion插件
Accordion插件 用于创建折叠菜单 通常与嵌套的列表.定义列表或嵌套的div一起使用 选项用于指定结构.激活的元素和定制的动画 标准代码 jQuery('#list1a').accordion( ...
- 超强1000个jquery极品插件!(连载中。。。。最近更新20090710)
花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++++++++++++++++++++++++ ...
- 30个创意出色的非常实用的jquery框架插件-(视觉大背景,瀑布流效果)
jQuery是在网页设计师和开发者最近的热门话题之一.人们使用它的广泛范围从个人博客到企业网站,目前流行的视觉大背景滚动效果,瀑布流图片阴影效果,图片缩放,动态标签复制,html5音频播放,视频播放等 ...
- 超强1000个jquery极品插件!(感觉好强大,转载一下)
花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++++++++++++++++++++++++ ...
- 超强1000个jquery极品插件!
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ accordion类 +++++++++++++ ...
- 超强1000个jquery极品插件!(连载中。。。。最近更新20100127)
1.导航类 (1) Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. 二手图书 二手书 特价书 旧书网 (2)jQuery-Horizont ...
- 风琴html插件,简洁实用的BootStrap jQuery手风琴插件
前端 简洁实用的jQuery手风琴插件|DEMO_jQuery之家-自由分享jQuery.html5.css3的插件库 简洁实用的jQuery手风琴插件 A jQuery accordion plug ...
- 1000个jquery极品插件
花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. 花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收 ...
最新文章
- php theme_path,PHP_Yii2主题(Theme)用法详解,本文实例讲述了Yii2主题(Theme) - phpStudy
- 前端工程师系列,TCP复习及浓缩总结(全干货,支持面试)
- ffmpeg学习1 音视频基本概念
- sql-server基础三(select 、update、insert,delete)
- ue4相机_[UE4]偏门实用技巧合集
- DCMTK:可加载的DICOM数据字典
- 数据分析体系构建那点事!
- 项目小记: IFRAME引起内存泄露的解决方法
- cemtos7.2搭建samba
- 5000并发_彻底理解 jmeter 的线程数与并发数之间的关系
- [转] PostgreSQL的PITR技术(Point-In-Time-Recovery)
- linux 解压war到root_unzip命令解压war包方法
- 高速公路上边有没有人脸识别摄像头_格灵深瞳:人脸识别最新进展以及工业级大规模人脸识别实践探讨...
- Android reboot那点事儿
- 《数字化决策》连载 | 七:探索并建立决策模型(3)
- 20180504_android传感器入门之光线传感器
- 单位dB(分贝)的含义和好处,dBm(dBmW 分贝毫瓦)的含义 dB的含义
- 微信小程序webview缓存处理
- 按键精灵的IsFileExit和ExistFile函数
- 中电丽声CELISEN 专业20W~150W平面变压器 planar transformer,助力pc和手机快速充电 type-c pd更加高效节能