`
niulanshan
  • 浏览: 531466 次
文章分类
社区版块
存档分类
最新评论

EasyUI之手风琴Accordion

 
阅读更多

1、实例背景

EasyUI实现手风琴Accordion，并获取Accordion中的标题


2、实现实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>EasyUI之手风琴Accordion</title>
		<link rel="stylesheet" href="../themes/black/easyui.css" />
		<link rel="stylesheet" href="../themes/icon.css" />
		<link rel="stylesheet" href="../css/demo.css" />
		<script type="text/javascript" src="../js/jquery.min.js" ></script>
		<script type="text/javascript" src="../js/jquery.easyui.min.js" ></script>
		<script>
			$(document).ready(function(){
				$("#btn").click(function(){
					var pad = $('#accordion').accordion('getSelected');
					var opt = $("#accordion").accordion("options");
					var panels =  $("#accordion").accordion("panels");
					var index = $('#accordion').accordion('getPanelIndex', pad);
					var pan = $("#accordion").accordion("getPanel",index);
					for(var i=0;i<panels.length;i++)
					{
						console.info(panels[i].panel('options').title);
					}
					console.dir(pan[0]);
				});
			});
		</script>
	</head>
	<body>
		<div id="accordion" class="easyui-accordion" style="width:1330px;height:600px;">
	        <div title="第一季度" data-options="closable:true" style="padding:10px;">
	            <label>第一季度</label>
	        </div>
	        <div title="第二季度" data-options="closable:true" style="padding:10px;">
	            <label>第二季度</label>      
	        </div>
	        <div title="第三季度" data-options="closable:true" style="padding:10px;">
	            <label>第三季度</label>
	        </div>
	        <div title="第四季度" data-options="closable:true" style="padding:10px;">
	            <label>第四季度</label>
	        </div>
	    </div>
	    <div>
	    	<button id="btn">获取</button>
	    </div>
	</body>
</html>

3、实现结果

（1）初始化


（2）调试结果


分享到：
| EasyUI之选项卡Tabs
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics