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>

结果：

手风琴加载出来了

时间： 2024-10-11 08:44:56

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

IE浏览器中，JQuery EasyUI的form('load')方法只能加载一次的问题

项目中的页面用到了EasyUI,表单加载数据时,调用了form('load')方法.用Chrome.Firefox访问均没问题,可是用IE浏览器访问时,数据不论怎么修改,加载的都是第一次的数据.这疑似是一直在加载第一次的缓存.于是查资料发现,原来IE浏览器对Jquery EasyUI的支持不好,缓存了表单第一次加载的数据.以后每次加载时,都会从缓存中调用.于是在ajax方法中加入cache:false,取消缓存便解决了. 1 $.ajax({ 2 cache:false, //取消缓存 3 ur

jQuery页面滚动图片等元素动态加载实现

一.关于滚动显屏加载常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商城页面. 或者是前段时间写血本买了个高档耳机的京东商城页面,或者是新浪微博之类. 这些页面图片数量多,而且比较大,少说百来K,多则上兆.要是页面载入就一次性加载完毕.乖乖,估计黄花都变成黄花菜了.所以,我们得做点什么,避免这种糟糕的状况发生.目前很流行的做法就是滚动动态加载,显示屏幕之外的图片默认是不加载的,随着页面的滚动,这个要显示图片的区域进入了浏览器可是窗口范围,则触发图片的加载显示.

在Win64系统上动态加载无签名驱动：WIN64LUD

1.WIN64LUD的全称是WIN64 Load Unsigned Driver,功能如其名,在WIN64系统上加载无签名的驱动. 2.支持Windows 7/8/8.1/2008R2/2012/2012R2(7600/7601/9200/9600). 3.使用方法很简单,运行『win64lud.exe』,如果提示初始化成功,直接把驱动文件拖到窗口里,再按下回车就能加载了. 4.在『DemoForTest』文件夹里有几个无签名的驱动,可以用WIN64LUD加载,配合DBGVIEW可以看到效果.

echarts在.Net中使用实例(二) 使用ajax动态加载数据

前一篇文章链接:echarts在.Net中使用实例(一) 简单的Demo 通过上一篇文章可以知道和echarts参考手册可知,series字段就是用来存储我们显示的数据,所以我们只需要用ajax来获取series的值就可以. option 名称描述 {color}backgroundColor 全图默认背景,(详见backgroundColor),支持rgba,默认为无,透明 {Array} color 数值系列的颜色列表,(详见color),可配数组,eg:['#87cefa', 'rgba

jquery easyui使用（三）······datagrid加载数据(未解决)

<div id="table_Data"> </div> $("#table_Data").datagrid({ toolbar: '#myToolbar', url: urlAshx, queryParams: { "action": "carlist" }, method: 'post', width: 'auto', height: '500px', iconCls: 'icon-edit', s

【转】扩展easyUI tab控件，添加加载遮罩效果

在easyui下自己生成遮罩效果的方法 (function () { $.extend($.fn.tabs.methods, { //显示遮罩 loading: function (jq, msg) { return jq.each(function () { var panel = $(this).tabs("getSelected"); if (msg == undefined) { msg = "正在加载数据,请稍候..."; } $("<di

easyui combobox 在datagrid中动态加载数据

场景:datagrid 中用编辑框修改数据,有一个列使用的combobox 在可编辑的时候需要动态绑定数据,这个数据是在根据其他条件可变的思路:在每次开启编辑框的时候动态绑定数据, datagrid开启 onClickCell: onClickCell//点击触发 onAfterEdit:onAfterEdit//编辑完单元格之后触发的事件 $.extend($.fn.datagrid.methods, { editCell: function (jq, param) { return jq

C#-TrackBar-RGB颜色窗体背景色,动态加载颜色效果,通过Trackbar设置,值255.---ShinePans

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; namespace 设置窗体颜色_TrackBar_ { public

jquery getScript动态加载JS方法改进详解[转载]

转载自http://www.jb51.net/article/31973.htm 有许多朋友需要使用getScript方法动态加载JS,本文将详细介绍此功能的实现方法 $.getScript(url,callback) 这个方法是jquery自身提供的一个用于动态加载js的方法.当网站需要加载大量js时,动态的加载js就是一个比较好的方法,当需要某个功能时再将相应的js加载进来. 但是自己在使用过程中却发现了一些不尽如意的地方. 每次需要执行该功能的时候都会去请求一次这个js,这样不是在帮倒忙嘛