Jquery EasyUI的简单入门

以你之姓@ 2022-05-09 09:00 198阅读 0赞

### 一、EasyUI 简介与下载 ###

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

easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。

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

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

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

easyui很简单但功能强大的。

英文官网下载地址：[http://www.jeasyui.com/download/index.php][http_www.jeasyui.com_download_index.php]

中文网帮助文档：[http://www.jeasyui.net/][http_www.jeasyui.net]

![70][]

下载【jquery-easyui-1.5.5.7】完成之后，得到压缩包，解压后文件夹目录如下：

![70 1][]

### 二、EasyUI的入门范例 ###

**1、将 jquery-easyui 插件加入到工程**

新建一个JavaWeb工程，将jquery-easyui文件夹中一些不必要的文件删掉，只保留必要的文件加入到工程中，如下图所示：**index.css 和 index.js 为自定义的文件，编写自己的代码。**

![70 2][]

**2、在index.jsp页面中使用 EasyUI：**

**    1）引入必要的js和css样式文件：注意引入顺序**

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %> 
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Easyui+SSH</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.5.7/themes/default/easyui.css"></link>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.5.7/themes/icon.css"></link>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/index.css"></link>
    
    </head>
    <body>
    	<h3>欢迎进入首页</h3>
    		
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.5.7/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.5.7/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.5.7/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/index.js"></script>
    </body>	
    </html>

**  2） 有两个方法声明的 UI 组件:**

<1> 直接在 HTML 声明组件

<h3>欢迎进入首页</h3>
    	<div id="dlg" class="easyui-dialog" title="easyui-dialog对话框"  data-options="iconCls:'icon-save'" style="width:400px;height:200px;padding:10px">
    		The dialog content.对话框
    	</div>

<2> 编写 JS 代码来创建组件（推荐使用）

<h3>欢迎进入首页</h3>
    	<div id="dlg">
    		The dialog content.对话框
    	</div>	
    
    --index.js--
    $(function(){
    	$("#dlg").dialog({
    		title: "easyui-dialog对话框",
    		closed: false,
    		width: 400,
    		height: 200,
    		cache: false,
    		iconCls:'icon-save'
    	});
    });

![70 3][]

[http_www.jeasyui.com_download_index.php]: http://www.jeasyui.com/download/index.php
[http_www.jeasyui.net]: http://www.jeasyui.net/
[70]: /images/20220509/4f4617c31e5e4e198e5913705d516c5c.png
[70 1]: /images/20220509/b658af47ec764dccb207064a9fb805cf.png
[70 2]: /images/20220509/735c90513e0c48bfb525538c59f13a35.png
[70 3]: /images/20220509/f5765c2d1ac448489a08cacbc4b35d2d.png