版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35537301/article/details/82849620
介绍
EasyUI是专门开发后台系统的页面技术
- EasyUI是一种基于jQuery的用户界面插件集合【要想操作EasyUI,必须先导入JQ的核心JS文件】
- EasyUI为创建现代化、互动、JavaScript应用程序，提供必要的功能【EasyUI的组件】
- 使用EasyUI你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面
- EasyUI是个完美支持HTML5网页的完整框架
- EasyUI节省您网页开发的时间和规模
- EasyUI很简单但功能强大的
导入外部属性文件
- easyui.css
EasyUI的核心css文件 导入css文件的时候，需要将图片目录一并导入 - icon.css
EasyUI图标相关的css文件 导入css文件的时候，需要将图片目录一并导入 - demo.css
用户自定义的样式文件，开发的时候可以不用导入 - jquery.min.js
它是jquery的核心js文件，只不过处于安全考虑隐藏了其版本号！ - jquery.easyui.min.js
它是EasyUI核心的js文件，它必须放在jquery的核心js文件之后！
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI模板代码</title>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
</body>
</html>easyUI的使用
1.创建组件
属性和事件都是定义在组件的内部
1.1 HTML方式创建组件(静态)
<标签名 id="w" class="easyui-组件名称" data-options="属性名1:'属性值1',属性名:'属性值2',...,属性名n:'属性值n'">
The window content.
</标签名><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI_window</title>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
<!--
属性介绍
class：定义的方式easyui-组件名称
title：组件的标题
data-options：定义所有EasyUI的样式都放到这个属性中去(style里面的内容都可以放进去)【多个样式之间使用逗号隔开】
iconCls:'icon-save ：定义了组件的图标
-->
<div id="w" class="easyui-window" title="商品信息" data-options="iconCls:'icon-save',width:'500px',height:'200px',padding:'10px'">
商品列表
</div>
</body>
</html>1.2 JS方式创建组件(动态)
<标签名 id="btn"></标签名>
$("#btn").组件名称({
属性名1:'属性值1',
属性名2:'属性值2',
...
属性名n:'属性值n'
});<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI_window</title>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
$("#win").window({
title:"商品信息",
width:600,
height:400,
modal:true//模态,具有遮罩效果
});
});
</script>
</head>
<body>
<div id="win"></div>
</body>
</html>2. 添加事件
属性和事件都是定义在组件的内部
$("#p").panel({
//定义属性
title:"这是我的一个Panel",
width:300,
height:150,
closable:true,
tools:[{
iconCls:'icon-add',
handler:function(){alert('add')}
},{
iconCls:'icon-edit',
handler:function(){alert('edit')}
}],
//添加一个事件
onBeforeClose:function(){
alert("面板即将关闭……");
}
});<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI_panel</title>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function() {
$("#p").panel({
width : 500,
height : 150,
title : '我的面板',
tools : [ {
iconCls : 'icon-add',
handler : function() {
alert('新建')
}
}, {
iconCls : 'icon-save',
handler : function() {
alert('保存')
}
} ],
//定义组件的属性(定义在组件的内部，可以通过查阅API文档来进行相关属性的设置)
fit : true, //自动填充满所在的父容器(当前父容器是body)
closable : true,
//定义组件的事件(定义在组件的内部，可以通过查阅API文档来进行相关属性的设置)
onBeforeClose : function() {
alert("面板即将关闭");
}
});
});
</script>
</head>
<body>
<div id="p" style="padding: 10px;">
<p>面板内容</p>
</div>
</body>
</html>3.方法调用
组件的方法在外部操作的
先定义一个按钮
然后通过触发事件执行函数，来调用组件的方法
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI_panel</title>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function() {
$("#p").panel({
width : 500,
height : 150,
title : '我的面板',
tools : [ {
iconCls : 'icon-add',
handler : function() {
alert('新建')
}
}, {
iconCls : 'icon-save',
handler : function() {
alert('保存')
}
} ],
//定义组件的属性(定义在组件的内部，可以通过查阅API文档来进行相关属性的设置)
fit : true, //自动填充满所在的父容器(当前父容器是body)
closable : true,
//定义组件的事件(定义在组件的内部，可以通过查阅API文档来进行相关属性的设置)
onBeforeClose : function() {
alert("面板即将关闭");
}
});
});
function changeTitle(){
//获得面板.组件名称('组件的方法',"携带的参数值")
$("#p").panel('setTitle','新的面板');
}
</script>
</head>
<body>
<input type="button" value="设置面板标题" onclick="changeTitle()">
<div id="p" style="padding: 10px;">
<p>面板内容</p>
</div>
</body>
</html>message组件
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI_message</title>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
//参数一：标题；参数二：内容
$.messager.alert('警告','警告消息');
//参数一：标题；参数二：内容；函数中的参数r:你点击内容的返回值(Ok:true；Cancle：false)
$.messager.confirm('确认','您确认想要删除记录吗？',function(r){
if (r){
alert('确认删除');
}
});
/*在屏幕右下角显示一条消息窗口*/
$.messager.show({
title:'我的消息',
msg:'消息将在3秒后关闭。',
timeout:3000,
showType:'slide'
});
});
</script>
</head>
<body>
</body>
</html>layout
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI组件_布局layout</title>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
<!--
布局容器，除了center以外，其余的都可以删除
region:指定区域位置
title：标题
split:区域大小可以拖拽改变
fit:true 让当前的组件填满整个父容器
-->
<div id="cc" class="easyui-layout" data-options="fit:true">
<div data-options="region:'north',title:'欢迎使用',split:false" style="height:100px;"></div>
<div data-options="region:'center',title:'内容'" style="padding:5px;background:#eee;"></div>
<div data-options="region:'west',title:'菜单',split:true" style="width:200px;"></div>
<div data-options="region:'south',title:'关于我们',split:true" style="height:100px;"></div>
</div>
</body>
</html>accordion组件
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI_accordion</title>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
<!--
属性：
selected:true 默认选中
-->
<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;">分类</h3>
<p></p>
</div>
<div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
内容
</div>
<div title="Title3">
内容
</div>
</div>
</body>
</html>tree
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI_tree</title>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
<ul id="tt" class="easyui-tree">
<li>
<span>商品模块</span>
<ul>
<li><span><a href="#">所有商品</a></span></li>
<li><span><a href="#">添加商品</a></span></li>
<li><span><a href="#">修改商品</a></span></li>
<li><span><a href="#">删除商品</a></span></li>
</ul>
</li>
<li>
<span>分类模块</span>
<ul>
<li><span><a href="#">所有分类</a></span></li>
<li><span><a href="#">添加分类</a></span></li>
<li><span><a href="#">修改分类</a></span></li>
<li><span><a href="#">删除分类</a></span></li>
</ul>
</li>
</ul>
</body>
</html>