easyui 01

最新推荐文章于 2024-07-18 18:19:33 发布

z466764

最新推荐文章于 2024-07-18 18:19:33 发布

阅读量87

点赞数

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

本文链接：https://blog.csdn.net/z466764/article/details/124069244

版权

easyui 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、什么是Easyui？

easyui是一种基于jQuery的用户界面插件集合。easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。easyui是个完美支持HTML5网页的完整框架。easyui节省您网页开发的时间和规模。easyui很简单但功能强大的。

外文名：jQueryEasyUI

定义：基于jQuery的UI插件集合体

二. 搭建框架
2.1:导入css样式和js文件

2.2:在head.jsp界面引入

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setAttribute("ctx", request.getContextPath());
%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/jquery.min.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="${ctx}/js/jquery-easyui-1.5.5.2/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="${ctx}/js/jquery-easyui-1.5.5.2/themes/icon.css"/>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

2.3:在index.jsp界面包含

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

2.4:在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>

效果图如下：

z466764

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui 01

一、什么是Easyui？easyui是一种基于jQuery的用户界面插件集合。easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。easyui是个完美支持HTML5网页的完整框架。easyui节省您网页开发的时间和规模。easyui很简单但功能强大的。外文名：jQueryEasyUI定义：基于jQuery的UI插件集合体二. 搭建框架2.1:导入css样式和js文件2.
复制链接

扫一扫