概述
刚开始接触EasyUI时候,感觉好高大上的样子,通过我坚持不懈的努力,终于对它揭开了它神秘的面纱呢。
1.定义
它是一个基于JQuery的用户界面插件集合,为创建现代化、互动,javaScript应用程序,提供了必须的功能。而且我们不需要写很多的代码,只需要通过编写一些简单的HTML标记,就可以定义用户界面了。
2.特点
- easyui是一种基于jQuery的用户界面插件集合
- 使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面
- easyui是个完美支持HTML5网页的完整框架
- easyui很简单但功能强大
EasyUI目录结构
- demo:easyui的各个组件使用示例
- demo-mobile:在移动终端上各个组件使用实例
- local:是国际化支持文件夹
- plugins:不同的插件
- src:是部分easyui插件的源码;
- themes:各种不同风格的模板;
- easyloader.js: 加载的环境文件;
- jquery.easyui.min.js: PC端插件;
- jquery.easyui.moble.js :手机端的插件;
- jquery.mini.js: jquery文件;
使用
1.首先在 .html中导入相应的文件
@*引用easyui样式*@
<!--导入默认模板的CSS文件-->
<link rel="stylesheet" type="text/css" href="~/easyui/themes/default/easyui.css">
<!--导入easyui图标的CSS文件-->
<link rel="stylesheet" type="text/css" href="~/easyui/themes/icon.css">
@*引用jquery和EasyUI*@
<!--导入jquery中的js文件-->>
<script type="text/javascript" src="~/easyui/jquery.min.js"></script>
<!--导入easyui中的js文件-->
<script type="text/javascript" src="~/easyui/jquery.easyui.min.js"></script>
<!--导入easyui的语言js-->
<script type="text/javascript" src="~/easyui/locale/easyui-lang-zh_CN.js"></script>
2.在相应的 .js页面中加入你想要弹出的框代码:
var register="<span style='font-size:16px'>请选择查询条件!"
$.messager.alert('提示', register, 'info');
3.实现的效果如下:
参考
下面推荐几个学习的链接:
1. http://www.jeasyui.net/tutorial/index.html
2. http://www.51cto.com/
3. http://edu.51cto.com/center/course/lesson/index?id=172644