EasyUi初步认识_easyui <color> 熟悉-CSDN博客

本文链接：https://blog.csdn.net/China_HaoZi/article/details/104707046

EasyUi介绍及入门

A.EasyUI介绍
JQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签.
B.EasyUi的入门案例
页面显示panel面板组件
步骤：
在页面中导入easyui的依赖

 <!‐‐导入easyui的样式文件‐‐> 
 <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
  <!‐‐导入easyui的图标文件‐‐> 
  <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> 
  <!‐‐导入jquery的js库文件‐‐> 
  <script type="text/javascript" src="easyui/jquery.min.js"></script> 
  <!‐‐导入easyui的js库文件‐‐> 
  <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

分别使用html方式和html+js方式完成

easyui组件实现的两种方式

A.html方式

 <标签 class="easyui‐组件名称" data‐options="属性名:属性值,属性名:属性值"></标签>

A.html+js方式
在页面上定义个html容器
当页面加载完成后，使用js方式对html容器设置easyui样式

jquery对象.组件名称({ 
	属性名1:属性值1, 
	属性名2:属性值2 
});

注意事项:
如果类型要求为number,不要加任何单位,只提供数字
如果为字符串,用引号括起来
如果为布尔类型,不要加引号 03_easyui目录介绍

easyui目录介绍

locale:本地化文件
plugins:easyui组件的实现代码
src:easyui的源码
themes:easyui的主题

layout布局组件

布局容器有5个区域：北、南、东、西和中间。
中间区域面板是必须的，边缘的面板都是可选的。

实现代码

<body class="easyui‐layout"> 
	<div data‐options="region:'north',title:'North Title',split: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:'center title'" style="padding:5px;background:#eee;"></div>
</body>

Accordion分类组件

分类空间允许用户使用多面板，但在同一时间只会显示一个。
实现代码

<div id="aa" class="easyui‐accordion" style="width:300px;height:200px;"> 
	<div title="Title1" data‐options="iconCls:'icon‐save'" style="overflow:auto;padding:10px;"> 
		<h3 style="color:#0099FF;">Accordion for jQuery</h3>
		<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p> 
	</div> 
	<div title="Title2" data‐options="iconCls:'icon‐reload',selected:true" style="padding:10px;"> content2 
	</div> 
	<div title="Title3"> 
		content3 
	</div> 
</div>