easyUI的基本知识

最新推荐文章于 2025-03-13 12:42:10 发布

菲仔yo

最新推荐文章于 2025-03-13 12:42:10 发布

阅读量432

点赞数 4

分类专栏： JavaWeb 文章标签： easyui 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_67331668/article/details/124643927

版权

JavaWeb 专栏收录该内容

25 篇文章

订阅专栏

今天我们来了解一下easyui，并且利用easyui写一个首页

网页地址

http://www.jeasyui.net/（中文网）

http://www.jeasyui.com/（英文版）

EasyUI官方下载地址：http://www.jeasyui.com/download/index.php

常见UI：

Layui，Bootstrap，element ui,ant design,iview

1.什么是easyui？

easyui是一种基于jQuery的用户界面插件集合

2.easyui能带给我们什么好处？

1）easyui是个完美支持HTML5网页的完整框架

2）easyui节省网页开发的时间和规模

3）easyui很简单但功能强大

3.easyui如何使用？

3.1 引入必要的js和css样式文件

1）引入JQuery（jquery.min.js）

2）引入EasyUI（jquery.easyui.min.js）

3）引入EasyUI的中文国际化js，让EasyUI支持中文（locale/easyui-lang-zh_CN.js）

4）引入EasyUI的样式文件（/themes/default/easyui.css）

5）引入EasyUI的图标样式文件（/themes/icon.css）

3.2 路径问题

3.2.1 相对路径/绝对路径

3.2.2 base标签

3.3 页面缓存

4.组件

分类：Base（基础）、Layout（布局）、Menu and Button（菜单和按钮）、Form（表单）、Window（窗口）、

DataGrid and Tree（表格和树）、Extension（扩展）

5.利用easyUI写一个首页

效果图：

左边菜单可以收缩

点击菜单在输出台输出

代码如下：

首页：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>

<script src="easyui/jquery.min.js"></script>
<script src="easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="easyui/themes/default/easyui.css">

</head>
<body class="easyui-layout">

	<div data-options="region:'north',title:'网站导航栏',collapsible:false" style="height: 100px;"></div>
	<div data-options="region:'south',title:'友商链接',collapsible:false" style="height: 100px;"></div>
	<div data-options="region:'west',title:'菜单'" style="width: 20%;">
		<ul id="asideMenu"></ul>
	</div>
	<div data-options="region:'center',title:'内容',collapsible:false" style="padding: 5px; background: #eee;"></div>

	<script>
		$('#asideMenu').tree({//构建方法
			url : 'tree_data.json',//远程数据的地址
			method : "post",//访问方式
			lines : true,//显示虚线
			onClick(node){//点击出现内容
				//取到节点的自定义属性 判断自定义属性中的pid
				if(node.attributes.pid){
					console.log("我是小菜单")
				}else{
					console.log("我是大菜单")
				}
			}
		});
	</script>

</body>
</html>

菜单栏：

[{    
    "id":1,    
    "text":"商品管理",   
	"state":"closed", 
	"attributes":{
		"pid":0
	},    
    "children":[{    
        	"id":2,
			"text":"商品增加01",
			"attributes":{
				"pid":1
			}
    	},{
			"id":3,
			"text":"商品增加02",
			"attributes":{
				"pid":1
			}
		}
	]    
},{    
	"id":10,
    "text":"类别管理",    
    "state":"closed",
	"attributes":{
		"pid":0
	},      
    "children":[
		{
			"id":12,
			"text":"商品增加01",
			"attributes":{
				"pid":10
			}
		},{
			"id":13,
			"text":"商品增加02",
			"attributes":{
				"pid":10
			}
		}
	]    
}]

好咯，今天到这里就结束咯，下次见宝们。