EasyUI的下载与使用

http://www.jeasyui.com/download/index.php

下载之后，咱们会获得一个压缩包，解压之后，目录结构是这样的： 

---

解压包中各个目录的说明

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

2. demo- mobile 
这个目录是EasyUI各个组件在移动端开发的演示例子。 

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

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

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

5. src 
此目录是部分EasyUI插件的js源码。 

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

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

文件	说明
changlog.txt	EasyUI版本更新说明。
easyloader.js	EasyUI的模块加载器，用来自动帮助自动加载EasyUI文件。
jquery.easyui.min.js	所有easyui核心和插件的集合文件，通常能够直接加载这个文件而不用一个个加载那些插件。
jquery.easyui.mobile. min.js	同上，不一样的是适用于移动端的。
jquery.min.js	jQuery库文件，由于EasyUI是基于jQuery的，因此也得加载jQuery文件。
license_freeware.txt	无偿使用EasyUI的声明（只能用于非盈利目的）。
readme.txt	商业用途许可说明。

---

加载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> 

• 1
• 2
• 3
• 4

第一个和第二个是主题的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>

• 1
• 2
• 3
• 4
• 5

效果图： 

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

$('selector').plugin(); 

• 1

即先经过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>

• 1
• 2
• 3
• 4

js代码：

$('#my-panel').panel({ width: 500, height: 150, title: '个人面板', collapsible:true, });

• 1
• 2
• 3
• 4
• 5
• 6

效果图：