网站前端_EasyUI.基础入门.0005.使用EasyUI Accordion组件的最佳姿势?

2024-11-30 技术教程

1. 基础的手风琴

<divid="a"class="easyui-accordion"data-options="width:500,height:300"><divdata-options="iconCls:'icon-ok',title:'about',bodyCls:'accordion_padding'"><h4>AccordionforjQuery</h4><p>AccordionisapartofeasyuiframeworkforjQuery.Itletsyoudefineyouraccordioncomponentonwebpagemoreeasily.</p></div><divdata-options="iconCls:'icon-help',title:'help',bodyCls:'accordion_padding'"><p>Theaccordionallowsyoutoprovidemultiplepanelsanddisplayoneormoreatatime.Eachpanelhasbuilt-insupportforexpandingandcollapsing.Clickingonapanelheadertoexpandorcollapsethatpanelbody.Thepanelcontentcanbeloadedviaajaxbyspecifyinga'href'property.Userscandefineapaneltobeselected.Ifitisnotspecified,thenthefirstpanelistakenbydefault.</p></div><divdata-options="iconCls:'icon-search',title:'tree',bodyCls:'accordion_padding'"><ulclass="easyui-tree"><li><span>第一层</span><ul><li>第1层</li><li>第2层</li><li>第3层</li></ul></li><li>第二层</li><li>第三层</li></ul></div></div>

2. 流式的手风琴

<div><divid="a"class="easyui-accordion"data-options="fit:true"><divdata-options="iconCls:'icon-ok',title:'About',bodyCls:'accordion_padding'"><p>width:100%</p></div><divdata-options="iconCls:'icon-help',title:'help',bodyCls:'accordion_padding',href:'_contents.html'"></div></div></div>

3. 异步加载数据

4. 手风琴的控制

<div><ahref="javascript:void(0);"class="easyui-linkbutton"onclick="javascript:select();">选中</a><ahref="javascript:void(0);"class="easyui-linkbutton"onclick="javascript:add();">添加</a><ahref="javascript:void(0);"class="easyui-linkbutton"onclick="javascript:remove();">删除</a></div><hr><divid="a"class="easyui-accordion"data-options="width:500,height:300"><divdata-options="iconCls:'icon-ok',title:'about',bodyCls:'accordion_padding'">about</div><divdata-options="iconCls:'icon-help',title:'help',bodyCls:'accordion_padding'">help</div></div><scriptsrc="js/jquery-easyui/jquery.min.js"></script><scriptsrc="js/jquery-easyui/jquery.easyui.min.js"></script><scriptsrc="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script><scripttype="text/javascript">functionselect(){$.messager.prompt('信息','请输入你要选中的面板标题或面板索引?',function(data){varn=parseInt(data);console.log(data,typeof(data));if(!isNaN(n)){$('#a').accordion('select',n);}else{$('#a').accordion('select',data);};});};functionadd(){varoptions={iconCls:'icon-reload',title:'reload',content:'reload',bodyCls:'accordion_padding',};$('#a').accordion('add',options);};functionremove(){varselectedItem=$('#a').accordion('getSelected');varselectedIndex=$('#a').accordion('getPanelIndex',selectedItem);$('#a').accordion('remove',selectedIndex);};</script>

5. 手风琴工具组

<divid="a"class="easyui-accordion"data-options="width:500,height:200"><divdata-options="iconCls:'icon-ok',title:'datagrid',tools:[{iconCls:'icon-reload',handler:function(){$('#tb').datagrid('reload');}}]"><tableid="tb"class="easyui-datagrid"data-options="url:'/easyui/data.json',method:'get',fit:true,fitcolumns:true,singleSelect:true"><thead><tr><thdata-options="field:'name',width:'20%'">姓名</th><thdata-options="field:'age',width:'60%'">年龄</th><thdata-options="field:'sex',width:'20%',align:'right'">性别</th></tr></thead></table></div></div>

6. 打开的手风琴

<divid="a"class="easyui-accordion"data-options="width:500,height:200"><divdata-options="iconCls:'icon-search',title:'搜索',collapsed:false,collapsible:false"><inputclass="easyui-searchbox"data-options="fit:true,prompt:'searchsomething'"type="search"></div><divdata-options="iconCls:'icon-about',title:'about',selected:true"><h4>AccordionforjQuery</h4><p>AccordionisapartofeasyuiframeworkforjQuery.Itletsyoudefineyouraccordioncomponentonwebpagemoreeasily.</p></div></div>

7. 开多个手风琴

<divid="a"class="easyui-accordion"data-options="width:500,multiple:true"><divdata-options="iconCls:'icon-ok',title:'PYTHON',bodyCls:'accordion_padding'">PYTHON</div><divdata-options="iconCls:'icon-ok',title:'HTML',bodyCls:'accordion_padding'">HTML</div></div>

注意: 配合容器multiple属性可支持同时展开多个,但是此模式下千万别设置容器的高度,不然由于上一个面板已经展开,下一个面板由于空间被占且高度被限制会导致显示不出来.