内容发布更新时间 : 2024/12/23 1:08:14星期一 下面是文章的全部内容请认真阅读。

http://xueyuan.lanqiao.org

jQuery-EasyUI基础教程之初识jQuery-EasyUI

课程目标

? ?

了解EasyUI

下载EasyUI，并创建简单的应用

jQuery EasyUI简介

jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件。

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

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

http://xueyuan.lanqiao.org

使用easyUI不需要写很多代码，只需要通过编写一些简单的HTML标记，就可以定义用户界面。 easyUI是个完美支持HTML5网页的完整框架。 easyUI能够节省您网页开发的时间和规模。 easyUI很简单但功能很强大。

easyUI框架提供了创建网页所需的一切，帮助您轻松建立站点。本教程将告诉您如何使用easyUI框架创建应用。 下载jQuery EasyUI

访问easyUI官网下载最新的easyUI源文件：http://www.jeasyui.com/

也可以参考easyUI的中文网：http://www.jeasyui.net/

http://xueyuan.lanqiao.org

解压后能看到这些目录和文件：

?

demo:easyui演示页面代码库（可以从中参考很多组件的用法，是个非常好用的demo库。）

?

locale:easyui国际化资源文件库（需要用到国际化的时候就需要在页面中引用该包路径下的文件。）

?

plugins:easyui核心功能组件分解后的独立插件库（需要配合easyloader.js一起使用。）

?

src：easyui部分非核心组件的源代码库（核心大组件的源代码并未公布，比如datagrid、combo和tree等。）

?

themes：easyui的皮肤库（皮肤库中会收录所有网上能找得到的皮肤，所以大家不用再去自己乱搜了。）

?

easyloader.js：easyui组件加载器（easyui提供了2种组件加载方式，这就是其中一种，当使用该方式的时候可以不必引入jquery.easyui.min.js文件，具体用法请参看api文档。）

?

jquery.easyui.min.js：easyui的完整组件包文件（当使用了该文件的时候就可以不必引入easyloader.js文件，具体用法请参考官方demo或api文档。）

?

jquery.min.js：jQuery框架库文件，该版本的jQuery库提供的是最新的1.11.1版，能够支持IE6、7、8。

http://xueyuan.lanqiao.org

jQuery EasyUI入门案例

jQuery EasyUI 提供易于使用的组件，它使 Web 开发人员快速地在流行的 jQuery 核心和 HTML5 上建立程序页面。这些功能使您的应用适合今天的网络。有两个方法声明来创建 UI 组件:

第一步： 新建一个web应用，并引入easyUI的所有包，目录结构如图所示：

第二步： page目录下新建一个first.html页面，并引入需要的css样式和js包:

? ?

themes/icon.css 定义了各个图片的样式

themes/default/easyui.css 如果需要更换主题，则引入其他主题下的easyui.css文件即可

? ?

jQuery基础包

jquery.easyui.min.js 该包是easyUI的基础包

http://xueyuan.lanqiao.org

以上包是easyUI必须引入的包，其他包按需引入。 引入所需js包的另外一种方式：

? ?

jQuery基础包

easyloader.js 使用easyloader智能加载，是根据使用到的UI组建按需加载。可以通过Firebug查看HTML,发现加载了很多的js文件。问题是，使用智能加载，编码的难度和成本都提高了，效率降低，并且智能加载的js文件数量比较多，并不会提高太大的速度，反而会因为js文件较多，被搜索引擎要求合并优化！

第三步： 编写代码，弹出对话框

1. 2.

效果如图：