初入easyui

最新推荐文章于 2022-07-04 22:51:15 发布

大大怪僵軍

最新推荐文章于 2022-07-04 22:51:15 发布

阅读量477

点赞数

分类专栏： easyui 文章标签： java

本文链接：https://blog.csdn.net/m0_68756200/article/details/123979979

版权

easyui 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一，EasyUI是什么？

EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单html标签。

注：于jquery的页面组件集合，提供了丰富的组件的集合。

二，EasyUI的优点

- easyui是个完美支持HTML5网页的完整框架
- easyui节省网页开发的时间和规模
- easyui很简单但功能强大

三，框架的搭建

创建示例：
1.打开eclipse，创建一个web工程，注意：为了防止出现乱码问题，建议先检查一下eclipse的工作空间的编码问题， window -> preferences -> Genernal -> workspace

使用前先引入必要的js和css样式文件：

- 引入JQuery（jquery.min.js）
- 引入EasyUI（jquery.easyui.min.js）
- 引入EasyUI的中文国际化js，让EasyUI支持中文（locale/easyui-lang-zh_CN.js）
- 引入EasyUI的样式文件（/themes/default/easyui.css）
- 引入EasyUI的图标样式文件（/themes/icon.css）

在head.jsp界面引入

<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.5.2/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.5.2/themes/icon.css"/>

四：在index.jsp界面包含

<%@ include file="common/head.jsp" %>

然后再index.jsp界面布局：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<%@ include file="common/head.jsp" %>
</head>
 
 
<body class="easyui-layout">   
    <div data-options="region:'north',split:true" style="height:50px;">
    	EasyUi后台管理系统
    </div>   
    <div data-options="region:'south',split:true" style="height:100px;">
    	Copyright@XXXX有限责任公司
    </div>     
    <div data-options="region:'west',title:'功能导航',split:true" style="width:100px;"></div>   
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>   
</body>  
 
 
</html>

效果图如下：

大大怪僵軍

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
初入easyui

一，EasyUI是什么？EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单html标签。注：于jquery的页面组件集合，提供了丰富的组件的集合。二，EasyUI的优点- easyui是个完美支持HTML5网页的完整框架- easyui节省网页开发的时间和规模- easyui很简单但功能
复制链接

扫一扫