zoukankan      html  css  js  c++  java
  • Easyui几种布局方式的使用

    1.通过标记创建layout.
     记得添加"easyui-layout"样式给div标记.
    <div id="cc" class="easyui-layout" style="600px;height:400px;">  
        <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>  
        <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>  
        <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="100px;"></div>  
        <div data-options="region:'west',title:'West',split:true" style="100px;"></div>  
        <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>  
    </div>  

    2.创建一个layout在整个页面.

    <body class="easyui-layout">  
        <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>  
        <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>  
        <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="100px;"></div>  
        <div data-options="region:'west',title:'West',split:true" style="100px;"></div>  
        <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>  
    </body>  

    3.创建嵌套layout

    注意那个west panel的内部的布局是折叠的.
    <body class="easyui-layout">  
        <div data-options="region:'north'" style="height:100px"></div>  
        <div data-options="region:'center'">  
            <div class="easyui-layout" data-options="fit:true">  
                <div data-options="region:'west',collapsed:true" style="180px"></div>  
                <div data-options="region:'center'"></div>  
            </div>  
        </div>  
    </body>  

    4.通过ajax加载内容.

    这个layout的创建是基于panel的,所有内部区域panel提供内置支持通过"URL"异步加载内容,使用异步加载技术,用户可以是他们的layout页面显示快了很多.
    <body class="easyui-layout">  
        <div data-options="region:'west',href:'west_content.php'" style="180px" ></div>  
        <div data-options="region:'center',href:'center_content.php'" ></div>  
    </body>  
  • 相关阅读:
    PL/SQL 入门
    Nginx 安装和配置
    MySql 优化方案
    类加载器(ClassLoader)
    动态代理入门
    Servlet 3.0 介绍
    反射加强(一)
    Python(1)—is和==区别
    代码题(10)— 验证二叉搜索树、二叉搜索树的最近公共祖先
    代码题(9)— 二叉树的最大、最小深度、平衡二叉树
  • 原文地址:https://www.cnblogs.com/boonya/p/3636000.html
Copyright © 2011-2022 走看看