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>

4.3 实现效果

EasyUI-基本框架相关推荐

使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享
使用Jquery+EasyUI 进行框架项目开发案例解说之中的一个员工管理源代码分享在開始解说之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery ...
EasyUI这个框架用了好久了，总结一下遇到的问题和解决方法
EasyUI这个框架用了好久了,总结一下遇到的问题和解决方法参考文章: (1)EasyUI这个框架用了好久了,总结一下遇到的问题和解决方法 (2)https://www.cnblogs.com/y2 ...
easyUI前端框架的tree（树）前台展示（树形菜单二）——java
转载请标明出处:https://blog.csdn.net/men_ma/article/details/106847165. 本文出自不怕报错就怕不报错的小猿猿的博客 easyUI前端框架的t ...
记录6年时间3套easyui前端框架主题皮肤美化的设计历程
沉寂了许久,是该发点东西了,要不然2023年都要过去一半了 ! 第一次接触Easyui前端框架,还是在2016年的时候,有个美化easyui界面的需求,自己是设计师,前端知识也只会最基本的html和c ...
使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享
使用Jquery+EasyUI 进行框架项目开发案例讲解之三角色管理源码分享在上两篇文章 <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> & ...
使用Jquery+EasyUI 进行框架项目开发案例讲解之二---用户管理源码分享
使用Jquery+EasyUI 进行框架项目开发案例讲解之二用户管理源码分享在上一篇文章<使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享>我们分享了 ...
使用Jquery+EasyUI 进行框架项目开发案例讲解之二用户管理源码分享
在上一篇文章<使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享>我们分享了使用Jquery EasyUI来进行开发的相关方法,同时对入群的用户提供了使用J ...
JQuery EasyUI学习框架
前言前端技术,新项目的开发拟使用EasyUI框架(基于EasyUI丰富UI组件库),项目负责人的提示EasyUI分配给我这个任务.发展前,我需要这对于一个新手EasyUI框架学习一些基本的入门.记录 ...
EasyUI(前端框架)
第一节 EasyUI的介绍和常用组件 [1]EasyUI的介绍介绍: EasyUI是一个前端开发的框架,其将常用的页面开发使用的组件进行了封装,前端开发人员只需将EasyUI的资源导入项目后使用即 ...
easyui前端框架模板_.NET Core基于Ace Admin的响应式框架
(给DotNet加星标,提升.Net技能) 转自:netnrcnblogs.com/netnr/p/12020660.html 前言 .NET Core的响应式框架基于Ace Admin框架菜单导航 ...

EasyUI-基本框架