一、什么是 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
更多学习资源请关注我的新浪微博….
width="100%" height="500" class="share_self" scrolling="no" src="http://widget.weibo.com/weiboshow/index.php?language=&width=0&height=550&fansRow=1&ptype=1&speed=0&skin=8&isTitle=1&noborder=1&isWeibo=1&isFans=0&uid=5346488237&verifier=d529ff3a&dpc=1">