初始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框架, 虽然偶尔会遇到一些小问题,但是凭借多年前端开发的实力积累 都一一解决了,其中比较典型的就 ...
随机推荐
- [Canvas]空战游戏进阶 增加己方子弹管理类
点此下载源码,可用Chrome打开观看. 图例: 代码: <!DOCTYPE html> <html lang="utf-8"> <meta http ...
- Win10系统的SurfacePro4如何重装系统-3 重装完成之后的系统优化
重装完成之后,还是有很多问题,比如触摸屏的驱动没了,你要接上去鼠标之后操作 由于Surface只有一个USB口,你接了鼠标,就没法接键盘,所以要开启屏幕的软键盘,右击任务栏,勾选显示触摸键盘按钮, ...
- ionic生成全尺寸icon和splash
http://www.jianshu.com/p/eda363eb28d3 重新添加platform --no-resources可以禁止重新生成icon和splash ionic cordova p ...
- android构建过程
参考: http://blog.csdn.net/shangmingchao/article/details/47375111 首先,需要了解一下构建APK的七大工具: ①aapt 全称是Androi ...
- Linux如何统计进程的CPU利用率[转]
0. 为什么写这篇博客 Linux的top或者ps都可以查看进程的cpu利用率,那为什么还需要了解这个细节呢.编写这篇文章呢有如下三个原因: * 希望在脚本中,能够以过”非阻塞”的方式获取进程cpu利 ...
- SQL Server 性能优化实战系列(一)
数据库服务器主要用于存储.查询.检索企业内部的信息,因此需要搭配专用的数据库系统,对服务器的兼容性.可靠性和稳定性等方面都有很高的要求. 下面是进行笼统的技术点说明,为的是让大家有一个整 ...
- linux 命令之top
top命令是显示当前系统正在执行的进程相关信息.包含进程ID.内存占用率等:top命令格式例如以下: top [OPTIONS] OPTIONS: -b 批处理 -c 显示进程的完整名 -I 忽略失效 ...
- 微信小程序开发填坑指南V1
近期用了一星期的时间,开发了一个小程序.小程序名称是:小特Jarvis,取自钢铁侠的管家. 后台采用C#编写,WebAPI接口.其实开发时间并不多,小程序本身提供的API,相比公众号的API来说,已经 ...
- Ubuntu下安装open-falcon-v0.2.1
在Ubuntu下安装open-falcon和Centos下安装的方法有点区别,因为Ubuntu使用的包管理器是apt-get,而Centos下使用的是Yum,建议不要再Ubuntu下使用yum 建议自 ...
- android studio设置imageview显示图片
拖动imageview 选择图片 .png 代码引用: private Imageview pay; pay = (ImageView)findViewById(R.id.imageView2); p ...