您的位置：首页 > Web前端 > JQuery

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

2012-03-23 17:15 706 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航