EasyUI的下载与使用

秒速五厘米 2022-05-14 10:43 404阅读 0赞

[https://blog.csdn.net/luoluozlb/article/details/53648705][https_blog.csdn.net_luoluozlb_article_details_53648705]

## **官网下载地址** ##

[http://www.jeasyui.com/download/index.php][http_www.jeasyui.com_download_index.php]

使用：

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">  
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">  
<script type="text/javascript" src="easyui/jquery.min.js"></script>  
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

下载以后，我们会得到一个压缩包，解压以后，目录结构是这样的：  
![easyui目录结构][easyui]

--------------------

## **解压包中各个目录的说明** ##

**1. demo**  
demo目录是EasyUI各个组件的演示例子。

![这里写图片描述][SouthEast]

![这里写图片描述][SouthEast 1]

**2. demo- mobile**  
这个目录是EasyUI各个组件在移动端开发的演示例子。  
![这里写图片描述][SouthEast 2]

**3. locale**  
这个目录是EasyUI对于各个国家的语言包。

![这里写图片描述][SouthEast 3]

如图所示，其中  
简体中文的语言包是`easyui-lang-zh_CN.js`，  
繁体中文的语言包是：`easyui-lang-zh_TW.js`，  
英语的语言包（默认）：`easyui-lang-en.js`，  
其他的语言包就不说了（我也不知道^\_^）。

**4. plugins**  
此目录的EasyUI使用的插件js代码

![这里写图片描述][SouthEast 4]

![这里写图片描述][SouthEast 5]

**5. src**  
此目录是部分EasyUI插件的js源码。  
![这里写图片描述][SouthEast 6]

**6. themes**  
此目录是EasyUI主题文件。

![这里写图片描述][SouthEast 7]

**7. 根目录**  
根目录下的文件有：

![这里写图片描述][SouthEast 8]

<table> 
 <thead> 
  <tr> 
   <th>文件</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>changlog.txt</td> 
   <td>EasyUI版本更新说明。</td> 
  </tr> 
  <tr> 
   <td>easyloader.js</td> 
   <td>EasyUI的模块加载器，用来自动帮助自动加载EasyUI文件。</td> 
  </tr> 
  <tr> 
   <td>jquery.easyui.min.js</td> 
   <td>全部easyui核心和插件的集合文件，一般可以直接加载这个文件而不用一个个加载那些插件。</td> 
  </tr> 
  <tr> 
   <td>jquery.easyui.mobile. min.js</td> 
   <td>同上，不同的是适用于移动端的。</td> 
  </tr> 
  <tr> 
   <td>jquery.min.js</td> 
   <td>jQuery库文件，因为EasyUI是基于jQuery的，所以也得加载jQuery文件。</td> 
  </tr> 
  <tr> 
   <td>license_freeware.txt</td> 
   <td>免费使用EasyUI的声明（只能用于非盈利目的）。</td> 
  </tr> 
  <tr> 
   <td>readme.txt</td> 
   <td>商业用途许可说明。</td> 
  </tr> 
 </tbody> 
</table>

--------------------

## **加载EasyUI** ##

通常情况下，我们只需要加载几个文件就够了：

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">

<script type="text/javascript" src="easyui/jquery.min.js"></script>

<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

第一个和第二个是主题的css样式文件，上面的代码是使用默认主题，我们也很容易切换到其他主题，只要修改`defult`即可。  
第三个是jQuery库文件，一般使用EasyUI解压包里面的jQuery文件即可。  
第四个是EasyUI核心和组件的集合js文件，加载这个文件会加载所有的EasyUI组件，就不需要一个个导入组件的js文件了。我们也可以使用EasyUI的EasyLoader插件，这个插件可以帮助我们自定义加载EasyUI模块。

## **使用EasyUI的组件的方法** ##

一般有两种方式来使用EasyUI组件。

第一种是通过在html元素**直接设置class为EasyUI组件预定义的名称**即可，EasyUI就会自动在页面加载时为元素渲染样式。

例子：我们来创建一个面板（panel）：

<div class="easyui-panel" style="width:500px;height:200px;padding:10px;"  
title="我的面板" data-options="iconCls:'icon-ok',collapsible:true">  
我的CSDN博客地址为：  
<a href="http://blog.csdn.net/luoluozlb?viewmode=contents">http://blog.csdn.net/luoluozlb?viewmode=contents</a> </div>

效果图：  
![这里写图片描述][SouthEast 9]

第二种是通过**js代码来使用EasyUI组件**。使用方法：

$('selector').plugin();

即先通过jQuery选定要渲染的元素，然后调用相应的组件即可，这里的`plugin`是组件的名字。

例子：用js使用EasyUI的面板组件：  
首先是html：

<div id="my-panel" style="padding:10px;">

我的CSDN博客地址为：

<a href="http://blog.csdn.net/luoluozlb?viewmode=contents">http://blog.csdn.net/luoluozlb?viewmode=contents</a>

</div>

js代码：

$('\#my-panel').panel(

\{ width: 500,

height: 150,

title: '我的面板',

collapsible:true,

\});

效果图：  
![这里写图片描述][SouthEast 10]

[https_blog.csdn.net_luoluozlb_article_details_53648705]: https://blog.csdn.net/luoluozlb/article/details/53648705
[http_www.jeasyui.com_download_index.php]: http://www.jeasyui.com/download/index.php
[easyui]: /images/20220514/e2d93dd7a3fb42f8ad4cbe8349010d0e.png
[SouthEast]: /images/20220514/d502653082b0471aafbfc48225de51a8.png
[SouthEast 1]: /images/20220514/91c27b04a9e949879914ce55a63e92b1.png
[SouthEast 2]: /images/20220514/2af131e2612f4f74bd847f43a9d9e29d.png
[SouthEast 3]: /images/20220514/8b40ade2032d41d28c7cef32c2448431.png
[SouthEast 4]: /images/20220514/7399be458c84479da181907bb92a0ae2.png
[SouthEast 5]: /images/20220514/cd831072335449d384eb4bd744f20e50.png
[SouthEast 6]: /images/20220514/7f92f299637b4b69bbd994a0c8a010f2.png
[SouthEast 7]: /images/20220514/4dc47d3fb88e412cade0eaef5f8fa254.png
[SouthEast 8]: /images/20220514/db52d7e9ecac4f9c9c280b12258e4369.png
[SouthEast 9]: /images/20220514/25143afb7419416e84dd61240de4b7c9.png
[SouthEast 10]: /images/20220514/03432570ccd34bb982ac1efbb8e24595.png

发表评论取消回复

表情：

评论列表（有 0 条评论，404人围观）

还没有评论，来说两句吧...

相关阅读

相关 git的下载与使用

下载地址：[https://git-scm.com/][https_git-scm.com] ![49d182242343746cd4d41f456015d376.p

ゞ浴缸里的玫瑰/ 2024年03月27日 11:45/ 0 赞/ 80 阅读

相关 EasyUI入门教程整理与示例代码下载

场景 EasyUI环境搭建与入门基础语法 [https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details

Love The Way You Lie/ 2023年10月18日 20:19/ 0 赞/ 27 阅读

相关 weka下载与使用

因为本学期有门课，老师让用[weka][]软件，因为软件比较小众，去图书馆才找到一本相关书籍，所以想分享一下自己的学习经验，希望对大家有所帮助。软件的下载与安装 Weka

系统管理员/ 2023年09月23日 16:38/ 0 赞/ 100 阅读

相关 EasyUI的简单使用

WebRoot┐ ├js┐ ├easyUI┐ ├themes┐

矫情吗；*/ 2022年08月07日 13:46/ 0 赞/ 279 阅读

相关 EasyUI的下载与使用

[https://blog.csdn.net/luoluozlb/article/details/53648705][https_blog.csdn.net_luoluozlb

秒速五厘米/ 2022年05月14日 10:43/ 0 赞/ 405 阅读

相关 Xshell的下载与使用

引言 Xshell 是一个强大的安全终端模拟软件，它支持SSH1, SSH2, 以及Microsoft Windows 平台的TELNET 协议。 Xshell 通过

骑猪看日落/ 2022年04月15日 07:14/ 0 赞/ 206 阅读

相关 easyui的validtebox使用

作为后端编程人员来说，掌握一定的js知识是有必要的。在写页面的过程中难免会遇到参数的校验问题。尽量不要使用if判断进行控制，if判断控制请求提交与否，经常会碰见全局变量的问题，

ゞ浴缸里的玫瑰/ 2022年04月12日 14:10/ 0 赞/ 237 阅读

相关 treeGrid 的使用（ EasyUI ）

treeGrid 的使用经历第一次用有点方。还是一样先上代码 <table id="bom" class="easyui-treegrid" title=""

桃扇骨/ 2021年11月14日 10:58/ 0 赞/ 372 阅读

相关 easyui 使用

https://blog.csdn.net/qq\_44013790/article/details/88674518 转载于:https://www.cnblogs.com

缺乏、安全感/ 2021年10月29日 15:14/ 0 赞/ 358 阅读

相关 EasyUI EasyUI combogrid 组合框使用

1.开启分页、两个组合框级联、选中赋值等功能 <select class="easyui-combogrid" id="clientls" style="width

缺乏、安全感/ 2021年10月24日 01:36/ 0 赞/ 531 阅读