用js创建easyui layout为什么创建不了，用html却可以不明白

easyuilayoutjqueryjavascripthtml

解决方案 »

  1.   

    layout要有center区域，代码里的“中”还是west
      

  2.   

    ID为mainLayout的DIV需要指定高和宽，另外要先$("#mainLayout").layout();然后再添加区域
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link href="../Scripts/jquery-easyui-1.4/themes/black/easyui.css" rel="stylesheet" />
        <script src="../Scripts/jquery-easyui-1.4/jquery.min.js"></script>
        <script src="../Scripts/jquery-easyui-1.4/jquery.easyui.min.js"></script>
    <title>Insert title here</title>
    <script type="text/javascript">
        $(function () {
            $("#mainLayout").layout();
            $("#mainLayout").layout('add', {
                region: 'north',
                title: '北',
                heigth: 60
            });
            $("#mainLayout").layout('add', {
                region: 'south',
                title: '南',
                heigth: 100
            });
            $("#mainLayout").layout('add', {
                region: 'east',
                title: '西',
                width: 100
            });
            $("#mainLayout").layout('add', {
                region: 'west',
                title: '东',
                width: 100
            });
            $("#mainLayout").layout('add', {
                region: 'center',
                title: '中'
            });
        })</script>
    </head>
    <body>
    <div id="mainLayout" style="width:500px; height:500px;"></div></body>
    </html>
      

  3.   

    另外楼主的height写成了heigth了，上面的代码也跟着错了
      

  4.   

    copy你的代码也用不了，浏览器报错，说nodeName为空
      

  5.   


    粗心大意了点，我刚刚把一楼说的跟你说得这个问题改过来也没用~~。
    改成html的就可以，不知道为什么.
      

  6.   

    有没有先$("#mainLayout").layout();
      

  7.   

    有啊，直接copy你贴上来的代码，运行还是有问题，不知道是不是我的jquery easyui js有问题。
      

  8.   

    code=html]
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Insert title here</title>
    <link rel="stylesheet" type="text/css" href="easyui-1.4.1/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui-1.4.1/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="css/index-easyui.css">
    <script type="text/javascript" src="easyui-1.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="easyui-1.4.1/jquery.easyui.min.js"></script></head>
    <script type="text/javascript">
    $(function(){
    $("#mainLayout").layout({
    fit:true
    });
    $("#mainLayout").layout('add',{
    region:'north',
    height:60
    });
    $("#mainLayout").layout('add',{
    region:'south',
    height:30,
    bodyCls:'l-south'
    });
    $("#mainLayout").layout('add',{
    region:'east',
    width:100
    });
    $("#mainLayout").layout('add',{
    region:'west',
    width:300,
    title:'导航栏',
    content:navigation

    });
    $("#mainLayout").layout('add',{
    region:'center',
    title:'中'
    });

    $("#navigation").accordion({
    fit:true,
    animate:false,
    border:false
    });

    $("#navigation").accordion('add',{
    title: '测试目录',
    content: mulu
    });
    $("#navigation").accordion('add',{
    title: '新标题',
    content: '新内容'
    });
    });
    </script>
    <body>
    <div id="mainLayout" ></div>
    <div id="navigation" ></div>
    <div id="mulu" style="width: 300px;" >
    <a class="easyui-linkbutton" data-options="plain:true, iconCls:'icon-tree-leaf'" 
    style="width:95%"
    onclick="_openMainMenu('need', '招聘管理', 'NewFile.jsp', 'M' )"
    menu-text='招聘管理'
    >
    招聘管理
    </a>
    <a class="easyui-linkbutton" data-options="plain:true, iconCls:'icon-tree-leaf'" 
    style="width:95%"
    onclick="_openMainMenu('tdn', '简历管理', 'NewFile.jsp', 'Y' )"
    menu-text='简历管理'
    >
    简历管理
    </a>
    </div>
    </body>
    </html>
    [/code]