jquery-ui 手风琴组件Accordion学习(可上下拖拽)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Accordion - Sortable</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.1.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.sortable.js"></script>
	<script src="../../ui/jquery.ui.accordion.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	/* IE has layout issues when sorting (see #5413) */
	.group { zoom: 1 }
	</style>
	<script>
	//(以下说明是个人实验得出的结论,仅供参考)
	//header: "> div > h2" 设置只要符合<div><h2></h2></div>就会有折叠效果
    //axis: "y",可以上下拖动,如果改为x就是左右拖动
	//handle: "h2",指定可以拖动的标签(包括紧邻它的下一个div标签)
	//ui.item.children( "h2" ).triggerHandler( "focusout" );
	//没看懂这行,注释掉也没问题,翻译过来注释是:
	//IE浏览器不登记的模糊排序时
    //触发focusout处理删除。UI状态焦点
	//我想应该是考虑到IE可能不支持这种排序时做的备用处理吧
	$(function() {
		$( "#accordion" )
			.accordion({
				header: "> div > h2"
			})
			.sortable({
				axis: "y",
				handle: "h2",
				stop: function( event, ui ) {
					// IE doesn't register the blur when sorting
					// so trigger focusout handlers to remove .ui-state-focus
					ui.item.children( "h2" ).triggerHandler( "focusout" );
				}
			});
	});
	</script>
</head>
<body>
 
<div class="demo">
 
<div id="accordion">
	<div class="group">
		<h2><a href="#">我的培训1</a></h2>
		<div>
			<p>我的培训1内容</p>
		</div>
	</div>
	<div class="group">
		<h2><a href="#">培训需求调查2</a></h2>
		<div>
			<p>培训需求调查2内容</p>
		</div>
	</div>
	<div class="group">
		<h2><a href="#">培训计划3</a></h2>
		<div>
			<p>培训计划3内容</p>
			<ul>
				<li>List item one</li>
				<li>List item two</li>
				<li>List item three</li>
			</ul>
		</div>
	</div>
	<div class="group">
		<h2><a href="#">培训登记4</a></h2>
		<div>
			<p>培训登记4内容</p>
		</div>
	</div>
</div>
 
</div><!-- End demo -->
 
 
 
<div class="demo-description">
<p>可以拖拽的手风琴组件</p>
</div><!-- End demo-description -->
 
</body>
</html>


你可能感兴趣的:(UI,function,Class,div,sorting,stylesheet)