easyUI快速入门第一讲——走进easyUI的世界

忘是亡心i 2023-06-11 04:22 106阅读 0赞

> 前言：对于企业级的开发项目，或是网站的后台部分，我们可以使用前端框架来实现，现在目前比较主流的前端框架有easyUI、BUI以及miniUI等。其中easyUI在企业开发中市场份额最大，应用最广泛，使用起来也比较容易上手。在easyUI快速入门这一系列教程中当然就应采用easyUI作为前端框架了。

# 什么是easyUI？ #

百度百科上是这样介绍easyUI的：  
![在这里插入图片描述][20191029093018998.png]  
简单地说，easyUI就是一种基于jQuery的用户界面插件集合。使用easyUI你不需要写很多代码了，只需要通过编写一些简单的HTML标记，就可以定义用户界面。而且，easyUI是个完美支持HTML5网页的完整框架，它可以节省您网页开发的时间和规模，虽简单但功能强大。我们在初学easyUI时，可以用到哪就学到哪，在项目进展过程中以查文档的方式，循序渐进地掌握easyUI。

# 下载easyUI #

easyUI的官网地址是[http://www.jeasyui.com/index.php][http_www.jeasyui.com_index.php]，访问它，找到Download超链接，然后点击它开始进入到easyUI的下载界面。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70]  
接着，再点击Download按钮，正式进入到easyUI的下载界面。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 1]  
紧接着，点击Download按钮即可下载easyUI了，可以看到目前最新的版本是jquery-easyui-1.8.8。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 2]  
最后，将下载好的文件解压，你就能看到如下图所示的目录结构。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 3]  
我们可以通过上边demo目录中的例子学习easyUI中的各种组件。

# easyUI的快速入门 #

## 创建项目，并在项目中导入easyUI所需的样式和js ##

新建一个动态web工程，例如easyui，为了在我们的项目中使用easyUI，我们需要把解压后的jquery-easyui-1.8.8目录中的如下东东添加到项目中去。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 4]  
将以上这些目录和文件拷贝到咱们的项目之后，就变成下面这个样子了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 5]

## 以linkbutton（按钮）组件为例快速入门easyUI ##

这里我会以linkbutton（按钮）组件为例来讲解如何快速入门easyUI。

### 在页面中导入easyUI所需的js和css样式文件 ###

在所在项目的WebContent目录下新建一个01-easyui目录，并在该目录下新建一个01-easyui.html页面。要想在页面中使用easyUI，那么首先要做的就是在页面中引入必要的js和css样式文件。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../themes/icon.css">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    </head>
    <body>
    
    </body>
    </html>

注意：因为easyUI基于jQuery的，所以在引入js文件的时候必须先引入query.min.js再引入jqery.easyui.min.js。

### easyUI使用的两种方式 ###

easyUI的使用主要有两种方式，一种是在HTML标签中声明class来使用easyUI样式，一种是编写js代码。这两种方式，我都会介绍到，先来看第一种方式。

#### 在HTML标签中声明class来使用easyUI样式 ####

首先，在01-easyui.html页面中创建一个超链接，并在该超链接中声明class来使用easyUI样式。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 6]  
然后，在Google Chrome浏览器中访问01-easyui.html页面，这时你就能看到如下图所示的效果了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 7]  
可以看到超链接变成了一个还算好看的按钮，而且按钮前面还有一个加号的图标，这是由于我们将iconCls属性的值设置为了`'icon-add'`，当然了，我们也可以设置成其他的值，比如`'icon-search'`、`'icon-remove'`等。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 8]  
此时，在Google Chrome浏览器中访问01-easyui.html页面，你就能看到如下图所示的效果了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 9]

#### 编写js代码的方式 ####

首先，在01-easyui.html页面中创建一个超链接，并编写如下的一段js代码。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 10]  
然后，你就可以在Google Chrome浏览器中访问该页面了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 11]  
easyUI入门是不是很简单，还不快来学习！

[20191029093018998.png]: /images/20230531/46f37117a243418d995863b714d735c4.png
[http_www.jeasyui.com_index.php]: http://www.jeasyui.com/index.php
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70]: /images/20230531/dcedf025a77e45d4b1c53f0cfe3296ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 1]: /images/20230531/5f089f234291485e8a4f60d7a7d7b3ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 2]: /images/20230531/fca0d21692b4453a91be224b3f47cbb7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 3]: /images/20230531/db9d5b1074bc4d96a85abf0c4cefde50.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 4]: /images/20230531/a91cf428266b455683ea911394ad2c47.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 5]: /images/20230531/7cfa30ba244a49f7808df9c4fa5583fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 6]: /images/20230531/cc53fca02c554b509725493cc69efa13.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 7]: /images/20230531/66d569a3641b4a2886c6020029983e89.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 8]: /images/20230531/798b4abc7e2a43e89115a6df133c1917.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 9]: /images/20230531/c57a2ea6c09a455a946ff3bfd045ef28.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 10]: /images/20230531/4c8ce10f71174585875be4fd3ac4f369.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 11]: /images/20230531/4f91664f56ef4bdc8e8d09c308735880.png