EasyUI 手风琴

来源：互联网发布：知乎国际政治编辑：程序博客网时间：2024/05/19 05:40
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Basic Accordion - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="H:/jQuery EasyUI/jquery-easyui-1.5.3/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="H:/jQuery EasyUI/jquery-easyui-1.5.3/themes/icon.css"><link rel="stylesheet" type="text/css" href="H:/jQuery EasyUI/jquery-easyui-1.5.3/demo.css"><script type="text/javascript" src="H:/jQuery EasyUI/jquery-easyui-1.5.3/jquery.min.js"></script><script type="text/javascript" src="H:/jQuery EasyUI/jquery-easyui-1.5.3/jquery.easyui.min.js"></script></head><body><h2>基本的手风琴</h2><p>单击面板标题以显示其内容</p><div style="margin:20px 0 10px 0;"></div><div class="easyui-accordion" style="width:500px;height:300px;"><div title="相关" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;"><h3 style="color:#0099FF;">jQuery 之 手风琴</h3><p>手风琴是jQuery的easyui框架的一部分，它可以让你更容易地在网页上定义你的常用组件</p></div><div title="帮助" data-options="iconCls:'icon-help'" style="padding:10px;"><p>The accordion allows you to provide multiple panels and display one or more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p> </div><div title="数型菜单" data-options="iconCls:'icon-search'" style="padding:10px;"><ul class="easyui-tree"><li><span>食物</span><ul><li><span>肉品</span><ul><li>牛肉</li><li>羊肉</li></ul></li><li><span>蔬菜</span><ul><li>卷心菜</li><li>洋葱</li><li>青瓜</li></ul></li></ul></li></ul></div></div></body></html>
阅读全文
0 0