easyUI之Layout（布局）
2024-09-05 09:17:20
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Layout（布局）</title>
<meta http-equiv="keywords" content="学习,IT学习,好好学习">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- 引入css文件，不限顺序 -->
<link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="../themes/icon.css" type="text/css"></link> <!-- 引入js文件，有顺序限制 -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script> <!-- 所有的css文件和的有的js文件位置不限 --> </head> <body> <!-- 布局 -->
<div id="layoutID" style="width:700px;height:500px" class="easyui-layout" data-options="fit:true"> <!-- 区域面板--北边 -->
<div data-options="region:'north',title:'北边',split:true,border:true,iconCls:'icon-remove',collapsible: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="width:100px;"></div> <!-- 区域面板--西边 -->
<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div> <!-- 区域面板--中间 -->
<div data-options="region:'center',title:'中间',href:'/js-day05/images/mm.html'" style="padding:5px;background:#eee;"></div> </div> <script type="text/javascript">
//easyui调用方法的语法如下：$('selector').组件名('method',parameter); //浏览器加载jsp页面时触发
$(function(){
//将北边折叠
$('#layoutID').layout('collapse','north');
//休息3秒
window.setTimeout(function(){
//将南边折叠
$("#layoutID").layout("collapse","south"); //将北边展开
$('#layoutID').layout('expand','north');
window.setTimeout(function(){
//将南边展开
$("#layoutID").layout("expand","south");
},3000); },3000);
}); </script> </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Layout（布局）</title>
<meta http-equiv="keywords" content="学习,IT学习,好好学习">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- 引入css文件，不限顺序 -->
<link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="../themes/icon.css" type="text/css"></link> <!-- 引入js文件，有顺序限制 -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script> <!-- 所有的css文件和的有的js文件位置不限 --> </head> <body class="easyui-layout"> <!-- 区域面板--北边 -->
<div data-options="region:'north',title:'北边',split:true,border:true,iconCls:'icon-remove',collapsible: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="width:100px;"></div> <!-- 区域面板--西边 -->
<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div> <!-- 区域面板--中间 -->
<div data-options="region:'center',title:'中间',href:'/js-day05/images/mm.html'" style="padding:5px;background:#eee;"></div> <script type="text/javascript">
//easyui调用方法的语法如下：$('selector').组件名('method',parameter); //浏览器加载jsp页面时触发
$(function(){
//将北边折叠
$('#layoutID').layout('collapse','north');
//休息3秒
window.setTimeout(function(){
//将南边折叠
$("#layoutID").layout("collapse","south"); //将北边展开
$('#layoutID').layout('expand','north');
window.setTimeout(function(){
//将南边展开
$("#layoutID").layout("expand","south");
},3000); },3000);
}); </script> </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Layout（布局）</title>
<meta http-equiv="keywords" content="学习,IT学习,好好学习">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- 引入css文件，不限顺序 -->
<link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="../themes/icon.css" type="text/css"></link> <!-- 引入js文件，有顺序限制 -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script> <!-- 所有的css文件和的有的js文件位置不限 --> </head> <body> <div id="layoutID" class="easyui-layout" data-options="fit:true"> <!-- 北 -->
<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'" style="width:200px"></div> <!-- 中 -->
<div data-options="region:'center'"> <div class="easyui-layout" data-options="fit:true"> <!-- 北 -->
<div data-options="region:'north'" style="height:100px"></div> <!-- 中 -->
<div data-options="region:'center'"></div> </div> </div> </div> </div> </div> </body>
</html>
最新文章
- mipmap 目录和drawable 目录有什么区别
- C#学习笔记13：静态方法、方法重载和ref、out参数
- 来试试这个来自静态代码分析工具PVS Studio提供C++的小测验吧
- struts1与strut2的区别
- 关闭ES动态创建mapping
- CentOS 6.5 + Nginx 1.8.0 + PHP 5.6(with PHP-FPM) 负载均衡源码安装 之 （二）PHP(PHP-FPM)安装篇
- ccMacros
- Android 它们的定义View它BounceProgressBar
- 转：【译】Asp.net MVC 利用自定义RouteHandler来防止图片盗链
- Spring Boot 系列教程11-html页面解析-jsoup
- 201521123110《Java程序设计》第1周学习总结
- 蓝桥杯练习系统—基础练习 2n皇后问题
- 根据List集合中的对象属性排序
- Java 找不到或者无法加载主类
- 01-初始Java
- VS2008中开发智能设备程序的一些总结收藏
- spring mvc配置datasource数据源的三种方式
- JVM的 GC机制和内存管理
- jquery.cookie.js 删除cookie
- 【LeetCode算法题库】Day1：TwoSums & Add Two Numbers & Longest Substring Without Repeating Characters