jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单

更新时间：2016年08月17日 14:34:59 作者：zhyue93

这篇文章主要介绍了jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下

先给大家看下效果图，效果图展示如下：

关键代码如下所示：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页</title>
<link href="../JQuery/easyui/themes/icon.css" rel="stylesheet" />
<link href="../JQuery/easyui/themes/default/easyui.css" rel="stylesheet" />
<script src="../JQuery/jquery.min.js"></script>
<script src="../JQuery/easyui/jquery.easyui.min.js"></script>
<script src="../JQuery/easyui/locale/easyui-lang-zh_CN.js"></script>
<style>
#div_leftmenu div {
font-size: 15px;
}
#div_leftmenu div ul {
margin: 15px 15px 15px 15px;
padding: 0;
overflow: hidden;
line-height: 40px;
}
#div_leftmenu div ul li {
list-style-type: none;
background-color: #DFE2E3;
text-align: center;
margin-bottom: 15px;
}
#div_leftmenu div ul li:last-of-type {
margin-bottom: 0;
}
</style>
</head>
<body class="easyui-layout" style="font-size: 15px;">
<form id="form1" runat="server">
<!--左侧-->
<div data-options="region:'west',title:' '" style="width: 250px; background-color: powderblue; font-size: inherit;">
<div id="div_welcome" style="margin: 15px 0 15px 0; text-align: center;">admin,欢迎您</div>
<div id="div_leftmenu" class="easyui-accordion">
<div title="Title1">
<ul>
<li>的撒打算的</li>
</ul>
</div>
<div title="Title2">
</div>
<div title="Title3">
</div>
</div>
</div>
<!--右侧-->
<div data-options="region:'center',title:' '" style="padding: 5px;">
</div>
</form>
</body>
</html>

好了，代码到此结束。下篇文章给大家介绍jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法

以上所述是小编给大家介绍的jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

jquery.Jwin.js 基于jquery的弹出层插件代码
测试页面需要引用jquery的js文件插件文件jquery.Jwin.js jquery.Jwin插件的使用参数都有详细说明
2012-05-05
JSON格式化输出
本文主要是记录一个项目中用到的对输出的json进行格式化的小技巧，也是看到一位朋友分享的，这里mark一下，有需要的小伙伴也可以参考下。
2014-11-11
jquery 步骤进度轴插件的实现代码
今天给大家分享一个jquery插件之步骤进度轴的实现思路，这个功能在一些网站注册账号时一般都会用到，今天就通过实例代码给大家详细介绍下，感兴趣的朋友跟随小编一起看看吧
2021-05-05
jquery的index方法实现tab效果
jquery的index方法实现tab效果，需要的朋友可以参考下。
2011-02-02
jquery radio 操作代码
jquery radio 操作代码，需要的朋友可以参考下。
2011-03-03
jQuery.trim() 函数及trim()用法详解
jQuery.trim()函数用于去除字符串两端的空白字符。jquery trim函数应用非常广泛，下面小编给大家讲解jquery.trim（）函数及trim()用法详解，需要的朋友可以参考下
2015-10-10
jQuery中 noConflict() 方法使用
如何在页面上同时使用 jQuery 和其他框架？
2013-04-04
Jquery插件 easyUI属性汇总
找了个时间看了下EasyUI插件，对它的插件感觉是很舒服，特地把Easy UI的大部分功能属性做了一下汇总。使用easyUI的朋友可以收藏下。
2011-01-01
jQuery 1.3 和 Validation 验证插件1.5.1
jQuery 1.3已经新鲜出炉了，你可以通过jQuery 的官方博客查看相关细节。jQuery三岁了！
2009-07-07
详谈jQuery.load()和Jsp的include的区别
下面小编就为大家带来一篇详谈jQuery.load()和Jsp的include的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-04-04