JQuery EasyUI -- 日历选择器

来源：互联网发布：nginx server配置详解编辑：程序博客网时间：2024/05/22 16:04

一、什么是 jQuery EasyUI
jQuery EasyUI 是一组基于 jQuery 的 UI 插件集合，而 jQuery EasyUI 的目标就是帮助 Web 开发者更轻松的打造出功能丰富并且美观的 UI 界面，开发者不需要编写复杂的 JavaScript，也不需要对 CSS 样式有深入的了解，开发者需要了解的只有一些简单的 html 标签。

官方网站： http://www.jeasyui.com

二、jQuery EasyUI的特点
1、基于 jquery 用户界面插件的集合；
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

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>jQuery EasyUI</title>    <script src="./jquery-easyui-1.3.6/jquery.min.js"></script>    <script src="./jquery-easyui-1.3.6/jquery.easyui.min.js"></script>    <script src="./jqeury-easyui-1.3.6/locale/easyui-lang-zh_CN.js"></script>    <link rel="stylesheet" href="./jquery-easyui-1.3.6/themes/default/easyui.css">    <link rel="stylesheet" href="./jquery-easyui-1.3.6/themes/icon.css"></head><body></body></html>

四、jQuery EasyUI 使用方式
1、直接在 HTML 声明组件

<div class="easyui-calendar" type="text" style="width:300px;height:200px;"></div>

效果图如下：

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

<div id="test" type="text"></div>

$("#test").calendar({  });

效果图如下：

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

五、使用 easyload.js 智能加载
使用 easyloader 智能加载，是根据你使用的 UI 组件按需加载。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>jQuery EasyUI</title>    //删除 jQuery EasyUI 的 JS 核心文件及CSS，引入 easyloader.js 文件    <script src="./jquery-easyui-1.3.6/jquery.min.js"></script>    <script src="./jquery-easyui-1.3.6/easyloader.js"></script></head><body>    <div class="easyui-calendar" type="text" style="width:300px;height:200px;">    </div></body></html>

效果图如下：

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

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

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

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>jQuery EasyUI</title>    <script src="./jquery-easyui-1.3.6/jquery.min.js"></script>    <script src="./jquery-easyui-1.3.6/easyloader.js"></script></head><body>    <div id="test" type="text"></div>    <script>        $(document).ready(function(){            easyloader.load('calendar',function(){                $("#test").calendar();            });        });    </script></body></html>

　　使用 easyloader 加载会减少不必要的内容加载。但问题是，使用智能加载，你编码的难度和成本都提高了，效率降低，并且智能加载的 JS 文件数量还是非常多的，并不会提高太大的速度，反而因为 js 文件较多，被搜索引擎要求合并优化。
　　不过本文的重点是实现一个日历选择器，我觉得使用 easyloader 还是挺棒的。

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

六、Parser 解析器
　　Parser 解析器是专门解析渲染各种 UI 组件，一般来说，我们并不需要使用它即可自动完成 UI 组件的解析工作。当然，有时可能在某些环境下需要手动解析的情况。
　　手动解析一般是使用 class 的情况下有效，比如设置 class="easyui-dialog" 。
$.parser.auto 默认值是 true ，用来定义是否自动解析 EasyUI 组件

//关闭自动解析功能，放在 $(function() {  }) 外$.parser.auto = false;

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>jQuery EasyUI</title>    <script src="./jquery-easyui-1.3.6/jquery.min.js"></script>    <script src="./jquery-easyui-1.3.6/jquery.easyui.min.js"></script>    <script src="./jqeury-easyui-1.3.6/locale/easyui-lang-zh_CN.js"></script>    <link rel="stylesheet" href="./jquery-easyui-1.3.6/themes/default/easyui.css">    <link rel="stylesheet" href="./jquery-easyui-1.3.6/themes/icon.css"></head><body>  <div class="easyui-calendar" type="text" style="width:300px;height:200px;">    </div>  <script>  //关闭自动解析功能    $.parser.auto = false;  </script></body></html>

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

//解析所有UI$.parser.parse();

例如如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>jQuery EasyUI</title>    <script src="./jquery-easyui-1.3.6/jquery.min.js"></script>    <script src="./jquery-easyui-1.3.6/jquery.easyui.min.js"></script>    <script src="./jqeury-easyui-1.3.6/locale/easyui-lang-zh_CN.js"></script>    <link rel="stylesheet" href="./jquery-easyui-1.3.6/themes/default/easyui.css">    <link rel="stylesheet" href="./jquery-easyui-1.3.6/themes/icon.css"></head><body>  <div class="easyui-calendar" type="text" style="width:300px;height:200px;">    </div>  <script>    //关闭自动解析功能    $.parser.auto = false;    //解析所有UI    $.parser.parse();  </script></body></html>

可以看到日历又回来了

//解析指定的UI$.parser.parse("#test");

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

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>jQuery EasyUI</title>    <script src="./jquery-easyui-1.3.6/jquery.min.js"></script>    <script src="./jquery-easyui-1.3.6/jquery.easyui.min.js"></script>    <script src="./jqeury-easyui-1.3.6/locale/easyui-lang-zh_CN.js"></script>    <link rel="stylesheet" href="./jquery-easyui-1.3.6/themes/default/easyui.css">    <link rel="stylesheet" href="./jquery-easyui-1.3.6/themes/icon.css"></head><body>  <div id="test">    <div class="easyui-calendar" type="text" style="width:300px;height:200px;"></div>  </div>  <script>    //关闭自动解析功能    $.parser.auto = false;    //使用指定 UI 解析，必须要设置父类容器才可以解析到    $.parser.parse('#test');  </script></body></html>

最后一个就是 parser 的回调函数了

//UI 组件解析完毕后执行，放在 $(function() {  })外$.parser.onComplete = function() {  alert('UI 组件解析完毕');};

air-datepicker – 日历选择器
jQuery UI – 日历选择器

写在最后：约定优于配置——-软件开发的简约原则.

——————————–(完)————————————–

我的
个人网站：https://neveryu.github.io/guestbook/
Github: https://github.com/Neveryu
新浪微博：http://weibo.com/Neveryu

支付宝　　　　　　　　

更多学习资源请关注我的新浪微博….

0 0