EasyUI的使用

最新推荐文章于 2023-04-25 23:52:50 发布

X4866233

最新推荐文章于 2023-04-25 23:52:50 发布

阅读量159

点赞数

文章标签： easyui jquery javascript

本文链接：https://blog.csdn.net/X4866233/article/details/124776393

版权

1.EasyUI是什么？

EasyUI全称是Jquery-EasyUI,它是基于Jquery的一个UI插件库，封装了许多实用的控件和功能，并且是完美支持HTML5网页的框架。提供的控件包括数据表格，树形表格，菜单，进度条，选项卡，日期组合框，调节器，对话框等等。

EasyUI的目标就是帮助Web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的JavaScript，也不要对CSS样式有深入的了解，开发者只需要了解一些简单的Html标签（table标签、form标签、div标签等）即可。

EasyUI开发前端页面的好处：

丰富的jQuery插件库
使用简单，可以快速开发出原型界面
支持html5，实现跨浏览器等等

2. 我们所需要导入的架包

 
<!-- 1.导入主题样式   默认  default/easyui.css -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.servletContext.contextPath }/static/js/jquery-easyui-1.5.5.2/themes/default/easyui.css" />
<!-- 2.导入easyui提供的图标样式库 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.servletContext.contextPath }/static/js/jquery-easyui-1.5.5.2/themes/icon.css" />
<!-- 3.导入jQuery类库 -->
<script src="${pageContext.request.servletContext.contextPath }/static/js/jquery-easyui-1.5.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 4.导入easyui.js类库 -->
<script src="${pageContext.request.servletContext.contextPath }/static/js/jquery-easyui-1.5.5.2/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 5.导入汉化js类库 -->
<script src="${pageContext.request.servletContext.contextPath }/static/js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>
 
<!-- 通过脚本的方式来将当前项目的绝对路径用全局js变量存储  -->
<script type="text/javascript" charset="utf-8">
	//定义一个全局属性
	var xPath = "${pageContext.request.servletContext.contextPath }";
 
</script>
//到项目那边可通过el表达式调佣 html区域 ${xPath } js代码区域可直接调用

下载所有框架放入js中

导入架包后我们就可以到官网的api中找到自己需要的样式去搭建了比如一个Lyout布局官网都是有源代码分享

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 导入公共资源 -->  上方封装jsp界面
<%@ include file="static/common/easyui-link.jsp" %>
</head>
<body>
<!-- easyui-layout  layout布局组件中的主样式 -->
<!-- data-options 来源于easyui的js文件中 调用组件的属性及其它东西 -->
<!-- fit:true 自适应当前容器的父容器的宽度和高度 -->
<!-- data-options="href:'_content.html'"途中加载样式  -->
<div data-options = "fit:true" id="cc" class="easyui-layout">   
    <div data-options="region:'north',title:'吊炸天后台管理系统',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'版权区域',split:true" style="height:100px;"></div>   
    <div data-options="region:'west',title:'菜单选项',split:true" style="width:200px;"></div>   
    <div data-options="region:'center',title:'主题内容'" style="padding:5px;background:#eee;"></div>   
</div>  
</body>
</html><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 导入公共资源 -->  上方封装jsp界面
<%@ include file="static/common/easyui-link.jsp" %>
</head>
<body>
<!-- easyui-layout  layout布局组件中的主样式 -->
<!-- data-options 来源于easyui的js文件中 调用组件的属性及其它东西 -->
<!-- fit:true 自适应当前容器的父容器的宽度和高度 -->
<!-- data-options="href:'_content.html'"途中加载样式  -->
<div data-options = "fit:true" id="cc" class="easyui-layout">   
    <div data-options="region:'north',title:'吊炸天后台管理系统',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'版权区域',split:true" style="height:100px;"></div>   
    <div data-options="region:'west',title:'菜单选项',split:true" style="width:200px;"></div>   
    <div data-options="region:'center',title:'主题内容'" style="padding:5px;background:#eee;"></div>   
</div>  
</body>
</html>

X4866233

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EasyUI的使用

1.EasyUI是什么？EasyUI全称是Jquery-EasyUI,它是基于Jquery的一个UI插件库，封装了许多实用的控件和功能，并且是完美支持HTML5网页的框架。提供的控件包括数据表格，树形表格，菜单，进度条，选项卡，日期组合框，调节器，对话框等等。EasyUI的目标就是帮助Web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的JavaScript，也不要对CSS样式有深入的了解，开发者只需要了解一些简单的Html标签（table标签、form标签、div标签等）即可
复制链接

扫一扫