初始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="width: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="width:100px;"></div>
<!-- 布局中如果不需要west这个面板，那么可以删掉这个div西 -->
<div data-options="region:'west',title:'West',split:true" style="width: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="width: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="width:100px;"></div>
<!-- 布局中如果不需要west这个面板，那么可以删掉这个div西 -->
<div data-options="region:'west',title:'West',split:true" style="width: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="width:100px;"></div>
<!-- 布局中如果不需要west这个面板，那么可以删掉这个div -->
<div data-options="region:'west',title:'West',split:true" style="width: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>
初始easyUI的更多相关文章
- easyui(一) 初始easyui
中午贪睡,睡到3点多,爬起来赶紧学习,学习是我快乐(自我催眠).哈哈~ --WH 一.什么是easyui? 学习一个东西,最重要的是知道它的定位(是干嘛的,基本的用法是什么,快速入门),其实easyu ...
- JQuery EasyUI 初始
基于jQuery的用户界面插件集合 1. jQuery easyui提供了一个完整的组件的集合,包括强大的DataGrid,树网格,面板.用户可以使用他们一起,或者只是用一些组件,组合和构建他想要的跨 ...
- easyui datagrid checkbox复选框取消单击选中事件、初始全选全不选等问题解决
系统业务需要,导入的列表数据默认全部选中,且不可取消选中行.全部店铺优惠券发放过后导入的数据全部清空.如图所示: 一.初始化页面默认全部选中“selectAll”,全部不选中“unselectAll” ...
- 疑似easyui本身bug：easyui时间控件问题，试了几个版本都不行
最近发现easyui时间控件的值格式不支持带斜杠的日期(2016/10/31),必须是2016-10-31这类的才能正常使用,否则默认初始化为当前时间 <input id="Retur ...
- Asp.Net MVC4 + Oracle + EasyUI 学习 序章
Asp.Net MVC4 + Oracle + EasyUI 序章 -- 新建微软实例 本文链接:http://www.cnblogs.com/likeli/p/4233387.html 1. 简 ...
- EasyUI 页面分页
DAO package com.hanqi.dao; import java.util.ArrayList; import java.util.List; import org.hibernate.S ...
- easyui datagrid 编辑模式详解
一,建立编辑器 从api得知,扩展一种新的编辑器类型,需要提供以上几个方法.项目中正好需要一个checkbox 类型编辑器,但在easyui中并没提供这样的编辑器,那我们可以通过扩展编辑器来解决 ...
- jQuery EasyUI 使用笔记
大家有四次抢票机会.第一次是放票时间之后的30分钟.第二次机会是开车前的15天.第三个机会是开车前的48小时.第四个机会是开车前的24小时. $("#gys_key").combo ...
- JavaScript- jquery easyui 可编辑表格插件 easyui.editgrid
最近项目前端使用 jquery+easyui来做,用了几个月,觉得easyui是一个很不错的开源前端UI框架, 虽然偶尔会遇到一些小问题,但是凭借多年前端开发的实力积累 都一一解决了,其中比较典型的就 ...
随机推荐
- Lazarus 初识
Lazarus 使用 Free Pascal 的编译器,支持 Object Pascal 语言,与 Delphi 高度兼容,并看做后者的自由软件替代品. Lazarus 下载与安装 我们先去 Laza ...
- IDEA攻略合辑
AS使用lombok注解报错:Annotation processors must be explicitly declared now. The following dependencies on ...
- HashTable代码解析
HashTable继承关系如下: HashTable是一个线程安全的[键-值对]存储结构.其存储结构和HashMap相同,参考这里. 1. HashTable定义了一个类型为Entry<K,V& ...
- Centos7中ss命令安装
一.简述 一般Centos会自带ss这个命令,如果没带,则需要安装. 二.安装命令 yum install iproute
- Swift Struct 结构体
前言 Swift 语言有两种基本的数据类型,即类(class)和结构体(struct),class 这样的概念大家不会陌生,而 struct 也并不是什么新的概念,在 Objective-C 和 C ...
- CentOS 7.2编译安装Tengine
Tengine官网上有个非常简单的教程,中间并未涉及到一些常用的设置,所以仅供参考.一下午为本人的安装步骤及过程. 配置firewalld,iptables,关闭SELINUX 1.安装必要的编译环境 ...
- doctest --- 一个改善python代码质量的工具
[简介] 说实话吧,之前一直没有怎么重视给自己的代码加上测试逻辑:也就是说我只是写了代码,但是并没有给自己的代码加上测试代码: 整个过程就是写完后自己测试一下,看一下跑出来的结果是正确的就心满意足了. ...
- 关于asyncio知识（四）
一.使用 asyncio 总结 最近在公司的一些项目中开始慢慢使用python 的asyncio, 使用的过程中也是各种踩坑,遇到的问题也不少,其中有一次是内存的问题,自己也整理了遇到的问题以及解决方 ...
- FFmpeg中subtitle demuxer实现
[时间:2019-01] [状态:Open] [关键词:字幕,ffmpeg,subtitle,demuxer,源码] 0 引言 本文重心在于FFmpeg中subtitle demuxer的实现逻辑. ...
- delphi怎样把子窗体显示在pagecontrol的tabsheet
https://bbs.csdn.net/topics/391980918 unit Unit1; interface uses Winapi.Windows, Winapi.Messages, Sy ...