jQuery布局组件EasyUI Layout使用方法详解
layout 布局组件，依赖于panel，自己开发个web小程序的时候直接用这个组件布局很方便。
对于一个web程序原来说，特别是像我这种一遇到界面美化问题就找美工的程序员，想自己独立的开发一个东西，除了套用以前的项目中的界面布局之外就没别的办法了，虽然我们可以用ifame切分出一个界面布局，但是我不会添加样式啊。使用layout组件就可以帮我们快速的有一个界面布局，而且美观效果也看得过去。
看个例子：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/bootstrap/easyui.css" rel="external nofollow" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" rel="external nofollow" />
<title>Document</title>
</head>
<body class="easyui-layout">
<div data-options="region:'north',border:false" style="height:60px;background:#00ffcc;padding:10px"><strong><font size=2 color="color">您好，欢迎<span style="white-space:pre"> </span>来到地球！</br>这个世界充满了危险，劝你早点回去！</font></strong></div>
<div id="menu" data-options="region:'west',split:true,title:'2014-15赛季赛程'" style="height:100px;width:150px;padding:10px;">
<ul>
<li>
<strong><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >西甲赛程</a></strong>
</li>
<br>
<br>
<li>
<strong><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >英超赛程</a></strong>
</li>
<br>
<br>
<li>
<strong><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >德甲赛程</a></strong>
</li>
<br>
<br>
<li>
<strong><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >法甲赛程</a></strong>
</li>
<br>
<br>
<li>
<strong><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >意甲赛程</a></strong>
</li>
<br>
<br>
<li>
<strong><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >欧冠赛程</a></strong>
</li>
</ul>
</div>
<div data-options="region:'east',split:true,collapsed:true,title:'快速通道'" style="width:100px;padding:10px;"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >购买船票</a></br><a href="http://blog.csdn.net/caohaicheng" rel="external nofollow" >逃生指南</a></div>
<div data-options="region:'south',border:false" style="height:25px;background:#A9FACD;padding:10px;"><center>http://blog.csdn.net/caohaicheng</center></div>
<div data-options="region:'center',title:'主界面'">
</div>
</body>
</html>
效果图：
点此下载源代码：jQuery Easy UI Layout(布局)组件
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍JS组件Bootstrap Table布局详解，包括了JS组件Bootstrap Table布局详解的使用技巧和注意事项，需要的朋友参考一下 Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素： 表格类 下表样式可用于表格中： <tr>, <th> 和 <td> 类 下表的类可用于表格的行或者单元格： 基本的表格 如果您想要一个只带
-
pre { white-space: pre-wrap; } jQuery EasyUI 插件 通过 $.fn.layout.defaults 重写默认的 defaults。 布局（layout）是有五个区域（北区 north、南区 south、东区 east、西区 west 和中区 center）的容器。中间的区域面板是必需的，边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸，也可以
-
本文向大家介绍jQuery树插件zTree使用方法详解，包括了jQuery树插件zTree使用方法详解的使用技巧和注意事项，需要的朋友参考一下 最近要做一个树结构，就使用了jQuery 的树插件，感觉还不错，做个随笔 页面的基本结构是这样的 这里的样式是使用了metroStyle文件夹里的类bootstrap风格，当然首先需要下载ztree插件，直接百度即可，下载完成后由对应的api和一些例子，这
-
本文向大家介绍详解jquery事件delegate(）的使用方法，包括了详解jquery事件delegate(）的使用方法的使用技巧和注意事项，需要的朋友参考一下 我们先看官方是怎么说delegate()方法，delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数，使用 delegate() 方法的事件处理程序适用于当前或未来的元
-
我们拓展了基础组件的概念, 创造出了布局组件. 例子 const Grid = (props) => ( <Box {...props} display='inline-block' verticalAlign='top' px={2}/> ); const Half = (props) => ( <Grid {...props} width={1 / 2}
-
布局是开发 Web 页面最常接触的一个方面，也是页面最直观的一种展现方式。然而在开发前端页面的时候很多工程师会为布局感到头疼，不仅是因为不同浏览器厂商兼容程度的不同，而且还有诸多如适配不同分辨率屏幕所带来的问题、实现起来比较复杂的问题等种种情况。不过在使用了 MIP 之后我们不需要再为这些问题烦恼，MIP 提供了一整套完备的组件布局系统，支持不同布局类型和方式，开发者需要做的仅仅是为组件指定布局属