JQuery EasyUI -- 日历选择器

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

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

4、EasyUI是个完美支持 HTML5 网页的完整框架；

5、开发产品时可节省时间和资源；

6、简单，但很强大；

7、支持扩展，可根据自己的需求扩展控件；

---

本次采用的 jQuery EasyUI 的版本为： jquery-easyui-1.3.6.zip。它里面自带的 jQuery 版本是 2.0.0。也就是说，不再支持 IE6,7,8 这三款浏览器了。如果你必须要使用，可以选择更低版本。当然，我们已经不再建议兼容这些版本了。最基本的原因是：jQuery EasyUI 很少用于 Web 应用的前台页面，一般用于后台的 UI 或者企业级应用的 UI（较为重）。那么使用这些功能的用户不会那么鱼龙混杂，一般会被要求使用更高级的浏览器，所以没有必要向下兼容。

三、如何引入 jQuery EasyUI

四、jQuery EasyUI 使用方式

1、直接在 HTML 声明组件

效果图如下：

2、编写 JavaScript 代码来创建组件

$(“#test”).calendar({

});

效果图如下：

一般推荐使用第二种 JS 调用加载，因为一个 UI 组件有很多属性和方法，如果使用 class 的用法将极大的不方便。并且根据 JS 和 HTML 分离的原则。第二种提高了代码的可读性。

五、使用 easyload.js 智能加载

使用 easyloader 智能加载，是根据你使用的 UI 组件按需加载。

//删除 jQuery EasyUI 的 JS 核心文件及CSS，引入 easyloader.js 文件

效果图如下：

可以看到，这次我们在文件中只引入了 jquery.min.js 和 easyloader.js ，并没有引入 jQuery EasyUI 的 js 和 css。但是依然正常运行了，我们再来看一下资源加载的过程：

我们可以发现 easyloader.js 帮我们加载了 jquery.parser.js ，calendar.css ，jquery.calendar.js。

上面是在 easyloader 下直接在 HTML 中使用 class 加载的方式；

下面我们使用 js 加载的方式：

使用 easyloader 加载会减少不必要的内容加载。但问题是，使用智能加载，你编码的难度和成本都提高了，效率降低，并且智能加载的 JS 文件数量还是非常多的，并不会提高太大的速度，反而因为 js 文件较多，被搜索引擎要求合并优化。

不过本文的重点是实现一个日历选择器，我觉得使用 easyloader 还是挺棒的。

可以看到 easyloader 帮我们加载了 jquery.parser.js 这个文件。

六、Parser 解析器

Parser 解析器是专门解析渲染各种 UI 组件，一般来说，我们并不需要使用它即可自动完成 UI 组件的解析工作。当然，有时可能在某些环境下需要手动解析的情况。

手动解析一般是使用 class 的情况下有效，比如设置 class="easyui-dialog" 。

$.parser.auto 默认值是 true ，用来定义是否自动解析 EasyUI 组件

//关闭自动解析功能，放在 $(function() { }) 外

$.parser.auto = false;

这个时候日历就出不来了，只对使用 class 的情况有效。

//解析所有UI

$.parser.parse();

例如如下：

可以看到 日历 又回来了

---

//解析指定的UI

$.parser.parse(“#test”);

PS：使用指定 UI 解析，必须要设置父类容器才可以解析到。比如：