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)调试结果