EasyUI之手风琴Accordion

来源：互联网发布：在淘宝上买东西有技巧编辑：程序博客网时间：2024/05/21 10:59

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

0 0