jQueryUI1.10.0新版本学习（widget-Accordion）

最新推荐文章于 2018-11-21 17:23:14 发布

菲雨雾歌

最新推荐文章于 2018-11-21 17:23:14 发布

阅读量1.9k

点赞数

分类专栏：前台设计文章标签： jqueryui jQueryUI

本文链接：https://blog.csdn.net/robert8803/article/details/8573282

版权

前台设计专栏收录该内容

26 篇文章 0 订阅

订阅专栏

本次学习的主要内容是关于新版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>

这里jQueryUI通过h3来识别每个新的面板标题，随后的一个div即为面板内容。

构建了类似此种HTML结构以后，只需要在js上调用一下accordion方法即可对这个网页对象应用jQueryUI的可折叠风格面板。

$(document).ready(function(){
	$('#accordion').accordion();
});

2.可全折叠设置

和tabs控件一样，这个accordion控件也支持collapse属性，应用此属性可以使鼠标在单击同一个可折叠面板的标题上应用收起功能，将全部的面板都收起来。

$(document).ready(function(){
	$('#accordion').accordion({
		 collapsible: true
	});
});

3.高度自适应设置

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>

js如下：

$(document).ready(function(){
	$('#accordion').accordion({
          header: "> div > h3"
        }).sortable({
        axis: "y",
        handle: "h3",
        stop: function( event, ui ) {
          // 由于在拖拽排序的时候IE浏览器不会模糊，所以这里启用focusout
          ui.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;
}

HTML：

<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>

这里在可折叠面板的外面加入了一个区域div，初始大小是规定了的。

JS：

$(document).ready(function(){
	$('#accordion').accordion({
        heightStyle: "fill"
    });
	
	$( "#accordion-resizer" ).resizable({
      minHeight: 140,
      minWidth: 200,
      resize: function() {
        $( "#accordion" ).accordion( "refresh" );
      }
    });
});

然后通过上述js，分别修改了可折叠面板的高度类型为fill，使之可以适应外部的div。

第二个加入resizable是为了使外部的div大小可以通过鼠标拖动调整。每次调整以后，调用accordion的refresh来刷新可折叠面板的变化。

如上，就是基本的可折叠面板控件的用法，大家还可以在官网API获得更多的信息与用法资料。