跟我学jQuery EaseUI Web前端框架——EaseUI组件应用技术及实例
跟我学jQuery EaseUI Web前端框架——Easy UI渲染技术及相关问题的解决方案
目录1.1Easy UI渲染技术及相关问题的解决方案 (2)1.1.1Easy UI Parser(解析器) (2)1.1.2动态渲染问题 (2)1.1.3Easy UI渲染慢 (3)1.2EasyUI的easyloader（加载器） (3)1.2.1什么是EasyLoader (3)1.2.2EasyLoader使用 (4)1.1Easy UI渲染技术及相关问题的解决方案1.1.1Easy UI Parser(解析器)1、Easy UI Parser(解析器)解析器是easyui非常重要的基础组件,在easyui中我们能够简单的通过class定义一个组件,从而渲染出非常好的交互效果。
就是通过parser进行解析的。
parser会获取所有在指定范围内定义为easyui组件的class定义,并且根据后缀定义把当前节点解析渲染成特定的组件。
2、parser可以有两种使用方法（1）$.parser.parse();不带参数,默认解析该页面中所有被定义为easyui组件的节点。
（2）$.parser.parse('#cc');带一个jquery选择器，使用这种方式我们可以单独解析局部的easyui 组件节点。
这里要说明的是这个jquery选择器必须是你解析组件的父级以上的节点。
也就是说这个查找出来的节点相当于一个容器,它只会解析容器里面的内容。
3、解决页面解析过程中短暂的界面混乱现象因为parser在dom载入完毕之后才会对整个页面进行解析,当页面组件使用较多的时候,完整的解析组件必定需要耗费较多的时间,这一过程可能就会出现短暂的界面混乱现象。
1.1.2动态渲染问题1. jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法：在页面中只要书写相应easyui的class，Easyui就能成功渲染页面，这是因为解析器在默认情况下，parser会在文档装载完成的时候($(document).ready)被调用一次，而且是渲染整个页面（相当于所有的组件进行了一次“初始化”）。
跟我学jQuery EaseUI Web前端框架_EaseUI 表单组件及应用实例(第2部分)
目录
1.1 EaseUI 表单组件及应用实例（第 2 部分） ........................................................... 2 1.1.1 表单验证的一般实现方式.................................................................................. 2 1.1.2 DateBox 的基本使用 .......................................................................................... 4 1.1.3 ComboBox 组件 .................................................................................................. 8
});
},
success: function(resultDataFromWebServer){
var resultJSonObjectFromWebServer = eval('(' +
resultDataFromWebServer + ')');
$.messager.progress('close');
始 日 期 为 必 填 数 据 ！ ',invalidMessage:' 查 询 的 开 始 日 期 不 正 确 ！ ',formatter:function(currentDate){
跟我学jQuery EaseUI Web前端框架——Ease UI面板组件及应用实例
目录1.1Ease UI面板组件及应用实例 (2)1.1.1Ease UI中的面板 (2)1.1.2应用AJAX异步加载面板中的内容 (3)1.1.3创建XP 风格左侧面板 (3)1.1.4面板相关的操作API (6)1.1Ease UI面板组件及应用实例1.1.1Ease UI中的面板1、面板是承载其它内容的容器它是构建其他组件的基础（比如：layout,tabs,accordion等）。
它还提供了折叠、关闭、最大化、最小化和自定义行为。
面板可以很容易地嵌入到web页面的任何位置。
2、通过标签创建面板（1）通过标签创建更简单，只需要添加'easyui-panel'类ID到<div/>标签。
<div id="panelWarpDivTagID" class="easyui-panel" title="面板示例"style="width:500px;height:250px;padding:10px;background:#fafafa;"data-options="iconCls:'icon-search',closable:true,collapsible:true,minimizable:true,maximiza ble:true,tools:[{iconCls:'icon-add',handler:function(){alert('add')}},{iconCls:'icon-edit',handler:function(){alert('edit')}}]"><p>panel content.</p><p>panel content.</p></div>（2）结果示图1.1.2应用AJAX异步加载面板中的内容1、定义面板<div id="showHelpInfoPanelWarpDivTagID" class="easyui-panel" title="外籍教师管理相关的法规和制度"data-options="iconCls:'icon-man',collapsible:true,fit:true"></div>2、异步加载面板中的内容<script type="text/javascript">$(document).ready(function(jqueryEvent){$('#showHelpInfoPanelWarpDivTagID').panel('refresh','${pageContext.request.contextPath}/maintain/fTeacherManage/fTeacherIndexPageContent.jsp');});</script>1.1.3创建 XP 风格左侧面板1、多个可折叠的面板组合形成折叠面板（Accordion）组件在EaseUI中提供有折叠面板（Accordion）组件，但也可以将多个可折叠的面板组合形成折叠面板（Accordion）组件的效果。
跟我学jQuery EaseUI Web前端框架_EaseUI窗口及对话框组件及应用实例
目录1.1EaseUI窗口及对话框组件及应用实例 (2)1.1.1Window（窗口）组件 (2)1.1.2对话框（Dialog）窗口组件 (3)1.1.3消息窗口组件 (7)1.1EaseUI窗口及对话框组件及应用实例1.1.1Window（窗口）组件1、window组件它扩展自$.fn.panel.defaults。
使用$.fn.window.defaults重写默认值对象。
窗口控件是一个浮动和可拖拽的面板可以用作应用程序窗口。
默认情况下的窗口是可以移动、调整大小和关闭。
它的内容也可以被定义为静态html或要么通过ajax动态加载。
2、依赖关系主要依赖draggable、resizable和panel组件。
3、创建窗口（1）通过标签静态创建窗口<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"data-options="iconCls:'icon-save',modal:true">Window Content</div>（2）通过Javascript动态创建窗口首先定义出窗口所需要的容器<div id="winWarpDivTagID"></div>，然后可以应用下面的JS代码动态创建（一般是在某个事件响应方法中）：$('#winWarpDivTagID').window({width:600,height:400,modal:true});在上面的两个示例中由于没有添加“closed:true”属性，因此在默认状态下，窗口将自动地显示和打开。
4、创建复合布局窗口——窗口内也允许进行布局定义下面的示例显示了如何将窗体分为两部分：北部和中间。
jquery Easy UI大部分功能属性
2)plain:当 True 时显示一个普通效果。默认 false。
4、input/textarea easyui-validatebox
生成字段验证。
属性如下：
1)required:true[必需] false[不必需] 默认 false
2)validType:
a、length[a,b] 字段长度控制在 a 至 b 之间。
生成一个树形结构。
1)url:一个获取远程数据的地址。
2)animate:当展开或折叠节点时是否定义动画效果。true[是] false[否] 默认 false
节点属性如下：
1)text:节点的显示文本。 2)id:节点 ID，对于加载远程数据时非常重要。
3)state:节点状态，'open'或'closed'，默认为'open'。当设置为'关闭'，该节点包含子
left:左侧新位置。
top:顶部新位置。
14)onMaximize:当窗口最大化后激活。
15)onRestore:当窗口恢复到原来大小时激活。
16)onMinimize:当窗口最小化后激活。
方法如下：
1)options:返回 options 属性。
2)panel:返回面板对象。
3)header:返回面板头部对象。
21)maximized:当定义时该面板初始化时处于最大化状态。默认 false。
22)closed：当定义时该面板初始化时处于关闭状态。默认 false。
23)href:一个 url，加载远程数据并显示在面板中。
24)loadingMessage:当加载远程数据时，在面板中显示一个消息。默认 Loading…
跟我学jQuery EaseUI Web前端框架——Ease UI手风琴折叠面板(Accordion)组件及应用实例
your accordion component on web page more easily.</p>
</div>
<div title="About easyui" iconCls="icon-reload" selected="true"
style="padding:10px;">
easyui help you build your web page easily
</div> <div title="面板标题三">
content3 </div> </div>
3、示例代码
<div class="easyui-accordion" style="width:300px;height:200px;">
<div
title="About
Accordion"
iconCls="icon-ok"
</div> <div title=" 面 板 标 题 二 " data-options="iconCls:'icon-reload',selected:true"
杨教授工作室，版权所有，盗版必究， 1/5 页
杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料
style="padding:10px;"> content2
默认值 auto auto
杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料
跟我学jQuery EaseUI Web前端框架_EaseUI分割按钮(Split Button)组件及应用实例
1、思路 将用户的主题偏好设置信息存放在 Cookie 中，如果没有使用默认主题，如果有则使用
用户的主题偏好设置。 2、步骤 （1）页面初始化时获取 Cookie 数据设置用户默认主题； （2）用户进行主题设置时，更改用户主题所对应的主题 CSS 样式文件，同时将用户主题设 置放置在 cookie 中。 3、代码 <%@ page language="java" import="java.util.*" pageEncoding="GBK"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head>
杨教授工作室，版权所有，盗版必究， 1/10 页
杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料
1.1 EaseUI 分割按钮（Split Button）组件及应用实例
1.1.1 分割按钮的组成 1、分割按钮
分割按钮（Split Button）包含一个链接按钮（Link Button）和一个菜单（Menu）。 当用户点击或者鼠标悬停在向下箭头区域，将会显示一个对应的菜单。
for(int i = 0; i < cookies.length; i++){
if("themeName".equals(cookies[i].getName())){
themeName = cookies[i].getValue();
break;
}
}
}
%>
<!-- easyui 样式 -->
jQuery EasyUI中文帮助手册
jQuery EasyUI中文帮助手册API版本：1.2.4目录jQuery EasyUI中文帮助手册 (1)API版本：1.2.4 (1)1. 基本 (4)1.1 语法解析 (4)语法解析 (4)1.2 简单载入器 (4)简单载入器 (4)1.3 一般拖动 (6)可拖动 (6)1.4 拖动至容器 (7)拖动至容器 (7)1.5 缩放 (8)缩放 (8)1.6 分页 (9)分页 (9)1.7 搜索框 (11)搜索框 (11)1.8 进度条 (13)进度条 (13)2. 布局管理器 (14)2.1 控制面板 (14)2.2 选项卡 (20)选项卡切换 (20)2.3 可伸缩面板 (24)可伸缩面板 (24)2.4 布局面板 (26)布局面板 (26)3. 菜单和按钮 (29)3.1 菜单 (29)菜单 (29)3.2 链接按钮 (32)链接按钮 (32)3.3 菜单按钮 (33)菜单按钮 (33)3.4 分隔按钮 (34)分隔按钮 (34)4. 表单 (35)4.1 表单 (35)表单 (35)4.2 表单验证 (37)表单验证 (37)4.3 自定义组合框 (39)自定义组合框 (39)4.4 可装载组合框 (41)可装载组合框 (41)4.5 组合树 (44)组合树 (44)4.6 组合表格 (45)组合表格 (45)4.7 数字验证框 (47)数字验证框 (47)4.8 日期组合框 (48)日期组合框 (48)4.9 日期时间组合框 (50)日期时间组合框 (50)4.10 日历 (51)日历 (51)4.11 调节器 (53)调节器 (53)4.12 数字调节器 (54)数字调节器 (54)4.13 时间调节器 (55)时间调节器 (55)5. 窗口 (56)5.1 窗口 (56)窗口 (56)5.2 对话窗口 (58)对话窗口 (58)5.3 消息窗口 (60)消息窗口 (60)6. 数据表格和树形菜单 (62)6.1 数据表格 (62)数据表格 (62)6.2 属性表格 (71)属性表格 (71)6.3 树形菜单 (71)树形菜单 (71)6.4 树形表格 (77)树形表格 (77)1.基本1.1语法解析语法解析使用方法属性事件方法1.2简单载入器简单载入器使用方法属性名称类型 描述默认值modules （模块） object （对象） 预定义模块。
跟我学jQuery EaseUI Web前端框架——EaseUI 布局组件及应用实例
目录1.1EaseUI 布局组件及应用实例 (2)1.1.1边框布局 (2)1.1.2布局组件中的属性 (7)1.1.3布局组件中的方法 (7)1.1EaseUI 布局组件及应用实例1.1.1边框布局1、边框布局（border layout）提供五个区域JQueryEasyUI 提供的一种非常便捷的方法来完成对系统页面的整体布局。
它将页面分为北(north)、东(east)、南(south)、西(west)、中(center)等五个部分，代表页面的上、右、下、左、中间（主工作区）等区域。
将多个面板按照一定的区域摆放从而形成一定的布局，在EaseUI中提供有layout组件，可以创建出“北、南、东、西和中间（east、west、north、south、center）”的布局定位效果。
layout组件主要依赖panel和resizable组件。
2、各个区域通常的用法（1）相关的布局名称1)north 区域可以用来显示网站的标语。
2)south 区域可以用来显示版权以及一些说明。
3)west 区域可以用来显示导航菜单。
4)east 区域可以用来显示一些推广的项目。
5)center 区域可以用来显示主要的内容。
其中的中间区域面板是必须的，边缘的面板都是可选的。
每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。
布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。
（2）创建方法在使用的时候只需要将<body> 元素使用相应的样式，并在<body> 中添加几个<div>（必须要应用<div>标签，否则将不能产生出布局的效果），并把<div> 指定一个region 属性，值分别是north\east\south\west\center 等即可。
3、创建边框布局为了应用布局（layout），应该确定一个布局（layout）容器，然后定义一些区域。
跟我学jQuery EaseUI Web前端框架_EaseUI Tabs(选项卡)面板组件及应用实例
if ($('#tabWarpDivTagID').tabs('exists', title)){
$('#tabWarpDivTagID').tabs('select', title);
}
else {
var addedContentString= '<iframe scrolling="auto" frameborder="0" src="'+url+'"
</div>
<div id="tabWarpDivTagID" class="easyui-tabs" style="width:400px;height:250px;">
<div title="Home">
</div>
</div> （2）JS 代码 <script>
function addTab(title, url){
杨教授工作室，版权所有，盗版必究， 2/6 页
杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料
通过使用 jQuery EasyUI 可以很容易地添加 Tabs。您只需要调用 'add' 方法即可。下 面的示例实现当点击添加按钮，一个新的 tab 将被添加。如果 tab 已经存在，它将被激活。 （1）HTML 标签
项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。当 Tabs 被选中时，将显示对应的面板（panel）的内容。
jquery-easy-ui解析
$("#myDiv").panel({ title: "js方式的panel", width: 300, height: 500, fit: true, border: true, content: "设置面板内", )}
<div style="width:300px;height:500px" class="easyui-panel" title="第一个面板" iconCls="icon-save" collapsible="true"> </div>
1.3、DATA-OPTIONS属性
我们在写 "iconCls"这种属性的时候编辑器会提示错误，easyui提供 data-options属性给我来写组件的配置如下面代码
我们需要引入3个基本的文件
<script src="../easyui/jquery-1.8.0.min.js"></script> <script src="../easyui/jquery.easyui.min.js"></script> <link href="../easyui/themes/default/easyui.css" rel="stylesheet" />
easyui版helloworld我们在写easyui的js代码的时候也需要dom树生成后也就是说我们需要写function这个方法二内容组件二内容组件2121panelpanel面板面板panel面板是easyui里面非常基础的一个内容组件在我们后期学的tabs选项卡accordion手风琴这两种内容组件都依赖于panel组件
跟我学jQuery EaseUI Web前端框架_EaseUI 表单组件及应用实例(第3部分)
1.1 EaseUI 表单组件及应用实例（第 3 部分）
1.1.1 利用 easyUI 的 combobox 打造自动提示组件
1、easyUI 的 combobox 组件可以实现 AutoComplete 自动提示的功能
（1）自动补全功能
当用户在某个输入框中输入内容的时候，下拉框能够动态的将用户输入的内容，传回
2、依赖关系 主要依赖 combo 和 datagrid 组件，并且必须应用在 input 或 select 标签元素中。参数设
置需要在 data-options 中设置。 combogrid 组件在生成对应的 DOM 标签元素时，实际会将原来的 input 或 select 标签设
为 display:none ， 接 收 输 入 的 是 easyui 自 动 生 成 的 另 一 个 input 标 签 。
服务器发出请求，返回结果。
这两种模式的适用场景也比较明显，local 方式比较适用于数据量小的情况，加载所有
数据快，且用起来方便，无需再在后台添加搜索方法；而 remote 适用于数据量大的情况，
因为需要查询的数据往往是特点的某一些，加载出所有数据就显得很浪费了。所以当有关
键字了再去查询，得到的数据量较小，从而得到更快的响应时间。不过还需要在后台写一
} return true; }"> </input> （2）后台查询程序 用户输入的关键字将以名为'q'的 HTTP 请求参数发送到服务器端的检索程序中，因此需 要以参数名称为 q 的方式获得。 String requestQ=onePageForwardFormBean.getQ(); if((requestQ == null)||(requestQ.length() == 0)){ return; } requestQ =requestQ.trim(); if(requestQ.length() == 0){ return; } System.out.println("kkk="+requestQ); （3）执行的效果
跟我学jQuery EaseUI Web前端框架_EaseUI 表单组件及应用实例(第1部分)
<td>
<select name="productModel" style="width:300px">
<option value="FI-SW-01" selected>FI-SW-01</option>
<option value="K9-DL-01">K9-DL-01</option>
<option value="RP-SN-01">RP-SN-01</option>
据！',invalidMessage:'产品成本不能为空数据！'" /> </td>
</tr>
<tr> <td>产品特性:</td> <td>
<input class="easyui-validatebox" name="productAttr" data-options="multiline:true,required:true,missingMessage:' 产 品
id="productItemDialogCancelALinkTagID" >取消</a> </div> 注意：为了能够应用 EasyUI 中的表单验证程序，不应该将提交按钮设置为 type="submit" 类型，而应该设置为 type="button"或者采用超链接按钮。否则一旦验证出现错误后，表单 将仍然会产生提交的行为。 2、表单的示例图
跟我学jQuery EaseUI DataGrid数据表格组件及应用实例(第1部分)
目录1.1跟我学jQuery EaseUI DataGrid数据表格组件及应用实例（第1部分） (2)1.1.1DataGrid组件 (2)1.1.2如何为Datagrid提供匹配的工具条组件 (5)1.1.3如何冻结数据列 (8)1.1.4如何实现数据列的水平和垂直对齐 (10)1.1.5如何展开DataGrid里面的行显示详细信息 (10)1.1跟我学jQuery EaseUI DataGrid数据表格组件及应用实例（第1部分）1.1.1DataGrid组件1、DataGrid（数据表格）该组件扩展自$.fn.panel.defaults，可以使用$.fn.datagrid.defaults重写默认值对象。
DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。
DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。
它是轻量级的且功能丰富。
单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。
2、主要的依赖关系主要依赖于panel、resizable、linkbutton和pagination组件。
3、应用HTML标签创建DataGrid组件——在<table>标签中不需要定义<thead>列头标签（1）相关的HTML标签<table class="easyui-datagrid"title="数据表格示例"style="width:100%;height:auto;" id="dataGridTableTagID"data-options="collapsible:true,fitColumns: true,fit:true,singleSelect:false,ctrlSelect:true,nowrap:false,autoRowHeight:true,striped:true,iconCls:'icon-edit',loadMsg:'正在加载数据，请等待...',url:'${pageContext.request.contextPath}/json/comboboxJson.txt',columns:[[{field:'id',title:'编号',width:100,sortable:true},{field:'text',title:'内容',width:100},{field:'selected',title:'状态',width:100,align:'right'}]],remoteSort:false,multiSort:true"></table>datagrid在创建完成后会根据url请求数据，这是通过ajax来完成的。
跟我学Web前端jQueryUI库——协作类型的组件应用示例
前言jQuery UI是基于jQuery基础类库API开发的开源的JavaScript 网页UI（用户界面）代码组件库，使用jQuery UI可以实现Web UI界面交互、动画、特效和可更换主题的可视控件，并且还可以定制Web UI的主题风格。
从而可以应用它轻松地构建出高度可交互的Web 应用程序的UI界面。
随着Web应用的普及及AJAX相关应用的深入，客户端和Web服务器端需要频繁地交互数据，对Web交互的界面也提出了新的要求——简洁、方便、人性化等用户体验度高；同时随着移动设备的普及，客户端的访问设备也逐渐多样化。
如何为不同的客户端设备提供统一的Web应用界面，从而提高开发效率和降低开发成本。
目前比较好的技术实现手段是应用JQuery及JQuery UI系统库相关的技术。
作者根据自身多年的软件开发实践和经验总结，结合多年的IT职业培训的教学和高校软件学院一线的教学工作体验，在本系列文档中通过具体的程序代码示例为读者介绍jQuery UI中典型的应用组件技术。
本文档主要涉及jQuery UI Accordion组件及技术特性、Accordion组件的典型属性及应用示例、Accordion组件的典型事件及应用示例、如何重新排序Accordion组件的Tab页头、如何拖动改变Accordion组件的大小等方面的内容。
欢迎读者下载相关的技术资料阅读和收藏，并提出良好的建议。
感兴趣的读者可以在百度文库页面中搜索“杨少波”，将能够搜索到杨教授工作室精心创作的优秀程序员职业提升必读系列技术资料。
这些资料将系统地从软件设计和开发实现的“设计思想”、“管理策略”、“技术实现”和“经验方法”等方面与读者进行充分的交流，也欢迎读者发表和交流自己对软件开发、课程设计、项目实训、技术学习的心得体会。
1.1通过代码示例学习jQueryUI库——协作类型组件应用示例1.1.1协作类型组件应用示例——Draggable插件1、Draggable插件实现使选中的元素可以通过鼠标拖动但该Draggable插件只能实现通过鼠标拖动的功能，而如果要实现“拖”和“放”，则还需要与另一个Droppable插件相互配合。
通过代码实例跟我学Web前端JQuery框架——jQuery核心函数及应用示例
从 所 有 匹 配 的 元 素 中 删 除 全 部 或 者 指 定 的 CSS 组 样 式 名 。 代 码 示 例 ： [$("div").removeClass()]，最终实现将如下形式的<div class="cssClassStyleName"></div>标签 改变为如下的结果：<div></div> （3）toggleClass()函数
removeClass([classes])
从所有匹配的元素中删除全部或者指定的类。下面的代码示例 实 现 从 匹 配 的 元 素 中 删 除 'selected' 类 :
$("p").removeClass("selected");
toggleClass( class )
如果存在（不存在）就删除（添加）一个类。下面的代码示例 实 现 为 匹 配 的 元 素 切 换 'selected' 类 :
杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料
1.1 通过代码实例跟我学 Web 前端 JQuery 框架——jQuery 核心函数及应用 示例
1.1.1 利用 jQuery 操作 CSS 相关的函数
1、动态添加或删除 HTML 标签的 CSS 类属性的 jQuery 函数
名称
说明
addClass( classes )
（2）css 函数的主要功能和使用方法 css 函数实现在所有匹配的标签元素中，添加一个新的样式属性的值。使用.css()的方式
与前面使用.addClass()的方式达到相同的目的，主要的不同在于 css 函数是添加具体的 CSS 样式项目，而.addClass()是添加 CSS 组样式名。代码示例：
跟我学jQuery EaseUI Web前端框架_EaseUI菜单Menu组件及应用实例
目录1.1EaseUI菜单Menu组件及应用实例 (2)1.1.1菜单（Menu）定义在一些DIV 标记中 (2)1.2超链接按钮（easyui-linkbutton）组件 (4)1.2.1easyui-linkbutton组件 (4)1.3菜单按钮（Menu Button）组件 (5)1.3.1菜单按钮的组成 (5)1.1EaseUI菜单Menu组件及应用实例1.1.1菜单（Menu）定义在一些 DIV 标记中菜单组件通常用于快捷菜单。
他是构建其他菜单组件的必备基础组件。
比如：menubutton 和splitbutton。
它还可以用于导航和执行命令。
1、通过标签创建菜单给<div/>标签（该标签为菜单项目的容器）添加一个名为'easyui-menu'的类ID。
每个菜单项都通过<div/>标签创建（不需要再添加<a>标签）。
可以添加'iconCls'属性来给菜单项定义一个图标显示到菜单项的左侧。
添加'menu-sep'类ID菜单项将会生成一个菜单分割线。
（1）HTML标签<div id="menuWarpDivTagID" class="easyui-menu" style="width:120px;"><div id="newItemID">New</div><div><span>Open</span><div style="width:150px;"><div id="wordItemID"><b>Word</b></div><div id="excelItemID">Excel</div><div id="powerPointItemID">PowerPoint</div></div></div><div data-options="iconCls:'icon-save'" id="saveItemID">Save</div><div class="menu-sep"></div><div id="exitItemID">Exit</div></div>（2）显示菜单在菜单被创建的时候它是隐藏和不可见的。
easyui的用法
easyui的用法EasyUI 是一种基于JavaScript 的用户界面框架，它提供了一组丰富的UI 组件和功能，用于构建Web 应用程序的用户界面。
使用EasyUI 需要在HTML 页面中引入相关的JavaScript 文件和CSS 文件，可以通过CDN 或者下载到本地来引入。
然后，可以使用EasyUI 提供的组件来构建用户界面，例如使用`datagrid` 组件来显示数据列表，使用`dialog` 组件来显示弹出框等。
EasyUI 还提供了一些事件和方法来响应用户的交互，例如点击按钮、选择下拉框等，可以通过监听这些事件并执行相应的操作来实现业务逻辑。
以下是一个简单的示例，使用EasyUI 的`datagrid` 组件来显示一个数据列表：```html<!DOCTYPE html><html><head><title>EasyUI DataGrid Example</title><link rel="stylesheet" type="text/css"href="easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css"href="easyui/themes/icon.css"><script type="text/javascript"src="easyui/jquery.min.js"></script><script type="text/javascript"src="easyui/jquery.easyui.min.js"></script></head><body><table id="dg"style="width:700px;height:250px"></table><script>var data = [{ "productName": "Product A", "category": "Electronics", "price": 50 },{ "productName": "Product B", "category": "Books", "price": 30 },{ "productName": "Product C", "category": "Electronics", "price": 70 }];// 创建DataGrid 组件var dg = $("#dg").datagrid({data: data,columns: [[{ field: "productName", title: "Product Name", width: 100 },{ field: "category", title: "Category", width: 100 },{ field: "price", title: "Price", width: 100, editor: "numberbox" }]]});// 编辑单元格时的验证函数dg.datagrid('editCell', {index: 1,field: 'price',value: 999}, function (rowIndex, cellIndex, value) {if (value < 0 || value > 1000) {alert("Invalid price range (0 - 1000)");return false;}return true;});</script></body></html>```在上述示例中，首先引入了EasyUI 的CSS 和JavaScript 文件。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
目录1.1跟我学jQuery EaseUI Web前端框架——EaseUI组件应用技术及实例 (2)1.1.1EaseUI官方网站 (2)1.1.2EasyUI相关的系统库文件引入说明 (4)1.1.3Easy UI的控件及相关的技术特性 (8)1.1.4Easy UI组件的初始化 (11)1.1跟我学jQuery EaseUI Web前端框架——EaseUI组件应用技术及实例jQuery EasyUI 框架提供了创建网页所需的一切，帮助您轻松建立站点。
本教程将告诉您如何使用jQuery EasyUI 框架创建应用。
1.1.1EaseUI官方网站1、官网/2、中文/3、下载系统库/download/4、主要的技术特性使用easyui不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架，easyui节省您网页开发的时间和规模，easyui很简单但功能强大的。
5、EaseUI相关的帮助文档（1）英文帮助/documentation/index.php#（2）中文教程/tutorial/（3）在线中文教程/jeasyui/jqueryeasyui-tutorial.html1.1.2EasyUI相关的系统库文件引入说明1、Jquery库引用EasyUI中自带了Jquery的库，版本是V2.0.0，请注意该版本不一定适用于你的项目场景，关于JqueryV2.0.0对IE浏览器的支持也是每一个开发人员需要注意的。
Jquery V2.0.0支持IE9+，但最新的不一定是最好的，有时候，请果断更换你的jquery 版本。
还有一点注意的是，项目中通常不会只有一个地方使用jqeury，使用easy ui时，使用项目中统一的jquey版本库，也不失为一种好的方案。
2、关于easyui包目录结构调整说明通常从jquery-easyui官网中下载下来的包，是一个相当完整的包：其目录结构如下：3、其中的各个目录含义（1）demo目录是easyui使用示例，该目录下存放的是EasyUI PC 版各插件的示例示例。
如果不想在官网上查看演示，可以在该目录下找到相应的演示示例；（2）demo-mobile——该目录下存放的是EasyUI 移动版各插件的示例示例（3）locale目录是国际化支持，本地化文件，即语言库。
主要用于如DataGrid 这类有提示信息文本显示的插件本地化。
需要使用哪种语言加载相应的语言库就行。
；（3）src目录是部分easyui插件的源码，EasyUI 的源文件，因为部分功能EasyUI 不开源，所以该目录下不是全部的源码文件；（4）plugins目录是easyui使用的插件，EasyUI 的插件库，不过一般我们只使用EasyUI 的主文件jquery.easyui.min.js 就行，主文件已包含所有插件，无需单独加载；（5）themes目录包含多套easyui可使用的主题，主题包。
包含主题style 及相应的资源文件（图标等）。
该目标下共包含 5 个主题可供使用。
通常在项目中使用的话，demo目录、src目录可以不用，locale可以去除没用的js库，主题如果只使用默认的主题，也可以去除不用的主题。
其中extends目录是项目中，基于easyui框架做的一些扩展。
4、各个文件的说明（1）changelog.txt——更新日志（2）easyloader.js——加载器，可以动态的加载项目用到的EasyUI 插件（3）jquery.easyui.min.js——EasyUI PC版主文件（4）jquery.easyui.mobile.js——EasyUI 移动版主文件（5）jquery.min.js——EasyUI 所依赖的jQuery 主文件（6）licence_gpl.txt——许可协议（7）readme.txt——版本说明文件5、在PC设备中使用easyui需要引用的js和css（1）easyui.css是easyui框架的主样式（必须要引用）；（2）icon.css是easyui中用到的图标的样式（可选择引用，一般都需要引用，从而可以应用EaseUI所提供的各种图标，但需要icons目录）；（3）jquery.easyui.min.js是easyui的核心javascript库（必须要引用）；（4）easyui-lang-zh_CN.js是easyui对中文的国际化支持（可选择引用），如果需要应用国际化的技术支持（如本地格式的日期、时间、默认的显示文字都为中文格式，则需要加载该插件），因为easyui-lang-zh_CN.js这个语言配置文件，如果不引入这个，默认的语言是英语的。
这样的话，包括日历、错误提示信息，都会是英文显示，加了这个，就可以显示中文。
当然，还需要JQuery的系统库文件。
<link rel="stylesheet" href="../css/easyui.css" type="text/css"><link rel="stylesheet" href="../css/easeui_icon.css" type="text/css"><script src="../javascript/lib/jquery-2.1.3.min.js" type="text/javascript"></script><script src="../javascript/lib/jquery.easyui.min.js" type="text/javascript"></script>一旦在页面文件中导入了EasyUI必须的文件，则可以通过标记或Javascript定义一个EasyUI组件。
如下的代码示例定义一个带可折叠功能的面板，并且可以使用'data-options'属性为EasyUI组件提供各种属性定义：<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"title="My Panel" data-options="iconCls:'icon-save',collapsible:true"> The panel content</div>只需要加载themes/default/easyui.css、themes/icon.css、jquery.min.js、jquery.easyui.min.js 等四个文件即可。
6、在移动设备中使用easyui需要引用的js和css<link rel="stylesheet" href="../css/easyui.css" type="text/css"><link rel="stylesheet" href="../css/easyui_mobile.css" type="text/css"><link rel="stylesheet" href="../css/easeui_icon.css" type="text/css"><script src="../javascript/lib/jquery-2.1.3.min.js" type="text/javascript"></script><script src="../javascript/lib/jquery.easyui.min.js" type="text/javascript"></script><script src="../javascript/lib/jquery.easyui.mobile.js" type="text/javascript"></script>1.1.3Easy UI的控件及相关的技术特性easyui库作为一个相对成熟的js前端框架，提供了非常丰富的UI控件，包括form表单控件、layout布局控件、gird控件等等。
1、控件组成部分每一个easyui控件通常都是由属性（Properties）、事件（Events）和方法（Methods）等内容所组成的。
控件自身用到的信息可以通过属性存储，控件可以利用某些属性（比如url）完成特定的操作；控件基于事件驱动，开发人员可以在控件初始化的时候，为控件绑定一些特定事件（比：form的onSubmit事件）；easyui为每个控件提供了操作控件相关内容的函数，每个函数对应特定的功能（比如：datagrid的options方法，可以获取datagrid控件的属性设置）。
2、控件的继承特性在easyui中使用了继承特性，在定义了一部分基础控件的基础上（比如：tree、combo 等），可以扩展出功能更完善的控件，比如：基于combo的扩展combotree、combogrid、combobox，基于panel的扩展有tab、layout、Accordion等。
Easyui控件的继承特性，在父控件中定义的属性适用于子控件，比如有这么一个业务场景，combobox中输入框默认是可以编辑，在我们的业务上需要屏蔽对combobox的编辑功能。
针对刚才的业务场景，我们去查看combobox的属性（通常控件的属性可以对控件进行控制），但是在combobox的一堆属性中没有一个可以用于控制输入框的编辑性。
不过由于easyui控件拥有继承特性，父控件中定义的属性适用于子控，所以可以查看combobox 继承了哪些控件，API告诉我们combobox继承了combo这个控件，同时combo的属性中有editable这一项，专门用于控制编辑框的可编辑性，所以easyui控件的继承特性很好的解决了我们项目中遇到的问题。