EasyUI(1)

EasyUI入门

  • EasyUI简介
  • ui框架中Easyui,Bootstrap,layui的区别
  • 案例
  • 最终效果

EasyUI简介

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

2.使用 easyui 你不需要写很多代码,你只需要通过编写一些简单 HTML 标记,就可以定义用户界面。

3.easyui 是个完美支持 HTML5 网页的完整框架。

4.easyui 节省您网页开发的时间和规模。

ui框架中Easyui,Bootstrap,layui的区别

==ui框架==中一些流行的框架有Easyui,Bootstrap,layui,时至今日Easyui已被淘汰多年

Easyui与Bootstr相比:
1.bootstrap更加侧重样式的表现,比较美观,符合现在的流行趋势,easyUI反之样式不是特别好, 不太美观
2.bootstrap兼容手机和pc,easyUI做不到这一点
但是EasyUI带有强大的数据交互功能,而bootstrap不带数据交互功能,最主要是Bootstrap需要钱

与layui区别:首先界面效果肯定没有layui好

但是作为一个老牌框架,时间的积累Easyui有着自己独特的优势,首先EasyUI学习文档完整,框架稳定,组件丰富,选择框架时可以根据成本、公司的后端技术人员前端功底、前端的社区活跃度来进行选择

案例

1.新建web项目,导入需要的包这里就不知演示
2.在jsp页面引入所需的js,css

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css"> 
  
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>  

3.然后可以根据自己的需求进行编码了,这里我放整个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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>主页面</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css"> 
  
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>  
</head>
<body class="easyui-layout">
	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">头部</div>
	<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">west content</div>
	<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
	<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;"><a href="#" style="margin-left: 700px">2945994949@qq.com</a></div>
	<div data-options="region:'center',title:'Center'"></div>
</body>
</html>

最终效果

EasyUI(1)_第1张图片

你可能感兴趣的:(java)