jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含7805字,纯文字阅读大概需要12分钟。
内容图文
在上篇文章给大家介绍了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>
结果:
接下来不断尝试
一:usertype = "1";
二:usertype = "2";
三:usertype = "3";
四:
//导航菜单绑定初始化 $(".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使用(二)之可折叠面板动态加载无效果的解决方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。