文档介绍：UI层框架EasyUI
第一章 easyUI入门1
2017/12/21
1
中国职业教育联盟课程体系
中国职业教育联盟课程体系
成就百万精英
什么是jQuery EasyUI
jQuery EasyUI的特点
引入必要的文件
加载UI 组件的方式
Parser解析器
Draggable(拖动)组件的属性,事件和方法
本章目标
什么是jQuery EasyUI
jQuery EasyUI是一组基于jQuery的UI插件集合,其目标是帮助Web开发者更轻松的打造出功能丰富并且美观的UI界面。
开发者无须编写复杂的JavaScript,也不需要对css样式有深入的了解,只要有一些简单的HTML基础。
其它UI插件
DWZ(国产的,基于jQuery的UI插件)
ExtJS
2017/12/21
中国职业教育联盟课程体系
3
jQuery EasyUI的特点
基于jQuery用户界面插件的集合
为一些用于交互的js应用提供必要的功能
使用EasyUI不需要写很多的javascript代码,通常只需要写HTML标记来定义用户界面即可
支持HTML5
开发产品时可节省时间和资源
支持扩展,可根据自己的需求扩展控件
源代码加密,商业版付费
2017/12/21
中国职业教育联盟课程体系
4
注意:
将要使用的jQuery ,,也就是说,不再支持IE6,7,8这三款浏览器
如果必须要使用,可以选择更低版本,但是不建议兼容这些版本。由于jQuery EasyUI很少用于Web应用的前台页面,一般用于后台的UI或者企业级应用的UI,而使用这些功能的用户一般会被要求使用更高级的浏览器,所以没必要向下兼容。
2017/12/21
中国职业教育联盟课程体系
5
引入必要的文件
//引入jQuery 核心库,
<script type="text/javascript" src="easyui/"></script>
//引入jQuery EasyUI 核心库,
<script type="text/javascript" src="easyui/"></script>
//引入EasyUI 中文提示信息
<script type="text/javascript" src="easyui/locale/easyui-lang-.js"></script>
//引入自己开发的JS 文件
<script type="text/javascript" src="js/"></script>
//引入EasyUI 核心UI 文件CSS
<link rel="stylesheet" type="text/css" href="easyui/themes/default/" />
//引入EasyUI 图标文件
<link rel="stylesheet" type="text/css" href="easyui/themes/" />
2017/12/21
中国职业教育联盟课程体系
6
加载UI组件的方式
加载UI 组件有两种方式:
方式加载
//使用class 加载,格式为:easyui-组件名
<div class="easyui-dialog" id="box" title="标题" style="width:400px;height:200px;">
内容部分
</div>
调用加载
//使用JS 调用加载
$('#box').dialog();
2017/12/21
中国职业教育联盟课程体系
7
一般推荐使用第二种JS调用加载,这样可以将JS和HTML分离,提高了代码的可读性
Parser解析器
Parser 解析器是专门解析渲染各种UI 组件了,一般来说,我们并不需要使用它即可自动完成UI 组件的解析工作。当然,有时可能在某些环境下需要手动解析的情况。
手动解析一般是使用class 的情况下有效,比如设置class="easyui-dialog"。
//关闭自动解析功能,放在$(function() {})外
$. = false;
//解析所有UI
$.();
//解析指定的UI(使用指定UI 解析,必须要设置父类容器才可以解析到)
$.('#box');
//UI 组件解析完毕后执行,放在$(function () {})外
$. =