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>


jQuery UI Accordion(手风琴)

源代码: "> jquery-accordion/demo/demo.css" />

jQuery Easy UI Accordion(可伸缩面板)组件

Accordion 可伸缩面板组件,基于panel,示例如下: Document $(function(){ $('#ac').accordio...

jQuery插件2(拖拽draggable/放置droppable/排序sortable/面板折叠accordion/横向选项卡tabs/对话框dialog/menu/微调spinner/框提示)

1、拖曳插件——draggable 通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下: $(selector). draggable({options}) options...

jquery accordion 手风琴的使用

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

第30款插件:第25款插件:jquery.accordion.js 纵向手风琴效果插件

描述:这款手风琴效果适用于折叠的菜单,方便使用!用这款插件制作极其方便,只需要定义很少的参数,便可制作出纵向手风琴效果! 图片展示: 兼容浏览器: IE6+/Firefox/Google ...
  • skace
  • skace
  • 2013年01月20日 03:46
  • 471

Jquery实现的手风琴特效-Accordion

  • 2012年02月29日 23:25
  • 470KB
  • 下载

基于jQuery实现的手风琴效果Accordion

在公司使用java ee开发的过程中,对于一些反反复复用到的web前端效果,本屌丝产生了很严重的想把他们封装好,形成各种各样的组件直接引用即可,从而减少无数次的复制粘贴的感觉。由于是自己第一次尝试封装...

【精心推荐】20款优秀 jQuery Accordion(手风琴)特效插件

Accordion(手风琴)是网站中常用的效果之一,用于一组内容(图片、文本等)之间的切换显示。使用 jQuery 能够轻松实现 Accordion 效果,今天这篇文章向大家推荐网站开发中常用的20款...

jquery-UI学习笔记1之拖拽(Draggable)

提高交互性的五种方式:拖拽、消息、变化大小、选择、排序。 拖拽:
  • lqiujh
  • lqiujh
  • 2011年08月04日 13:06
  • 1042

jquery UI 跟随学习笔记——拖拽(Draggable)

jquery UI 跟随学习笔记——拖拽(Draggable) 引言      这周暂时没有任务下达,所以老大给我的任务就是熟悉jquery相关插件,我就先选择了jquery UI 插件,以及jqu...
  • D_Anne
  • D_Anne
  • 2014年12月05日 16:50
  • 977
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery-ui 手风琴组件Accordion学习(可上下拖拽)
举报原因:
原因补充:

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