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


Posted in Javascript onAugust 17, 2016

先给大家看下效果图,效果图展示如下:

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使用(一)之可折叠面板的布局手风琴菜单,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
JavaScript浏览器选项卡效果
Aug 25 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
JS获得URL超链接的参数值实例代码
Jun 21 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
May 23 Javascript
java和javascript获取word文档的书签位置对比
Jun 19 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
node.js从数据库获取数据
May 08 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 #Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 #Javascript
Node.js中使用jQuery的做法
Aug 17 #Javascript
学习Angular中作用域需要注意的坑
Aug 17 #Javascript
js enter键激发事件实例代码
Aug 17 #Javascript
jquery过滤特殊字符',防sql注入的实现方法
Aug 17 #Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 #Javascript
You might like
在PHP中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
PHP实现bitmap位图排序与求交集的方法
2016/07/28 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
js关闭当前页面(窗口)的几种方式总结
2013/03/05 Javascript
利用jquery写的左右轮播图特效
2014/02/12 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
javascript 通过键名获取键盘的keyCode方法
2017/12/31 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
2020/05/09 Javascript
Python MD5文件生成码
2009/01/12 Python
Python基础篇之初识Python必看攻略
2016/06/23 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
Python3匿名函数用法示例
2018/07/25 Python
Python3批量生成带logo的二维码方法
2019/06/24 Python
Python转换时间的图文方法
2019/07/01 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
解决Keras中CNN输入维度报错问题
2020/06/29 Python
Python定时任务APScheduler安装及使用解析
2020/08/07 Python
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
syb养殖创业计划书
2014/01/09 职场文书
英语简历自我评价
2014/01/26 职场文书
市场营销毕业生自荐信范文
2014/04/01 职场文书
市场营销专业毕业生求职信
2014/07/21 职场文书
大学四年个人总结
2015/03/03 职场文书
2015年实习单位评语
2015/03/25 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
MySQL中一条update语句是如何执行的
2022/03/16 MySQL