初始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框架, 虽然偶尔会遇到一些小问题,但是凭借多年前端开发的实力积累 都一一解决了,其中比较典型的就 ...
随机推荐
- 【.NET 深呼吸】.net core 中的轻量级 Composition
记得前面老周写过在.net core 中使用 Composition 的烂文.上回老周给大伙伴们介绍的是一个“重量级”版本—— System.ComponentModel.Composition.应该 ...
- [Python设计模式] 第28章 男人和女人——访问者模式
github地址:https://github.com/cheesezh/python_design_patterns 题目 用程序模拟以下不同情况: 男人成功时,背后多半有一个伟大的女人: 女人成功 ...
- openssl RSA密钥格式PKCS1和PKCS8相互转换
RSA私钥格式PKCS1和PKCS8相互转换 RSA公钥格式PKCS1和PKCS8相互转换 以下转换基于openssl命令的操作: 1. openssl 生成pkcs1格式的私钥,密钥长度1024位, ...
- 分析轮子（十）- HashMap.java 之概念梳理
注:玩的是JDK1.7版本 一:还是原来的风格,先上一下类的继承关系图,这样能够比较清楚的知道此类的相关特性 二:HashMap.java 的代码比较难看,所以,我看了几天,写的话也分开来写,这样能表 ...
- 转:一千行MYSQL 笔记
原文地址: https://shockerli.net/post/1000-line-mysql-note/ /* 启动MySQL */ net start mysql /* 连接与断开服务器 */ ...
- Kafka 生产者和消费者入门代码基础
这篇博文讲解Kafka 的生产者和消费者实例. 基础版本一 生产者 ProducerFastStart.java package com.xingyun.tutorial_1; import org. ...
- MATLAB 显示输出数据的三种方式
MATLAB 显示输出数据的三种方式 ,转载 https://blog.csdn.net/qq_35318838/article/details/78780412 1.改变数据格式 当数据重复再命令行 ...
- 【转】【WPF】WPF中的Button的MouseDown事件不触发问题
按照WPF的帮助说明,某些控件的路由事件被内部处理了,已经被标记为Handled,自行定义的事件处理代码便不再起作用了,有时候会很郁闷! 不过WPF提供了必要的方法. 1)使用相应的Preview事件 ...
- Web重温系列（二）：SQLite+EF6实现本地化存储
本来我们的产品有着复杂的层次结构,作为客户端的C# WinForm是不操作数据库的.但是最近有个需求,需要将数据本地保存.可选的方案很多,比如文本文件或者XML序列化和反序列化,或者如access.d ...
- list add对象踩的坑
list 添加对象时,没有把new object写到循环体里,导致最后添加了相同的一个对象: public List<goods> find(String goodsname) { Lis ...