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

原创 2012年03月23日 17:15:55
<!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>


手风琴效果实现

近日,为了仿照1688阿里巴巴进货网站的手风琴效果,从js实现—-》css实现—–》js实现(js主要是结合jquery实现)进行研究1.实现主要有如下两种思路1.1通过设置在正常情况下left以及在...
  • u014029186
  • u014029186
  • 2016年09月06日 11:53
  • 2017

vuejs组件开发之手风琴菜单组件实例

小图标是引入font-awesome字体图标库绘制的。效果如下图所示: index ...
  • CodingNoob
  • CodingNoob
  • 2017年05月16日 00:04
  • 2532

css3实现手风琴效果

brand Lorme ipsum dolor.... promotion Lorme ipsum dolor.... event Lorme ipsum dolo...
  • tanmuxue
  • tanmuxue
  • 2016年06月02日 14:44
  • 255

几个网页手风琴效果分析

都来自w3cfuns 第一个 jQuery+Css3实现手风琴 body{padding:0;margin:0;font:normal 14px/24px "\5FAE\8F6F...
  • u012787757
  • u012787757
  • 2014年05月04日 20:37
  • 899

JqueryUI学习笔记-手风琴面板accordion

Insert title here /* IE has layout issues when sorting (see #5413) */ .group { zoom: 1 } $(f...
  • dc15822445347
  • dc15822445347
  • 2014年03月31日 12:25
  • 2371

jquery-ui 手风琴组件Accordion学习(可全部折叠)

jQuery UI Accordion - Collapse content //collapsible: true不设这个属性的话,默认总会有一个展开;...
  • lushuaiyin
  • lushuaiyin
  • 2012年03月23日 17:26
  • 2701

jquery实现手风琴效果

//jquery实现手风琴效果 手风琴 $(function(){ $("#accordion").accordion( { header: "h3", event:...
  • xi_weina
  • xi_weina
  • 2012年03月28日 16:44
  • 2105

JQ实现手风琴菜单

效果图预览:html和jq:
  • sinat_19327991
  • sinat_19327991
  • 2017年05月17日 00:19
  • 176

jquery accordion 手风琴的使用

首先,accordion 的意思是手风琴,发音是 饿考滴儿 ,嘿嘿,我觉得大家在使用的时候应该使用它的正确发音,我想是因为效果像是手风琴吧,所以叫做accordion吧,我开始没有仔细看,还以为是ac...
  • haitaoDoit
  • haitaoDoit
  • 2012年03月28日 22:02
  • 5424

原生JS手风琴下拉(修改)

上一篇写的原生JS手风琴。有朋友说在同一页面上不能同时new两个方法。不然就会被覆盖。确实是这样。因为写法的问题所以怎么new都是引用的是一个对象;其他的会被覆盖掉.所以针对这事件,做了修改 java...
  • hao452378531
  • hao452378531
  • 2016年08月03日 12:12
  • 758
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery-ui 手风琴组件Accordion学习(可上下拖拽)
举报原因:
原因补充:

(最多只允许输入30个字)