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>  
  • 相关阅读:
    第一个android App, hello world
    chrome网页重定向
    自动获取MyEcilipse注册名和注册码的方法
    jsp中两种include的区别【转】
    Eclipse中web项目部署至Tomcat【转】
    JAVA EE中session的理解
    JavaBean,POJO,VO,DTO的区别和联系
    Linux下apache+phppgadmin+postgresql安装配置
    Linux下apache+phppgadmin安装配置
    linux下jdk和tomcat的安装配置
  • 原文地址:https://www.cnblogs.com/boonya/p/3636000.html
Copyright © 2011-2022 走看看