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 树形菜单 - 树形网格动态加载动态加载树形网格有助于从服务器上加载部分的行数据,避免加载大型数据的长时间等待.本教程将向您展示如何创建带有动态加载特性的树形网格(Tree ...
雷林鹏分享：jQuery EasyUI 树形菜单 - 树形网格惰性加载节点
jQuery EasyUI 树形菜单 - 树形网格惰性加载节点有时我们已经得到充分的分层树形网格(TreeGrid)的数据. 我们还想让树形网格(TreeGrid)按层次惰性加载节点. 首先,只加载 ...
jQuery页面滚动图片等元素动态加载实现
一.关于滚动显屏加载常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商城页面. 或者是前段时间写血本买了个高档耳机的京东商城页面,或者是新浪微博之类. 这些页面图片数量 ...
[转]jQuery页面滚动图片等元素动态加载实现
本文转自:http://www.zhangxinxu.com/wordpress/?p=1259 一.关于滚动显屏加载常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商 ...
geotrellis使用（二十三）动态加载时间序列数据
目录前言实现方法总结一.前言今天要介绍的绝对是华丽的干货.比如我们从互联网上下载到了一系列(每天或者月平均等)的MODIS数据,我们怎么能够对比同一区域不同时间的数据情况,采用 ...
在Win64系统上动态加载无签名驱动：WIN64LUD
1.WIN64LUD的全称是WIN64 Load Unsigned Driver,功能如其名,在WIN64系统上加载无签名的驱动. 2.支持Windows 7/8/8.1/2008R2/2012/20 ...
echarts在.Net中使用实例(二) 使用ajax动态加载数据
通过上一篇文章可以知道和echarts参考手册可知,series字段就是用来存储我们显示的数据,所以我们只需要用ajax来获取series的值就可以. option 名称描述 {color}back ...
easyui复选框树动态加载后台数据，实现自动选中数据库中数据。后台语言是.NET
最近公司做项目用到了easyui复选框树来实现加载不同类型产品.因为我刚刚毕业,现在也算是实习吧,所以一脸懵逼啊.在公司里的一个哥的帮助下 ,我写出来这个EasyUi复选框树了,虽然东西不难,但也是自 ...
jquery easyui使用（三）······datagrid加载数据(已解决)
<div id="table_Data"> </div> $("#table_Data").datagrid({ toolbar: '# ...

随机推荐

sqlalchemy(二)高级用法
sqlalchemy(二)高级用法本文将介绍sqlalchemy的高级用法. 外键以及relationship 首先创建数据库,在这里一个user对应多个address,因此需要在address上增 ...
缓存篇(Cache)~大话开篇
回到占占推荐博客索引闲话杂淡想写这篇文章很久了,但总是感觉内功还不太够,总觉得,要写这种编程领域里的心法(内功)的文章,需要有足够的实践,需要对具体领域非常了解,才能写出来.如今,感觉自己有写这种 ...
[大数据之Spark]——快速入门
本篇文档是介绍如何快速使用spark,首先将会介绍下spark在shell中的交互api,然后展示下如何使用java,scala,python等语言编写应用.可以查看编程指南了解更多的内容. 为了良好 ...
iOS开发-捕获程序崩溃日志
iOS开发中遇到程序崩溃是很正常的事情,如何在程序崩溃时捕获到异常信息并通知开发者,是大多数软件都选择的方法.下面就介绍如何在iOS中实现: 1. 在程序启动时加上一个异常捕获监听,用来处理程序崩溃时 ...
Spring中AOP（通知）的使用
1.新建 Spring Bean Configuration File xml格式的文件 2. xml文件 <bean id="my1" class="xml.M ...
Trace Flag
Trace Flag能够影响Sql Server的行为,主要用于diagnose performance issue,官方解释是: Trace flags are used to temporaril ...
列出场景对象Lightmap属性
首先上效果图: 编辑器代码: using UnityEngine; using UnityEditor; using System.Collections; public class Lightmap ...
MySQL学习笔记九：存储过程，存储函数，触发器
存储过程 1.存储过程由一组特定功能的SQL语句组成,对于大型应用程序优势较大,相对不使用存储过程,具有以下优点: a.性能提高,因为存储过程是预编译的,只需编译一次,以后调用就不须再编译 b.重用性 ...
js 对cookie 的操作
<!DOCTYPE html> <html> <head> <script> function setCookie(cname,cvalue,exday ...
c 语言的位运算符复习
转载和修正,原文连接:http://www.cnblogs.com/911/archive/2008/05/20/1203477.html 位运算是指按二进制进行的运算.在系统软件中,常常需要处理二进 ...

jquery easyui使用（二）······可折叠面板动态加载无效果

jquery easyui使用（二）······可折叠面板动态加载无效果的更多相关文章

随机推荐

热门专题