《UI层框架EasyUI》第01章[easyUI入门1]理论课.pptVIP

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