本文主要是介绍jQueryUI1.10.0新版本学习（widget-Accordion），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
本次学习的主要内容是关于新版jQueryUI的可折叠面板控件Accordion
1.默认功能的可折叠面板
默认功能的可折叠面板提供了通过鼠标点击标题栏来展开或者收起面板内容的功能。如图：
构建这个可折叠面板十分简单。HTML如下：
<!DOCTYPE html><html lang="zh_CN"><head><meta charset="utf-8"><title>jQueryUI学习</title><script type="text/javascript" src="jQueryUI/js/jquery-1.9.0.js"></script><script type="text/javascript" src="jQueryUI/js/jquery-ui-1.10.0.custom.js"></script><link rel="stylesheet" href="jQueryUI/css/smoothness/jquery-ui-1.10.0.custom.css" type="text/css" /><link rel="stylesheet" href="css/main.css" type="text/css"/><script src="js/main.js"></script></head><body><div id='accordion'><h3>折叠面板1</h3><div>面板内容A</div><h3>折叠面板2</h3><div>面板内容B</div><h3>折叠面板3</h3><div>面板内容C</div></div></body>
</html>构建了类似此种HTML结构以后，只需要在js上调用一下accordion方法即可对这个网页对象应用jQueryUI的可折叠风格面板。
$(document).ready(function(){$('#accordion').accordion();
});2.可全折叠设置
和tabs控件一样，这个accordion控件也支持collapse属性，应用此属性可以使鼠标在单击同一个可折叠面板的标题上应用收起功能，将全部的面板都收起来。
$(document).ready(function(){$('#accordion').accordion({collapsible: true});
});accordion控件可以通过设置 heightStyle: "content" ，达到控件高度依据面板内容变化的效果。
$(document).ready(function(){$('#accordion').accordion({heightStyle: "content"});
});4.拖拽改变折叠面板顺序
通过sortable可以实现拖拽来改变折叠面板的顺序。如图：
这里和tabs控件的sortable使用方法类似。不过HTML应该使用div将每个面板包起来，然后通过设置header来区分可折叠面板的标题和内容。
如下HTML：
<div id='accordion'><div class="group"><h3>折叠面板1</h3><div>面板内容A</div></div><div class="group"><h3>折叠面板2</h3><div>面板内容B<ul><li>1</li><li>2</li><li>3</li><li>4</li></ul></div></div><div class="group"><h3>折叠面板3</h3><div>面板内容C</div></div>
</div>$(document).ready(function(){$('#accordion').accordion({header: "> div > h3"}).sortable({axis: "y",handle: "h3",stop: function( event, ui ) {// 由于在拖拽排序的时候IE浏览器不会模糊，所以这里启用focusoutui.item.children( "h3" ).triggerHandler( "focusout" );}});
});5.可折叠面板小图标的更换
可以通过icons来调整图标。
如图，通过设定一个带有header和activeHeader的对象的icons值，来更换另一种面板小图标。
js如下:
$(document).ready(function(){var icons = {header: "ui-icon-circle-arrow-e",activeHeader: "ui-icon-circle-arrow-s"};$('#accordion').accordion({icons: icons});
});6.大小可调的折叠选项卡
通过配置heightStyle 为fill可以让折叠选项卡根据外部框的大小而自动改变自身大小，调整内容排布。
先看HTML和CSS：
CSS：
#accordion-resizer {padding: 10px;width: 350px;height: 220px;
}<div id="accordion-resizer" class="ui-widget-content"><div id='accordion'><h3>折叠面板1</h3><div>面板内容A</div><h3>折叠面板2</h3><div>面板内容B<ul><li>1</li><li>2</li><li>3</li><li>4</li></ul></div><h3>折叠面板3</h3><div>面板内容C</div></div></div>JS：
$(document).ready(function(){$('#accordion').accordion({heightStyle: "fill"});$( "#accordion-resizer" ).resizable({minHeight: 140,minWidth: 200,resize: function() {$( "#accordion" ).accordion( "refresh" );}});
});第二个加入resizable是为了使外部的div大小可以通过鼠标拖动调整。每次调整以后，调用accordion的refresh来刷新可折叠面板的变化。
如上，就是基本的可折叠面板控件的用法，大家还可以在官网API获得更多的信息与用法资料。
这篇关于jQueryUI1.10.0新版本学习（widget-Accordion）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
