EasyUI——手风琴控件

来源：互联网发布：足球球员数据软件编辑：程序博客网时间：2024/05/19 06:38

因为网上的我找了很多都是下载的EasyUi的包然后导入的·· 我这里不造什么原因一直下载不下来包然后才发现可以直接添加依赖包

<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/demo.css">    <link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/icon.css"><script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script><script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/jquery.easyui.min.js"></script>

这个样子我感觉用到的地方挺多的比如导航部分（树形的）也可以用来展示页面……

用法也很简单外部div 设置class ="easyui-accordion"

每一层的div 设置一个title 作为QwQ 词穷了反正就是头部看代码吧 …… div里面自由发挥

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/demo.css"><link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/icon.css"><script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script><script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/jquery.easyui.min.js"></script></head><body><div class="easyui-accordion"><div title="水果">          <ul><li>西瓜</li><li>苹果</li><li>橘子</li>                </ul></div>    <div title="球">          <ul>        <li>足球</li>        <li>篮球</li>        </ul></div>        <div title="蔬菜">          <ul>        <li>芹菜</li>        <li>土豆</li>                <li>菠菜</li>        <li>黄瓜</li>        </ul></div></div></body></html>

-----------------------------------------------------------------------华丽丽的分割线----------------------------------------------------------------------

还有一种自动添加的

这个应该就是官方的Demo吧

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Accordion Actions - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/demo.css">    <link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/icon.css"><script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script><script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/jquery.easyui.min.js"></script>  <meta name="keywords" content="jquery,ui,easy,easyui,web"><meta name="description" content="easyui help you build your web page easily!"></head><body><h2>Accordion Actions</h2><p>Click the buttons below to add or remove accordion items.</p><div style="margin:20px 0 10px 0;"><a href="javascript:void(0)" class="easyui-linkbutton" onclick="selectPanel()">Select</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="addPanel()">Add</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="removePanel()">Remove</a></div><div id="aa" class="easyui-accordion" style="width:500px;height:300px;"><div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;"><h3 style="color:#0099FF;">Accordion for jQuery</h3><p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p></div></div><script type="text/javascript">function selectPanel(){$.messager.prompt('Prompt','Please enter the panel title:',function(s){if (s){$('#aa').accordion('select',s);}});}var idx = 1;function addPanel(){$('#aa').accordion('add',{title:'Title'+idx,content:'<div style="padding:10px">Content'+idx+'</div>'});idx++;}function removePanel(){var pp = $('#aa').accordion('getSelected');if (pp){var index = $('#aa').accordion('getPanelIndex',pp);$('#aa').accordion('remove',index);}}</script></body></html>

0 0