第2章第二章EasyUI基础二(3019KB).pptxVIP

第二章EasyUI基础（二）回顾EasyUI框架文件导入及其顺序调试插件的使用方法介绍console对象的相关方法及其应用结合实际案例对JSON格式的数据源进行详细说明本章内容11223EasyUI之panel组件制作一个结合EeasyUI常用组件的聊天室例子制作一个脚本实例化window组件的例子EasyUI组件实例化常用方法EasyUI组件的事件和方法3制作一个新闻信息浏览的综合案例的例子2.1 EasyUI组件实例化：内容预览 1. 制作一个脚本实例化window组件的例子讲解时间：40分钟技术讲解class属性实例化EasyUI组件class和data-options属性实例化EasyUI组件标签元素属性的形式初始化使用脚本代码实例化EasyUI组件实践练习实践时间：20分钟2.1.1 class属性实例化EasyUI组件在html代码某些特定的标签元素中，添加class=“easyui-组件名”对其进行初始化渲染，并实例化EasyUI组件以panel组件为例，div的class=easyui-panel“jQueryEasyUI将目标div标签元素渲染成了面板容器效果，并对EasyUI组件进行实例化2.1.1 class属性实例化EasyUI组件通过div标签元素的class属性实例化EasyUI panel组件。body中的代码： div id=panel01 class=easyui-panel style=width:500px;height:200px;padding:10px; 实例化面板组件 /divclass属性“easyui-panel”，程序代码获取到“-panel”，表示要将div渲染成EasyUI的panel组件2.1.1 class属性实例化EasyUI组件（1）如果完全基于脚本代码来渲染，则可以忽略class属性的定义，“在脚本代码中实例化EasyUI组件”会有实例介绍。（2）未渲染之前的html标签元素定义的样式效果在渲染后会保持状态，如本例中的id=panel01的div标签元素在style属性中定义的样式状态保持到渲染后的panel实例中。2.1.2 class和data-options实例化data-options是jQueryEasyUI最近两个版本才添加的一个特殊属性，通过该属性，开发人员可以将EasyUI组件的实例化及其初始化属性定义完全写入到html标签元素的属性中。2.1.2 class和data-options实例化特定标签元素 data-options=属性名称:属性值, 属性名称:属性值 /特定标签元素 属性名称和属性值之间是通过“:”符号连接的，属性名称:属性值表示一对数据项，每对数据项之间通过“,”号隔开。2.1.2 class和data-options实例化通过div标签元素的class属性实例化EasyUI的panel组件，并结合data-options定义初始化panel组件属性。div id=panel01 class=easyui-panel style=width:500px;height:200px;padding:10px; data-options=iconCls:icon-save, collapsible:true, title:面板标题信息-dataoptions 实例化面板组件 /div 2.1.3 EasyUI组件以标签元素初始化data-options属性定义和标签元素属性定义的呈现效果是一致的，只是赋值方式不相同，官方API中大部分示例是按照data-options或脚本代码来定义组件属性的。特定标签元素 EasyUI组件属性名=值 /特定标签元素2.1.3 EasyUI组件以标签元素初始化通过div标签元素的class属性实例化EasyUI的panel组件，并以标签元素属性初始化的方式定义panel组件属性。body中的代码：div id=panel01 class=easyui-panel style=width:500px;height:200px;padding:10px; iconCls=icon-save collapsible=true title=面板标题信息-标签元素属性 实例化面板组件 /div等同于上例的data-options属性定义2.1.4 使用脚本实例化EasyUI组件本方式是在script代码片段中通过jQuery选择器获取相应的节点，然后调用jQueryEasyUI的初始化函数，函数的第一个参数是一个对象，该对象中配置了组件的相关属性及事件。$(“#ID选择器”).渲染EasyUI组件名称({ 属性1:值, 属性2:值, 属性3:值, 属性4:值, 事件:functi