首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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_left {
width: 250px;
background-color: powderblue;
font-size: inherit;
}
#div_welcome {
margin: 15px 0 15px 0;
text-align: center;
}
#div_leftmenu div {
font-size: 15px;
}
#div_leftmenu div ul {
margin: 15px 15px 15px 15px;
padding: 0;
overflow: hidden;
line-height: 40px;
max-height: 200px;
}
#div_leftmenu div ul li {
list-style-type: none;
background-color: #DFE2E3;
text-align: center;
margin-bottom: 15px;
}
#div_leftmenu div ul li:hover{
list-style-type: none;
background-color: powderblue;
text-align: center;
margin-bottom: 15px;
cursor:pointer;
}
#div_leftmenu div ul li:last-of-type {
margin-bottom: 0;
}
</style>
</head>
<body class="easyui-layout" style="font-size: 15px;" data-options="fit:true">
<form id="form1" runat="server">
<!--左侧-->
<div id="div_left" data-options="region:'west',title:' '">
<div id="div_welcome">admin,欢迎您</div>
<div id="div_leftmenu" class="easyui-accordion">
</div>
</div>
<!--右侧-->
<div data-options="region:'center',title:' '" style="padding: 5px;">
</div>
</form>
<script type="text/javascript">
var usertype = "0";
$(document).ready(function () {
var div_leftmenu_html = '';
switch (usertype) {
case "0"://车辆管理员
div_leftmenu_html += '<div title="车辆登记">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>车辆登记</li>';
div_leftmenu_html += ' <li>添加</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
div_leftmenu_html += '<div title="用车分派">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>用车分派</li>';
div_leftmenu_html += ' <li>分派</li>';
div_leftmenu_html += ' <li>详情</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
div_leftmenu_html += '<div title="审核人管理">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>审核人管理</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
break;
case "1"://学校领导
div_leftmenu_html += '<div title="用车审批">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>用车审批</li>';
div_leftmenu_html += ' <li>审批</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
div_leftmenu_html += '<div title="用车申请">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>用车申请</li>';
div_leftmenu_html += ' <li>申请</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
div_leftmenu_html += '<div title="通知">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>通知</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
break;
case "2"://司机
div_leftmenu_html += '<div title="司机确认">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>司机确认</li>';
div_leftmenu_html += ' <li>确认</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
break;
case "3"://普通教师
div_leftmenu_html += '<div title="用车申请">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>用车申请</li>';
div_leftmenu_html += ' <li>申请</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
div_leftmenu_html += '<div title="通知">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>通知</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
break;
default:
break;
}
$("#div_leftmenu").html(div_leftmenu_html);
});
</script>
</body>
</html>

结果：

jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法

接下来不断尝试

一：usertype = "1";

jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法

二：usertype = "2";

jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法

三：usertype = "3";

jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法

四：

//导航菜单绑定初始化
$(".easyui-accordion").accordion();

结果：没效果

五：修改后的代码如下

<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_left {
width: 250px;
background-color: powderblue;
font-size: inherit;
}
#div_welcome {
margin: 15px 0 15px 0;
text-align: center;
}
#div_leftmenu div {
font-size: 15px;
}
#div_leftmenu div ul {
margin: 15px 15px 15px 15px;
padding: 0;
overflow: hidden;
line-height: 40px;
max-height: 200px;
}
#div_leftmenu div ul li {
list-style-type: none;
background-color: #DFE2E3;
text-align: center;
margin-bottom: 15px;
}
#div_leftmenu div ul li:hover{
list-style-type: none;
background-color: powderblue;
text-align: center;
margin-bottom: 15px;
cursor:pointer;
}
#div_leftmenu div ul li:last-of-type {
margin-bottom: 0;
}
</style>
</head>
<body class="easyui-layout" style="font-size: 15px;" data-options="fit:true">
<form id="form1" runat="server">
<!--左侧-->
<div id="div_left" data-options="region:'west',title:' '">
<div id="div_welcome">车辆管理员1,欢迎您</div>
</div>
<!--右侧-->
<div data-options="region:'center',title:' '" style="padding: 5px;">
</div>
</form>
<script type="text/javascript">
var usertype = "0";
$(document).ready(function () {
var div_leftmenu_html = '<div id="div_leftmenu" class="easyui-accordion">';//
switch (usertype) {
case "0"://车辆管理员
div_leftmenu_html += '<div title="车辆登记">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>车辆登记</li>';
div_leftmenu_html += ' <li>添加</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
div_leftmenu_html += '<div title="用车分派">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>用车分派</li>';
div_leftmenu_html += ' <li>分派</li>';
div_leftmenu_html += ' <li>详情</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
div_leftmenu_html += '<div title="审核人管理">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>审核人管理</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
break;
case "1"://学校领导
div_leftmenu_html += '<div title="用车审批">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>用车审批</li>';
div_leftmenu_html += ' <li>审批</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
div_leftmenu_html += '<div title="用车申请">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>用车申请</li>';
div_leftmenu_html += ' <li>申请</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
div_leftmenu_html += '<div title="通知">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>通知</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
break;
case "2"://司机
div_leftmenu_html += '<div title="司机确认">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>司机确认</li>';
div_leftmenu_html += ' <li>确认</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
break;
case "3"://普通教师
div_leftmenu_html += '<div title="用车申请">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>用车申请</li>';
div_leftmenu_html += ' <li>申请</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
div_leftmenu_html += '<div title="通知">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>通知</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
break;
default:
break;
}
div_leftmenu_html += '</div>';
$("#div_left").append(div_leftmenu_html);
//导航菜单绑定初始化
$(".easyui-accordion").accordion();
});
</script>
</body>
</html>

结果：

jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法

手风琴加载出来了。

以上所述是小编给大家介绍的jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法

- Author -

zhyue93

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js加强的经典分页实例
Mar 15 Javascript
jQuery简单tab切换效果实现方法
Apr 08 Javascript
jQuery中 delegate使用的问题
Jul 03 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
JS组件Bootstrap Table布局详解
May 27 Javascript
JavaScript中的Array 对象（数组对象）
Jun 02 Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
详解一个基于套接字实现长连接的express
Mar 28 Javascript
JS实现百度搜索框
Feb 25 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
在javascript中使用com组件的简单实现方法
Aug 17 #Javascript
检举信(8) 说明书(38) 意向书(73) 委托书(259) 竞聘书(31) 任命书(51) 协议书(568) 担保书(46) 标语(336) 公证书(45)
You might like
农民和部队如何穿矿
2020/03/04 星际争霸
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
php页面函数设置超时限制的方法
2014/12/01 PHP
PHP中使用imagick生成PSD文件缩略图教程
2015/01/26 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
PHP curl 或 file_get_contents 获取需要授权页面的方法
2017/05/05 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
jQuery总体架构的理解分析
2011/03/07 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
2013/11/08 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
学习vue.js中class与style绑定
2016/12/03 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
vue 计时器组件的实现代码
2017/09/14 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
js实现简单的秒表
2020/01/16 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
numpy中的delete删除数组整行和整列的实例
2018/05/09 Python
Python如何爬取实时变化的WebSocket数据的方法
2019/03/09 Python
python实现图片上添加图片
2019/11/26 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
10分钟理解CSS3 Grid布局
2018/12/20 HTML / CSS
大学生创业感言
2014/01/25 职场文书
大学生毕业自我鉴定范文
2014/02/03 职场文书
企业宣传标语
2014/06/09 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
工作失职造成投诉的检讨书范文
2014/10/05 职场文书
react 项目中引入图片的几种方式
2021/06/02 Javascript
Python合并pdf文件的工具
2021/07/01 Python