EasyUI-基本框架

_十二.

已于 2022-04-12 11:01:37 修改

阅读量1.4k

点赞数 2

文章标签： easyui

于 2022-04-11 20:25:22 首次发布

本文链接：https://blog.csdn.net/weixin_57287269/article/details/124107961

版权

1. 什么是EasyUI?

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

1.1 下载地址

EasyUI官方下载地址：http://www.jeasyui.com/download/index.php

1.2 在线文档

JQuery EasyUI中文网 (jeasyui.net)（中文网）
EasyUI - 帮助您轻松构建网页 (jeasyui.com)（英文版）

2. easyui如何使用？

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

3. 组键

分类：Base（基础）、Layout（布局）、Menu and Button（菜单和按钮）、Form（表单）、Window（窗口）、
DataGrid and Tree（表格和树）、Extension（扩展）
本章节主要讲述以下组件的使用：
1）layout（布局组件）
2）accordion（分类组件）
3）tree（树形组件）
4）tabs（选项卡组件）
5）datagrid和pagination（表格和分页组件）
6）dialog和messager（窗口组件）
7）form（表单组件）

4. 如何使用EasyUI

4.1 引入相关文件

<!-- jquery -->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<!-- 引入EasyUI相关文件 -->
<!-- 图标库 -->
<link rel="js/jquery-easyui-1.5.5.2/themes/icon.css">
<!-- 样式文件 -->
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.5.2/themes/default/easyui.css">  
<!-- js文件 -->
<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>

4.2 使用官网插件

<%@ 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>Insert title here</title>
<!-- 通过incloud指令引入公共部分页面head.jsp -->
<%@ include file="static/common/head.jsp" %>
</head>
<body class="easyui-layout">   
    <div data-options="region:'north',title:'网上书城',split:true" style="height:150px;"></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 id="aa" class="easyui-accordion" style="width:300px;height:200px;">   
		   	<div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">   
		       <h3 style="color:#0099FF;">Accordion for jQuery</h3>   
		       <p>Accordion is a part of easyui framework for jQuery.     
		      	It lets you define your accordion component on web page more easily.</p>   
		  		</div>   
		 		<div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">   
		      	 content2    
		  	</div>   
		   	<div title="Title3">   
		       	content3    
		   	</div>   
		</div>
    </div>   
    <div data-options="region:'center',title:'评论区域'" style="padding:5px;background:#eee;">
    	<div id="tt" class="easyui-tabs" style="width:100%;height:100%;">   
		    <div title="Tab1" style="padding:20px;display:none;">   
		        tab1    
		    </div>   
		    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">   
		        tab2    
		    </div>   
		    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">   
		        tab3    
		    </div>   
		</div> 
    </div>   
</body> 
</html>