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 相关文章推荐
javascript encodeURI和encodeURIComponent的比较
Apr 03 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
将文本输入框内容加入表中的js代码
Aug 18 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
jquery实现全选、不选、反选的两种方法
Sep 06 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
May 14 Javascript
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 Javascript
VueQuillEditor富文本上传图片(非base64)
Jun 03 Javascript
Vue实现穿梭框效果
Sep 30 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新手上路(十二)
2006/10/09 PHP
PHP开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
jQuery 获取URL参数的插件
2010/03/04 Javascript
理解Javascript_10_对象模型
2010/10/16 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
angular4中关于表单的校验示例
2017/10/16 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
Python3.x对JSON的一些操作示例
2017/09/01 Python
Django中url的反向查询的方法
2018/03/14 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
基于Django实现日志记录报错信息
2019/12/17 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
scrapy头部修改的方法详解
2020/12/06 Python
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
网络技术支持面试题
2013/04/22 面试题
应届生骨科医生求职信
2013/10/31 职场文书
打造完美自荐信
2014/01/24 职场文书
护士试用期自我鉴定
2014/02/08 职场文书
军训考核自我鉴定
2014/02/13 职场文书
检举信的格式及范文
2014/04/04 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书