easyui 简单框架界面

最新推荐文章于 2022-05-10 14:26:28 发布

DayDay_Code

最新推荐文章于 2022-05-10 14:26:28 发布

阅读量1.2k

点赞数

分类专栏： easyui 文章标签： easyui

本文链接：https://blog.csdn.net/commandbaby/article/details/20040943

版权

easyui 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<body class="easyui-layout">
    <div data-options="region:'north',split:true" title="标题" style="height:100px; width:100px;padding:20px;" > @*北 上面  split:是否可改变大小(拖拉) padding：边界填充 *@
        上面
    </div>

    <div data-options="region:'south',spilt:true" title="下面标题"   style="height:100px;padding:10px;background:#efefef;"> @*南 下面*@
      <div class="easyui-layout" data-options="fit:true" style="background:#ccc;">  @*fit:显示边框*@
            <div data-options="region:'center'">下面左边</div>  
            <div data-options="region:'east',split:true" style="width:200px;">下面右边</div>  
        </div>  
    </div>

    <div data-options="region:'east',iconCls:'icon-reload',split:true" title="右边标题" style="width:180px;">  
        <ul class="easyui-tree" data-options="url:'tree_data.json'"></ul>  @*data-options="url:'tree_data.json'"？*@
      右边
    </div>  

    <div data-options="region:'west',spilt:true" title ="左边菜单" style="width:280px;padding:1px;overflow:hidden;">
     <div class="easyui-accordion" data-options="fit:true,border:false">  
             <div title="菜单1" style="padding:10px;overflow:auto;">  
                <p>菜单1</p>  
                <p>菜单1</p>  
            </div>  
            <div title="菜单2"   style="padding:10px;">  
               菜单2
            </div>  
            <div title="菜单3" data-options="selected:true" style="padding:10px">  @* selected:true 默认展开菜单*@
               菜单3
            </div>  
        </div>
    </div>

            
   <div data-options="region:'center'" title="主显示框" style="overflow:hidden;">  @*中间主菜单*@
       <div class="easyui-tabs" data-options="fit:true,border:false">  
            <div title="标签1" data-options="closable:true" style="padding:20px;overflow:hidden;">   
                <div style="margin-top:20px;">  </div>  
            </div>  
          <div title="标签2" data-options="closable:false" style="padding:20px;"></div>  @* closable:是否带关闭 默认不带*@
         <div title="标签3" data-options="closable:true" style="overflow:auto;padding:5px;">@*overflow:标签中内容超出长度处理 auto自动增长 hidden 不处理*@
             <table id="tt2"></table>   
          </div> 
       </div>
    </div>
</body>