zoukankan      html  css  js  c++  java

  • 初始easyUI

    1 easyUI布局

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!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">
    <!-- 引入JQuery -->
    <script type="text/javascript"
    src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.6/jquery.min.js"></script>
    <!-- 引入EasyUI -->
    <script type="text/javascript"
    src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.6/jquery.easyui.min.js"></script>
    <!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
    <script type="text/javascript"
    src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.6/locale/easyui-lang-zh_CN.js"></script>
    <!-- 引入EasyUI的样式文件-->
    <link rel="stylesheet"
    href="${pageContext.request.contextPath}/jquery-easyui-1.5.5.6/themes/default/easyui.css"
    type="text/css" />
    <!-- 引入EasyUI的图标样式文件-->
    <link rel="stylesheet"
    href="${pageContext.request.contextPath}/jquery-easyui-1.5.5.6/themes/icon.css"
    type="text/css" />
    <title>easy使用</title>
    </head>

    <body>

    <!--给div指定class属性指定easy的easyui-layout样式，这样就可以通过div创建easyui的layout -->
    <div class="easyui-layout" style="600px;height:400px;margin:0 auto;">
    <!-- 布局中如果不需要north这个面板，那么可以删掉这个div 北 -->
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>

    <!-- 布局中如果不需要south这个面板，那么可以删掉这个div 南-->
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>

    <!-- 布局中如果不需要east这个面板，那么可以删掉这个div 东-->
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="100px;"></div>

    <!-- 布局中如果不需要west这个面板，那么可以删掉这个div西 -->
    <div data-options="region:'west',title:'West',split:true" style="100px;"></div>
    <!--north，south， east，west这几个面板都可以删掉，唯有这个center面板尽量不要删除div    中 -->
    <div data-options="region:'center',title:'center title'" style="padding:5px;"></div>
    </div>

    </body>
    </html>

    2嵌套布局

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!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">
    <!-- 引入JQuery -->
    <script type="text/javascript"
    src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.6/jquery.min.js"></script>
    <!-- 引入EasyUI -->
    <script type="text/javascript"
    src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.6/jquery.easyui.min.js"></script>
    <!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
    <script type="text/javascript"
    src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.6/locale/easyui-lang-zh_CN.js"></script>
    <!-- 引入EasyUI的样式文件-->
    <link rel="stylesheet"
    href="${pageContext.request.contextPath}/jquery-easyui-1.5.5.6/themes/default/easyui.css"
    type="text/css" />
    <!-- 引入EasyUI的图标样式文件-->
    <link rel="stylesheet"
    href="${pageContext.request.contextPath}/jquery-easyui-1.5.5.6/themes/icon.css"
    type="text/css" />
    <title>easy使用</title>
    </head>

    <body>

    <!--给div指定class属性指定easy的easyui-layout样式，这样就可以通过div创建easyui的layout -->
    <div class="easyui-layout" style="600px;height:400px;margin:0 auto;">
    <!-- 布局中如果不需要north这个面板，那么可以删掉这个div 北 -->
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>

    <!-- 布局中如果不需要south这个面板，那么可以删掉这个div 南-->
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>

    <!-- 布局中如果不需要east这个面板，那么可以删掉这个div 东-->
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="100px;"></div>

    <!-- 布局中如果不需要west这个面板，那么可以删掉这个div西 -->
    <div data-options="region:'west',title:'West',split:true" style="100px;"></div>
    <!--north，south， east，west这几个面板都可以删掉，唯有这个center面板一定不能删掉，否则使用easyui-layout就会出错 -->
    <div data-options="region:'center',title:'center title'" style="padding:5px;">

    <!-- 嵌套布局 -->
    <div class="easyui-layout" data-options="fit:true">
    <!-- 布局中如果不需要north这个面板，那么可以删掉这个div -->
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
    <!-- 布局中如果不需要south这个面板，那么可以删掉这个div -->
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
    <!-- 布局中如果不需要east这个面板，那么可以删掉这个div -->
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="100px;"></div>
    <!-- 布局中如果不需要west这个面板，那么可以删掉这个div -->
    <div data-options="region:'west',title:'West',split:true" style="100px;"></div>
    <!--north，south， east，west这几个面板都可以删掉，唯有这个center面板一定不能删掉，否则使用easyui-layout就会出错 -->
    <div data-options="region:'center',title:'center title'" style="padding:5px;"></div>
    </div>


    </div>
    </div>

    </body>
    </html>
  • 相关阅读:
    [Android6.0][RK3399] 双屏异显代码实现流程分析（二）【转】
    uboot中添加自己的命令【转】
    android压力测试命令monkey详解【转】
    T-sql语句修改数据库逻辑名、数据库名、物理名(sql2000)
    sql查询与修改数据库逻辑文件名，移动数据库存储路径
    如何修改SQL Server 2000的数据库逻辑与物理名称
    你是否也忘了刷新视图？
    单点登录CAS-Demo
    SQL Case when 的使用方法 （转）
    因为数据库正在使用，所以无法获得对数据库的独占访问权（转）
  • 原文地址：https://www.cnblogs.com/woshuaile/p/9490630.html
Copyright © 2011-2022 走看看