JQuery UI accordion学习笔记
一个简单的JQuery UI accordion例子如下:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.accordion.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#accordion").accordion();
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p>
Section 1 content.
</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>
Section 2 content.
</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>
Section 3 content.
</p>
</div>
</div>
</body>
</html>
选项:
以下所有例子中的$('#accordion')的语法是$('.selector'),由于我上面的例子中的selector(选择器是)$('#accordion'),所以下面的例子出现的全是$('#accordion')了.
1.1 active 这个参数是设置默认选项的,默认情况下是0,也就是第一个。
如上面的例子中所示,当没有指定它的值时,默认选择是0.所以显示的是Section 1中的内容:Section 1 content.
初始化设置改为:$('#accordion').accordion({ active: 1 });时,则初始显示的是Section 2中的内容:Section 2 content.
在初始化之后的获取和设置此项值的例子:
//获取 var active = $('#accordion').accordion('option', 'active');
//设置,将值设为1 $('#accordion').accordion('option', 'active', 1);
1.2 animated 这个参数是设置动画效果 默认选项是‘slide’
可以设置你喜欢的动画效果,或不使用动画效果(设置为false),除了默认设置,还可以使用'bounceslide'和'easeslide'效果,这时需要UI Effects Core .
初始化设置例: $('#accordion').accordion({ animated: 'bounceslide' });
在初始化之后的获取和设置实例:
//获取 var animated = $('#accordion').accordion('option', 'animated');
//设置 $('#accordion').accordion('option', 'animated', 'bounceslide');
1.3 autoHeight 默认是true,如果设置,所有内容部分的高被设定为其中最高内容的高。 初始化设置:$('#accordion').accordion({ autoHeight: false });
初始化以后的获取或设置
//获取 var autoHeight = $('#accordion').accordion('option', 'autoHeight');
//设置 $('#accordion').accordion('option', 'autoHeight', false);
1.4 clearStyle 默认是false.如果设置,则会把accordion默认设置的height或其它的样式清除掉.如果你的accordin项中的内容是动态的话,设置这项是一种很好的选择.
这一项不能和选项autoHeight一起使用.因为它们是冲突的.
初始化设置 $('#accordion').accordion({ clearStyle: true });
设置这一项后,你会发现你的每一个accordion时section所占的高度(或空间)会不一致的,也就是随它们的内容多少而改变高度(或空间).
初始化后的获取和设置如下:
//获取 var clearStyle = $('#accordion').accordion('option', 'clearStyle');
//设置 $('#accordion').accordion('option', 'clearStyle', true);
1.5 collapsible 默认选项是false.如果设置这项,则所有的accordion sections都能折叠起来,当点击同一个部分时,section会在折叠和展开之间切换.
初始化设置:$('#accordion').accordion({ collapsible: true });
初始化以后的获取或设置
//获取 var autoHeight = $('#accordion').accordion('option', 'collapsible');
//设置 $('#accordion').accordion('option', 'collapsible', false);
1.6 event 默认是'click' . 如何展开选项。可以设置成双击、鼠标滑过等。
初始化设置例:$('#accordion').accordion(event:"mouseover");
初始化后的获取或设置
//获取var event = $('#accordion').accordion('option', 'event');
//设置$('#accordion').accordion('option', 'event', 'mouseover');
1.7 fillSpace ,充满父元素的高(如果在没有被其他容器包容时,也就是你第一次选择显示的accrodion部分的高),默认为false ,使用此项,autoHeight无效。
(注意:clearStyle,autoHeight,fillSpace三项的区别:
个人经验是:clearStyle是每个section都根据自己的内容调整自己的高度,sections相互之间不影响)
autoHeight: 所有的sections都以他们之中最高的那部分的高度作为基准.
fillSpace: 则是根据初始化时,默认显示的那部分(也就是active的值)的高度为基准(这有个条件就是accordion没有受其他的容器的限制,也就是没有置于其他的容器中时).
初始化设置例:$('#accordion').accordion({ fillSpace: true });
和active一起使用的实例:$('#accordion').accordion({active: 1, fillSpace: true });
初始化后的获取和设置请参考上面的 ,此处省略。
1.8 header,设置头元素,默认值为:'> li > :first-child,> :not(li):even' (JQuery ui官网的文档上是这么写的,但到现在我也不太明白这是为啥,希望明白的哪位兄弟能告诉我一下,在这先谢谢了).
默认情况下,accordion的header元素是anchors,如上面的例子或例2中所示:
例子2:
<div id="accordion">
<a href="#">First header</a>
<div>First content</div>
<a href="#">Second header</a>
<div>Second content</div>
</div>
如果你使用了不同的元素作为header,则只需用选项header明确说明即可.如例子3所示,使用了<h1>标记header元素:
<div id="accordion">
<h1>First header</h1>
<div>First content</div>
<h1>Second header</h1>
<div>Second content</div>
</div>
则只需使用 $('#accordion').accordion({ header: 'h1' });指定header元素是h1即可.如果你的accordion内容中有包含有链接,而同时你又是使用<a>元素作为headers,此时你只需给那些作为header的<a>元素增加一个class属性即可.
如<a class="header">然后使用:$('#accordion').accordion({ header: 'a.header' });问题即可解决!
//getter var header = $('.selector').accordion('option', 'header');
//setter $('.selector').accordion('option', 'header', 'h3');
1.9
分享到:
相关推荐
jQuery UI Accordion是一款非常流行的JavaScript库,用于创建交互式的折叠菜单。这个组件使得网页内容能够以一种有序且节省空间的方式展现,用户可以逐个展开或关闭各个部分,从而提高用户体验。在本文中,我们将...
在网页开发中,jQuery UI 是一个非常流行的库,它提供了许多可重用的用户界面组件,包括我们今天要讨论的“Accordion(手风琴)”功能。jQuery UI Accordion 是一个垂直折叠的内容区域,允许用户逐个展开或收起内容...
jQuery UI 中文帮助文档是学习和解决问题的重要参考,它详细解释了各个组件的使用方法和API。此外,社区论坛、Stack Overflow 和其他在线资源也是获取帮助和分享经验的好地方。 综上所述,jQuery UI 是一个功能强大...
其中,jQuery UI中的Accordion组件是一种常见的交互元素,它将多个内容区块折叠在一个有限的空间内,用户可以逐个展开查看。本文将深入探讨jQuery Accordion的源码,帮助开发者理解其工作原理,以便于自定义和优化。...
**jQuery UI组件详解** jQuery UI 是一个强大的前端开发框架,基于流行的JavaScript库jQuery构建,它提供了丰富的用户界面组件,能够帮助开发者快速构建交互性、视觉吸引力强的网页应用。jQuery UI 包含了大量的...
《jQuery UI:深入理解与应用》 jQuery UI是基于JavaScript库jQuery的一个扩展,它提供了一系列丰富的用户界面组件,包括但不限于对话框(Dialogs)、日期选择器(Datepickers)、拖放功能(Drag and Drop)、排序...
首先,jQuery Accordion是jQuery UI库的一部分,它提供了一种优雅的方式来展示内容,特别是当内容过多时。这种效果将多个区块堆叠在一起,每次只显示一个区块的内容,其余则保持折叠状态。通过点击标题,可以展开或...
在lwme-jqueryui-demo这个压缩包中,可能包含了多个示例文件,它们展示了Autocomplete的不同用法和配置,可以帮助开发者更好地理解和运用这个组件。通过学习这些示例,你可以掌握如何根据项目需求灵活定制...
**jQuery UI:一个强大的前端开发工具包** jQuery UI是一个基于jQuery JavaScript库的扩展,它提供了一整套可交互的用户界面组件,包括对话框、拖放功能、日期选择器、进度条、排序列表等。这个名为"jquery-ui-...
在“前端项目-jqueryui-touch-punch”这个项目中,包含的文件可能是jQuery UI Touch Punch的源码或示例。通过解压并研究这个项目,你可以了解到如何将这两个工具结合到自己的Web应用中,以提供兼容触摸设备的用户...
- **API文档**:`jQuery_jQueryUI.chm`文件是jQuery UI的API参考,详尽地列出了每个组件的方法、属性和事件,是开发过程中不可或缺的参考资料。 **jQuery Easy-UI技术手册** jQuery Easy-UI 是基于jQuery和jQuery ...
jQuery UI 是一个基于 jQuery JavaScript 库的开源框架,它提供了丰富的用户界面组件和交互效果,如拖放功能、对话框、日历、...同时,持续学习和关注jQuery UI的更新,可以确保你的项目始终采用最新的技术和最佳实践。
1. **组件(Widgets)**:jQuery UI的核心在于它的组件,这些组件是预先封装好的UI元素,如Accordion(手风琴)、Autocomplete(自动完成)、Button(按钮)、Calendar(日历,即日期选择器)、Dialog(对话框)、...
jQuery UI是一个强大的JavaScript库,它扩展了基础的jQuery功能,提供了丰富的用户界面组件,如对话框(Dialog)、拖放(Draggable)、可排序(Sortable)和可折叠(Accordion)等。在这个项目中,jQuery UI被用来...
本资源是《jQuery UI 开发指南》一书中的示例源代码,对于学习和理解jQuery UI的使用具有极大的帮助。 首先,我们要了解jQuery UI的基本结构。jQuery UI的核心是其组件系统,这些组件包括但不限于:`accordion`(手...
jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。 编辑本段组件构成 jQuery UI ...
5. **布局(Layout)**:jQueryUI的Resizable和Accordion等功能可以帮助开发者创建灵活的布局结构,适应不同的屏幕尺寸和设备类型,从而实现响应式设计。 6. **兼容性**:jQueryUI V1.12.1与jQuery V1.12.4的搭配...
1. **jQuery UI组件**:jQuery UI 包含了多种组件,如日期选择器(Datepicker)、对话框(Dialog)、拖放功能(Draggable)、可排序列表(Sortable)和可折叠面板(Accordion)。这些组件极大地简化了网页的交互设计...
- **选择组件**:根据项目需求,选择要使用的jQuery UI组件,如Dialog(对话框)、Accordion(手风琴)、DatePicker(日期选择器)等。 - **初始化组件**:通过JavaScript代码初始化组件,设置相应的选项和事件监听...
《jQuery UI组件集合详解》 jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集,它提供了丰富的交互效果和可自定义的主题,使得开发者能够更轻松地创建出美观、功能丰富的网页应用。这个组件集合涵盖了...