Jquery EasyUI入门

概述

刚开始接触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