easyui入门

nncwww

于 2022-05-05 20:35:28 发布

阅读量307

点赞数

CC 4.0 BY-SA版权

文章标签： easyui jquery ui

本文链接：https://blog.youkuaiyun.com/nncwww/article/details/124596760

本文介绍了EasyUI作为一款基于jQuery的UI框架，其主要优点在于简化HTML标记，支持HTML5，减少开发时间和规模，且易于上手但功能强大。适合用于后台管理和前台项目的界面开发。文章提供了下载链接、引入方式，并展示了使用EasyUI创建的界面代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是easyui

jQuery EasyUi的一组基于jQuery的Ui插件能帮助Web开发者更轻松美观的Ui界面

我们为什么要学习easy我一共总结啦四点

1.easyUi不需要些很多代码，只需要编写一些简单HTML标记就可以定义界面

2.easyUi是个完美支持HTML5的网页的完美框架

3.easyUi能节省网页的开发时间和规模

4.easyU简单易上手，而且功能强大

easyUi能干什么

1.可以实现后台管理

2.还有前台项目界面

一，怎么样使用easyUi

首先使用easyUi的准备工作

下载easyUi下载网址 http://www.jeasyui.com/

下载好以后需要导入到我们的项目中

下面是代码展示引入

<!--引入easyui的css-->
<link  rel="stylesheet" type="text/css" href="${ctx}/js/jquery-easyui-1.5.5.2/themes/default/easyui.css"/>
<!--引入esayui的图表库  -->
<link rel="stylesheet" type="text/css" href="${ctx}/js/jquery-easyui-1.5.5.2/themes/icon.css">
<!--引入jquery的类库  -->
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/jquery.min.js"></script> 
<!--引入esayui的类库 -->
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
<!--引入easyui的中文包 支持中文  -->
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>

接下来就可以正常使用啦

下面是我使用easyUi展示出来的界面

代码如下

<body class="easyui-layout">
	<div data-options="region:'north',title:'',split:true"
		style="height: 85px; text-align: center;">
		<h1>书籍后台管理</h1>
	</div>
	<div data-options="region:'south',split:true"
		style="height: 100px; text-align: center;">
		<h3>&copy;舔狗后台工作室，没有舔不过来的人</h3>
	</div>
	<div data-options="region:'west',title:'功能导航',split:true"
		style="width: 120px;">

		<!--左侧的tree控件  -->
		<ul id="myTree" class="easyui-tree">
		</ul>

	</div>
	<div data-options="region:'center'"style="padding: 5px; background: #fff;">
	
		<!--中间的tabs控件  -->
		<div id="myTab" class="easyui-tabs" style="width: 100%; height: 100%;">
			<div data-options="iconCls:'icon-bullet-home'"  title="首页" style="padding: 10px; display: none;">
			 	<img  src="images/lb1.png" style="width: 100%; height: 100%;"/>
			</div>
		</div>
	</div>
</body>