免费(jQuery Easyui)教程
jquery-easy-ui解析
四、布局LAYOU
广州传智播客
4.1、EASYUI布局-LAYOUT
在easyui里面只有一种布局方式，layout（东、南、西、北、中）的布局方式， 创建layout布局的方式如下:
<div style="width: 500px; height: 700px;" class="easyui-layout"> <div data-options="region:'north'" style="height: 50px; width: 500px;">这 是一个北部面板</div> <div data-options="region:'south'" style="height: 50px">这是一个南部面 板</div> <div data-options="region:'west'" style="width: 100px">这是一个西部面板 </div> <div data-options="region:'east'" style="width: 100px">这是一个北东部面 板</div> <div data-options="region:'center'">这是一个中间面板</div> </div>
JQueryEasyUi（Tree树）详解（转）
JQueryEasyUi（Tree树）详解（转）第⼀讲：JQuery Easy Ui到底是什么呢？⾸先咱们知道JQuery是对Java Script的封装，是⼀个js库，主要提供的功能是选择器，属性修改和事件绑定等等。
JQuery ui是在jQuery的基础上，利⽤jQuery的扩展性，设计的插件。
那么JQuery Easy Ui到底是什么呢？我的理解就是⽐JQuery ui更强⼤，同样都是实现绚丽的多功能效果！jQuery Easy UI的⽬的就是帮助Web开发者更轻松的打造出功能更丰富并且更美观的UI界⾯。
当然JQuery Easy ui提供了⽤于创建跨浏览器⽹页的完整的组件集合，包括功能强⼤的 datagrid（数据⽹格）、treegrid（树形表格）、 panel（⾯板）、combo（下拉组合）等等。
⽤户可以组合使⽤这些组件，也可以单独使⽤其中⼀个。
其实就这么简单，对某个事物的定义，个⼈感觉没有什么固定的答案，只是那种答案更⽅便你的记忆，你记住的，它存在你深深的脑海⾥的，便是答案！JQuery Easy Ui插件列表如下：分类插件Base（基础）Parser 解析器Easyloader 加载器Draggable 可拖动Droppable 可放置Resizable 可调整尺⼨Pagination 分页Searchbox 搜索框Progressbar 进度条Tooltip 提⽰框Layout（布局）Panel ⾯板Tabs 标签页/选项卡Accordion 折叠⾯板Layout 布局Menu（菜单）与 Button（按钮）Menu 菜单Linkbutton 链接按钮Menubutton 菜单按钮Splitbutton 分割按钮Form（表单）Form 表单Validatebox 验证框Combo 组合Combobox 组合框Combotree 组合树Combogrid 组合⽹格Numberbox 数字框Datebox ⽇期框Datetimebox ⽇期时间框Calendar ⽇历Spinner 微调器Numberspinner 数值微调器Timespinner 时间微调器Slider 滑块Window 窗⼝Window（窗⼝）Window 窗⼝Dialog 对话框Messager 消息框DataGrid（数据⽹格）与Tree（树）Datagrid 数据⽹格Propertygrid 属性⽹格Tree 树Treegrid 树形⽹格但是今天咱们只针对Tree（树）连接数据进⾏讲解！下⾯是它的⼀些基本的属性：id: 绑定到节点的标识值；text:显⽰⽂本；iconCls: 显⽰icon的css样式；checked: 节点是否选中；state: 节点状态, 'open' 或者 'closed'；attributes: 绑定到节点的⾃定义属性；target: ⽬标 DOM 对象；children: ⼀个节点数组,定义⼀些⼦节点。
JqueryEasyUI的添加，修改，删除，查询等基本操作介绍
JqueryEasyUI的添加，修改，删除，查询等基本操作介绍初识Jquery EasyUI看了⼀些博主⽤其开发出来的项⽬，页⾯很炫，感觉功能挺强⼤，效果也挺不错，最近⼀直想系统学习⼀套前台控件，于是在⽹上找了⼀些参考⽰例。
写了⼀些基本的增删改查功能，算是对该控件的基本⼊门。
后续有时间继续深⼊学习。
先看⼀下运⾏后的页⾯1、列表展⽰2、新增页⾯3、修改页⾯把jquery easyui下载好之后，⼀般引⽤下页⼏个⽂件复制代码代码如下:<link href="/Resources/easyui/css/default.css" rel="stylesheet" type="text/css" /><link href="/Resources/easyui/js/themes/default/easyui.css" rel="stylesheet"type="text/css" />//页⾯图标样式<link href="/Resources/easyui/js/themes/icon.css" rel="stylesheet" type="text/css" /><script src="/Resources/easyui/js/jquery-1.7.2.min.js" type="text/javascript"></script>//jquery easyui主要的js<script src="/Resources/easyui/js/jquery.easyui.min.js" type="text/javascript"></script>⾸先是列表展⽰数据复制代码代码如下:<table id="dg" title="My Users" class="easyui-datagrid" style="width: 700px; height: 250px"url="/GetJson/CreateJson.aspx" toolbar="#toolbar" pagination="true" rownumbers="true"fitcolumns="true" singleselect="true"><thead><tr><th field="AccountCode" width="50">编号</th><th field="AccountName" width="50">卡名</th><th field="AccountPwd" width="50">密码</th><th field="CreateTime" width="50">创建时间</th><th field="CreateName" width="50">创建⼈</th></tr></thead></table>jquery easyui是⽤datagrid对数据进⾏展⽰的，所以class要选择easyui-datagrid；url是本列表的⼀个json格式的数据来源toobar后⾯跟着的"#toobar"是列表的⼀个⼯具栏，本⽰例在列表上显⽰的是添加，修改，删除功能按钮对数据进⾏操作。
jQuery EasyUI API 中文文档 - DataGrid数据表格
jQuery EasyUI API 中文文档- DataGrid数据表格使用说明，需要的朋友可以参考下。
扩展自 $.fn.panel.defaults ，用 $.fn.datagrid.defaults 重写了defaults 。
依赖panelresizablelinkbuttonpagination用法复制代码代码如下:<table id="tt"></table>复制代码代码如下:$('#tt').datagrid({url:'datagrid_data.json',columns:[[{field:'code',title:'Code',width:100},{field:'name',title:'Name',width:100},{field:'price',title:'Price',width:100,align:'right'}]]});数据表格（DataGrid）的特性其特性扩展自panel，下列是为datagrid 增加的特性。
DataGrid 的 Column 是一个数组对象，它的每个元素也是一个数组。
数组元素的元素是一个配置对象，它定义了每个列的字段。
代码示例：复制代码代码如下:columns:[[{field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true}, {field:'productid',title:'ProductID',rowspan:2,width:80,sortable:true},{title:'Item Details',colspan:4}],[{field:'listprice',title:'ListPrice',width:80,align:'right',sortable:true}, {field:'unitcost',title:'UnitCost',width:80,align:'right',sortable:true}, {field:'attr1',title:'Attribute',width:100}, {field:'status',title:'Status',width:60}]]编辑器（Editor）用 $.fn.datagrid.defaults.editors 重写了 defaults。
jQueryEasyUI框架使用文档
JQUERY EASYUI框架使用文档jQuery EasyUI是一个基于jQuery实现的Web UI框架，用法非常简单，但是功能非常强大，使用它你可以使用很少的Javascript代码来制作适合自己的网页。
主页:下载:/download这里介绍一下快速使用这个框架的方法：首先在你使用的HTML页面的头部需要包含一些CSS文件和JS文件：1.<link rel="stylesheet" type="text/css"href="../themes/default/easyui.css">2.<script type="text/javascript"src="../jquery-1.4.2.min.js"></script>3.<script type="text/javascript"src="../jquery.easyui.min.js"></script>这三个文件是必须要包含的，第一个是EasyUI的CSS文件，后面两个JS一个是jQuery，一个是EasyUI的JS文件。
包含这几个文件后就可以使用EasyUI了，因为EasyUI的功能十分强大，所以把这些功能分类如下，便于大家学习使用，我会在随后的文章里逐一介绍每个分类的用法和例子：JQUERY EASYUI 面板(PANEL)用法星期五,2010 四9 00:47:37这篇文章介绍一下面板(Panel)用法以及参数，首先我们可以先看一下面板功能可以做什么，下图就是一个面板的实例。
（查看演示）同样我们来通过一个小例子来学习一下这些参数，HTML代码如下：1.<div id="p" title="My Panel" collapsible="true"style="padding:10px;">2. Panel Content3.</div>然后按照《jQuery EasyUI框架使用文档》包含必要文件后，只要在$(function(){ }); 里添加一行代码来生成面板：1.$('#p').panel(options);也可以给面板函数添加一些参数：1.$('#p').panel({2. title: 'My Panel',3. tools: [{4. iconCls:'icon-new',5. handler:function(){alert('new')}6. },{7. iconCls:'icon-save'8. handler:function(){alert('save')}9. }]10.});也可以把面板移动到其他位置：1.$('#p').panel('move',{2. left:100,3. top:1004.});在jQuery EasyUI的1.1版本以后又添加了几个新的插件，日期框就在其内，在web查询信息的时候经常会用到日期框，下面来看一下jQuery EasyUI的效图：1.<input id="dd" type="text"></input>然后按照《jQuery EasyUI框架使用文档》包含必要文件后，在$(function(){ }); 里插入下面的代码即可：1.$('#dd').datebox(options);jQuery EasyUI日期框需要依存于一下的几个插件：* calendar（日历）* validatebox（验证框）下面来介绍DateBox的具体用法，首先来看属性：事件方法jQuery EasyUI可以方便实现很多功能，这里将会介绍一下可拖动（Draggable）的具体用法，jQuery EasyUI不仅可以轻松实现DOM元素的拖动，而且可以使用一些参数让它的使用更加灵活，我们来通过一个小例子来学习一下这些参数：（查看演示）HTML代码如下：1.<div id="dd" style="width:100px;height:100px;border:1px solid#ccc;">2. <div id="title" style="background:#ccc;">title</div>3.</div>然后按照《jQuery EasyUI框架使用文档》包含必要文件后，只要在$(function(){ }); 里添加一行代码即可：1.$('#dd').draggable(options);其中options 是可选的参数，可以写，也可以不写，下面再举个写参数的例子，1.$('#dd').draggable({2.handle:'#title',3.disabled:false,4.edge:1,5.axis:'h',6.onStartDrag:function(){7.8.$("<div></div>").appendTo("body").html('startdrag:'+$(this).css('left'));9.10.}11.});下面介绍一下所有的参数和事件，如下：参数事件了解这个参数和事件的作用以后，就可以很灵活的使用jQuery EasyUI 可拖放(Draggable)的功能了。
EasyUI
• 表单提交的三种方式
• 传统ajax方式提交 • 定义form自动提交 • 定义form手动提交
• 回车换行
• $('#myform').find('input').on('keyup' , function(event){
if(event.keyCode == '13'){ $('#myform').submit(); } });
• 理解Jquery组件之间的关系 • 理解Jquery的俩种写法 • 理解动态加载组件的方法，但不推荐使用
• 动态加载 easyloader.js • jquery.parser.js 解析标签里的class值
• 学会查API以及培养调试bug的能力
第三讲：Form表单
• 学会Form表单的验证
第一讲：1.2 Message 消息框
• Messager组件
• • • • • $.messager.alert $.messager.confirm $.messager.prompt $.messager.progress $.messager.show
第二讲：基础组件(panel、window、dialog)
第八讲：treegrid、combotree
• 对于easyui 掌握了datagrid、和tree的使用 • 那么对于一些扩展的组件我们也可以很容易的实现
第四讲：Layout布局
• 学会使用Layout组件布局 • accordion手风琴组件 • tabs组件的使用
第五讲：5.1 Dategrid数据表格
• 理解datagrid的概念
EasyUI中文学习教程
教程概述这个教程的目的是说明如何使用easyui框架容易的创建网页。
首先，你需要包含一些js和css文件：<link rel="stylesheet"type="text/css"href="../themes/default/easyui.css"><script type="text/javascript"src="../jquery-1.4.2.min.js"></script><script type="text/javascript"src="../jquery.easyui.min.js"></script>easyui预定义了一些图标css，这些css类可以显示图片背景（16×16）。
使用这些类之前，需要包含：<link rel="stylesheet"type="text/css"href="../themes/icon.css">内容1.拖放o基本拖放o创建购物车式拖放o创建课程表基本拖放这个教程显示如何使HTML元素变得可拖放。
这个例子会创建3个DIV元素然后让它们变得可拖放。
首先，创建三个DIV元素：<div id="dd1"class="dd-demo"></div><div id="dd2"class="dd-demo"></div><div id="dd3"class="dd-demo"></div>让第一个DIV元素可拖放，使用默认的拖放样式。
easyUI入门教程
eaysUI简介：easyui是一种基于jQuery的用户界面插件集合。
easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。
使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架。
easyui节省您网页开发的时间和规模。
easyui很简单但功能强大的。
本次用到的插件：jquery-easyui-1.4主要引用：<link rel="stylesheet"type="text/css"href="<%=path%>/js/themes/default/easyui.css"><link rel="stylesheet"type="text/css"href="<%=path%>/js/themes/icon.css"><link rel="stylesheet"type="text/css"href="<%=path%>/js/demo.css"><script type="text/javascript"src="<%=path%>/js/jquery.min.js"></script><script type="text/javascript"src="<%=path%>/js/jquery.easyui.min.js"></script><script type="text/javascript"src="<%=path%>/js/locale/easyui-lang-zh_CN.js"></script>一、layout (布局)A) layout （布局）1.<body class="easyui-layout">2.<div data-options="region:'north',title:'North Title',split:true"style="height:100px;"></div>3.<div data-options="region:'south',title:'South Title',split:true"style="height:100px;"></div>4.<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true"style="width:100px;"></div>5.<div data-options="region:'west',title:'West',split:’true’style="width:100px;"></div>6.<div data-options="region:'center',title:'center title'"style="padding:5px;background:#eee;"></div>7.</body>split:为true时用户可以通过分割栏改变面板大小。
跟我学jQuery EaseUI Web前端框架——EaseUI组件应用技术及实例
目录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 版各插件的示例示例。
jQueryEasyUI的editor组件使用
jQueryEasyUI的editor组件使⽤问题:最近在优化⼀个项⽬时，前端⽤到了 easyui这个插件来实现表格，搞了很久，才实现出⼀部分功能，但是还是有很多地⽅不熟悉，故记录⼀下，以后再研究第⼀个实例------------------------------------------------------------------------------------------------<!DOCTYPE html><html><head><meta charset="utf-8"><title></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 src="easyui/jquery-1.7.2.min.js"></script><script src="easyui/jquery.easyui.min.js"></script><script src="easyui/locale/easyui-lang-zh_CN.js"></script></head><body><div id='grid-toolbar'><div class="criteria"><span><a type="btn-save" class="easyui-linkbutton btn-blue" iconCls="icon-save">全部保存</a></span></div></div><table id="result_grid" class="easyui-datagrid" style="width:410px;height:250px" ,fitColumns:true,singleSelect:true"><thead><tr><th data-options="field:'code',width:100">Code</th><th data-options="field:'name',width:100">Name</th><th data-options="field:'price',width:100,align:'right'">Price</th><th data-options="field:'cc',width:100,align:'right',editor:{type:'text'}">可编辑</th></tr></thead><tbody><tr><td>001</td><td>name1</td><td>2323</td><td>11</td></tr><tr><td>002</td><td>name2</td><td>4612</td><td>11</td></tr></tbody></table><script>$('#result_grid').datagrid({onClickRow: function(rowIndex, rowData) {$("#result_grid").datagrid('selectRow', rowIndex);$("#result_grid").datagrid('beginEdit', rowIndex); //设置可编辑状态},onBeforeEdit: function(index, row) {editRow = row;row.editing = true;},onAfterEdit: function(index, row, changes) {$('#result_grid').datagrid('updateRow', {index: index,row: {occupation: parseInt(row.occupation),cause: row.cause}});datagridMgr.addRow(row);row.editing = false;},onCancelEdit: function(index, row) {row.editing = false;},})/*** 数据管理对象*/var datagridMgr = {dataList:[],/*** 查询数据*/queryData:function(){var name=$('input[name="username"]').val();var startTime=$('input[name="startTime"]').val();var endTime=$('input[name="endTime"]').val();$('#result_grid').datagrid('load',{name: name,startTime: startTime,endTime:endTime});},addRow:function(row){this.dataList.push(row);},submitData:function(){var json=JSON.stringify(this.dataList);}}/*** 查询事件*/$('a[type="btn-search"]').bind("click",function(){datagridMgr.queryData();});/*** 全部保存*/$('a[type="btn-save"]').bind("click",function(){if(editRow){datagridMgr.dataList.length=0;var rows = $('#result_grid').datagrid("getSelections");for(var i=0;i<rows.length;i++){var index=$('#result_grid').datagrid('getRowIndex',rows[i]); $('#result_grid').datagrid("endEdit", index);}var data=$('#result_grid').datagrid('getData');$('#result_grid').datagrid('loadData',data);editRow=null;datagridMgr.submitData();}else{$.messager.alert('温馨提⽰','没有⾏需要保存');}});</script></body></html>第⼆个实例:----------------------------------------------------------------------------------------------------------------------------------------------<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" /><link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" /><link rel="stylesheet" type="text/css" href="easyui/texteditor.css" /><script src="easyui/jquery.min.js"></script><script src="easyui/jquery.easyui.min.js"></script><script src="easyui/locale/easyui-lang-zh_CN.js"></script><script src="easyui/jquery.texteditor.js"></script><style>.criteria{margin-top: 10px;margin-bottom: 10px;}.criteria > span{display: inline-block;width: 20%;}.criteria label{margin: 0px 10px;}.criteria span a{margin: 0px 5px;}</style></head><body><div id='grid-toolbar'><div class="criteria"><span><label>名称:</label><input type="text" class="easyui-textbox" name="username" ></span><span ><label>开始时间：</label><input type="text" class="easyui-datebox" name="startTime" id="startTime" data-options="editable:false"/></span><span><label>结束时间：</label><input type="text" class="easyui-datebox" name="endTime" id="endTime" data-options="editable:false"/></span><span><a type="btn-search" class="easyui-linkbutton btn-blue" iconCls="icon-search">查询</a><a type="btn-save" class="easyui-linkbutton btn-blue" iconCls="icon-save">全部保存</a></span></div></div><table id="result_grid"></table></body><script>var editRow=null;$('#result_grid').datagrid({url:"new_file.json",method: "get",fitColumns:true,//宽度⾃适应height: 280,rownumbers:true,nowrap:true,pagination:true,pageNumber:1,pageSize:10,pageList:[10,20,30],onClickRow: function (rowIndex, rowData) {$("#result_grid").datagrid('selectRow', rowIndex);$("#result_grid").datagrid('beginEdit', rowIndex);//设置可编辑状态 },onBeforeEdit:function(index,row){editRow=row;row.editing = true;},onAfterEdit:function(index, row, changes){$('#result_grid').datagrid('updateRow',{index: index,row: {occupation: parseInt(row.occupation),cause: row.cause}});datagridMgr.addRow(row);row.editing = false;},onCancelEdit:function(index,row){row.editing = false;},columns:[[{field: 'id', checkbox:true,width:60},{field:'name',title:'名字',width:150},{field:'age',title:'年龄',width:150},{field:'sex',title:'性别',width:150,formatter:function(value,row,index){ var result='';switch(value){case 0:result='⼥';break;case 1:result='男';break;}return result;}},{field:'occupation',title:'职业(可编辑)',width:150,formatter:function(value,row,index){var result='';switch(parseInt(value)){case 1:result='教师';break;case 2:result='⼯程师';break;}return result;},editor : {type : 'combobox',options : {editable:false,valueField:'code',textField:'text',url:"file:///C:/Users/86155/Documents/HBuilderProjects/easyui/new_file.json" }}},{field:'cause',title:'参赛原因(可编辑)',width:150,editor : {type : 'text'}},{field:'creatTime',title:'报名时间',width:150}]],toolbar: '#grid-toolbar'});/*** 数据管理对象*/var datagridMgr = {dataList:[],/*** 查询数据*/queryData:function(){var name=$('input[name="username"]').val();var startTime=$('input[name="startTime"]').val();var endTime=$('input[name="endTime"]').val();$('#result_grid').datagrid('load',{name: name,startTime: startTime,endTime:endTime});},addRow:function(row){this.dataList.push(row);},submitData:function(){var json=JSON.stringify(this.dataList);subimtJsonData(json);}}/*** 查询事件*/$('a[type="btn-search"]').bind("click",function(){datagridMgr.queryData();});/*** 全部保存*/$('a[type="btn-save"]').bind("click",function(){if(editRow){datagridMgr.dataList.length=0;var rows = $('#result_grid').datagrid("getSelections");for(var i=0;i<rows.length;i++){var index=$('#result_grid').datagrid('getRowIndex',rows[i]);$('#result_grid').datagrid("endEdit", index);}var data=$('#result_grid').datagrid('getData');$('#result_grid').datagrid('loadData',data);editRow=null;datagridMgr.submitData();}else{$.messager.alert('温馨提⽰','没有⾏需要保存');}});/*** 提交数据* @param {Object} json*/function subimtJsonData(json){$.ajax({type: "POST",url:"file:///C:/Users/86155/Documents/HBuilderProjects/easyui/new_file.json",dataType: "json",data: {data:json},success: function (data) {$.messager.alert('温馨提⽰',data.message);}});}</script></html>new_file.json⽂件:[{"id":1,"name":"张三","sex":1,"age":"13","cc":11},{"id":1,"name":"张三","sex":1,"age":"13","cc":11},{"id":1,"name":"张三","sex":1,"age":"13","cc":11}]备注:jQuery EasyUI官⽹。
JqueryEasyui菜单组件Menu使用详解（15）
text : '新增', iconCls : 'icon-add', onclick : function () { alert('新增'); }, });
//追加一个子菜单项 $('#box').menu('appendItem', {
//禁用指定菜单项 $('#box').menu('disableItem', '#new');
//启用指定菜单项 $('#box').menu('enableItem', '#new');
//使用$.fn.menu.defaults 重写默认值对象。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
}, onClick : function (item) { alert(item.text); } });
菜单方法
//返回属性对象 console.log9;));
//显示菜单 $('#box').menu('show', {
left : e.pageX, top : e.pageY, });
这篇文章主要介绍了jquery超简单遮罩层实现方法结合实例形式详细分析了jquery遮罩层相关属性样式动态控制操作技巧需要的朋友可以参考下
JqueryEasyui菜单组件 Menu使用详解（ 15）
本文实例为大家分享了Jquery Easyui菜单组件的实现代码，供大家参考，具体内容如下
第二百二十四节，jQueryEasyUI，ComboGrid（数据表格下拉框）组件
第⼆百⼆⼗四节，jQueryEasyUI，ComboGrid（数据表格下拉框）组件jQuery EasyUI，ComboGrid(数据表格下拉框)组件学习要点： 1.加载⽅式 2.属性列表 3.⽅法列表本节课重点了解 EasyUI 中 ComboGrid(数据表格下拉框)组件的使⽤⽅法，这个组件依赖于 Combo(⾃定义下拉框)和 DataGrid(数据表格)组件。
⼀．加载⽅式class 加载⽅式<select id="box" class="easyui-combogrid" name="dept"style="width:250px;"data-options="panelWidth:450,value:'请选择⼀个值',idField:'id',textField:'user',url:'content.json',columns:[[{field:'user',title:'帐号',width:120},{field:'email',title:'邮箱',width:120},{field:'date',title:'创建时间',width:120},]]"></select>JS 加载⽅式<input id="box" name="user" value="请选择⼀个⽤户">jscombogrid()将⼀个input元素执⾏数据表格下拉框组件$(function () {$('#box').combogrid({panelWidth: 600,idField: 'id',textField: 'user',url: 'content.json',columns: [[{field: 'id',title: '编号',width: 120,},{},{field: 'date',title: '创建时间',width: 120,}]]});});⼆．属性列表注意：Combo(⾃定义下拉框)组件，⽤⾃定义下拉框的属性，⽅法，事件 DataGrid(数据表格)组件⽤数据表格的属性，⽅法，事件loadMsg string 在数据表格加载远程数据的时候显⽰消息。
jquery+easyui中getcolumnoption方法的用法
jquery+easyui中getcolumnoption方法的用法在jQuery EasyUI中，getColumnOption方法用于获取指定列的属性选项。
使用getColumnOption方法，需要传入两个参数：field和type。
field参数表示要获取属性选项的列字段名，type参数表示要获取的属性选项类型。
getColumnOption方法返回一个对象，其中包含了指定列的属性选项。
下面是getColumnOption方法的用法示例：var columnOption = $('#dg').datagrid('getColumnOption', 'columnName', 'optionType');在上面的示例中，我们通过id选择器选择一个EasyUI的datagrid，并调用datagrid方法的getColumnOption来获取指定列的属性选项。
•columnName：代表要获取属性选项的列字段名，需要根据实际的列字段名来替换。
•optionType：代表要获取的属性选项类型，可以是'editor'、'styler'、'formatter'等，需要根据实际需要来替换。
例如，要获取名为'name'的列的'editor'属性选项，可以使用如下代码：var editorOption = $('#dg').datagrid('getColumnOption', 'name', 'editor');getColumnOption方法可以用于获取列的各种属性选项，例如：•editor：获取列的编辑器选项。
•styler：获取列的样式选项。
•formatter：获取列的格式化选项。
在实际开发中，我们可以根据需要使用getColumnOption方法，来获取指定列的属性选项，并进行相应的操作。
jQuery_EasyUI API 中文帮助手册1.24
jQuery EasyUI中文帮助手册目录jQuery EasyUI中文帮助手册 (1)API版本：1.2.4 ........................................................... 错误！未定义书签。
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 布局面板 (27)布局面板 (27)3. 菜单和按钮 (30)3.1 菜单 (30)菜单 (30)3.2 链接按钮 (33)链接按钮 (33)3.3 菜单按钮 (34)菜单按钮 (34)3.4 分隔按钮 (35)分隔按钮 (35)4. 表单 (36)4.1 表单 (36)表单 (36)4.2 表单验证 (38)表单验证 (38)4.3 自定义组合框 (40)自定义组合框 (40)4.4 可装载组合框 (42)可装载组合框 (42)4.5 组合树 (45)组合树 (45)4.6 组合表格 (46)组合表格 (46)4.7 数字验证框 (48)数字验证框 (48)4.8 日期组合框 (49)日期组合框 (49)4.9 日期时间组合框 (51)日期时间组合框 (51)4.10 日历 (53)日历 (53)4.11 调节器 (54)调节器 (54)4.12 数字调节器 (56)数字调节器 (56)4.13 时间调节器 (57)时间调节器 (57)5. 窗口 (58)5.1 窗口 (58)窗口 (58)5.2 对话窗口 (60)对话窗口 (60)5.3 消息窗口 (61)消息窗口 (61)6. 数据表格和树形菜单 (63)6.1 数据表格 (63)数据表格 (63)6.2 属性表格 (73)属性表格 (73)6.3 树形菜单 (74)树形菜单 (74)6.4 树形表格 (80)树形表格 (80)1.基本1.1语法解析语法解析使用方法属性事件方法1.2简单载入器简单载入器使用方法属性名称 类型描述默认值modules （模块） object （对象） 预定义模块。
jQueryEasyUI
查找插件和帮助（常用网址）
jQueryUI官方网站 jQueryUI官方网站提供的API文档 jQuery官方网站的插件库
onLoadError()
加载远程数据发生某些错误时触发
onBeforeLoad(param) 发送加载数据的请求前触发
15/21
datagrid插件5-3
Column对象常用属性
属性
说明
String title
列的标题文字
String field
列的字段名
Number width
列的宽度
String align
//是否显示复选框
onDblClick:function(node){ //鼠标双击事件
$(this).tree("toggle",node.target); //改变当前节点状态
}
});
});
</script>
演示示例1：树形菜单
11/21
tree插件5-5
tree数据节点说明
参数
说明
String id 或 Integer id 当前节点的id
<script> $(function(){
jquery.easyui.min.js包含了easyUI中的所有插件
$('#tree').tree({
url:'tree_data.json',
//远程加载tree数据的url路径
animate:true,
//是否开启动画效果
checkbox:true,
jQueryEasyUIAPI中文文档-表格树（Treegrid）
jQueryEasyUIAPI中⽂⽂档-表格树（Treegrid）TreeGrid由 $.fn.datagrid.defaults扩展⽽来。
default由$.fn.treegrid.defaults重载。
Treegrid⽤来在表格中显⽰层级数据。
它基于datagrid,结合了treeview和editable grid。
Treegrid可以⾃定义，异步展开⾏数据，在多列中展⽰层级数据。
依赖控件datagrid⽤法⽤HTML标记⽣成treegrid. 在⼤多数情况下，treegrid和datagrid 拥有相同的结构和格式；<table id="tt" class="easyui-treegrid" style="width:600px;height:400px"data-options="url:'get_data.php',idField:'id',treeField:'name'"><thead><tr><th data-options="field:'name',width:180">Task Name</th><th data-options="field:'persons',width:60,align:'right'">Persons</th><th data-options="field:'begin',width:80">Begin Date</th><th data-options="field:'end',width:80">End Date</th></tr></thead></table>⽤javascript⽣成treegrid<table id="tt" style="width:600px;height:400px"></table>$('#tt').treegrid({url:'get_data.php',idField:'id',treeField:'name',columns:[[{title:'Task Name',field:'name',width:180},{field:'persons',title:'Persons',width:60,align:'right'},{field:'begin',title:'Begin Date',width:80},{field:'end',title:'End Date',width:80}]]});属性属性扩展⾃datagrid, 下⾯是为treegrid新增的属性：名称类型描述缺省值idField string树节点的key值。
jQueryEasyUIAPI中文文档-ComboBox组合框
jQueryEasyUIAPI中⽂⽂档-ComboBox组合框扩展⾃ $bo.defaults。
⽤ $bobox.defaults 重写了 defaults。
依赖 combo ⽤法 <select id="cc" name="dept" style="width:200px;"> <option value="aa">aitem1</option><option>bitem2</option> <option>bitem3</option> <option>ditem4</option> <option>eitem5</option> </select> <inputid="cc" name="dept" value="aa"> 复制代码代码如下: $('#cc').combobox({ url:'combobox_data.json', valueField:'id', textField:'text' }); json 数据格式的⽰例复制代码代码如下: [{ "id":1, "text":"text1" },{ "id":2, "text":"text2" },{ "id":3, "text":"text3", "selected":true },{ "id":4, "text":"text4" },{ "id":5, "text":"text5" }]其特性扩展⾃ combo，下列是为combobox 增加的特性。
JqueryEasyui对话框组件Dialog使用详解（14）
JqueryEasyui对话框组件Dialog使⽤详解（14）Dialog对话框组件依赖于Window(窗⼝)组件、linkbutton 组件加载⽅式Class加载<div class="easyui-dialog"title="弹出框"data-options="iconCls:'icon-add',resizable:true,modal:true"style="width: 400px;height: 200px;">弹出框内容</div>JS调⽤加载<div id="box">弹出框内容</div><div id="tt"><a href="#" class="easyui-linkbutton"data-options="iconCls:'icon-edit',plain:true">编辑</a><a href="#" class="easyui-linkbutton"data-options="iconCls:'icon-help',plain:true">帮助</a></div><script>$(function () {$('#box').dialog({width : 400,height : 200,title : '弹出框标题',modal : true,// 是否显⽰可折叠按钮collapsible : false,// 是否显⽰最⼩化按钮minimizable : false,// 是否显⽰最⼤化按钮maximizable : false,// 是否可以改变对话框窗⼝⼤⼩resizable : false,// 设置对话框窗⼝顶部⼯具栏//buttons : '#tt',toolbar : [{text : '编辑',iconCls : 'icon-edit',handler : function () {alert('edit');},}, {}],// 对话框窗⼝底部按钮buttons : [{text : '保存',iconCls : 'icon-ok',handler : function () {alert('save');}},{}]})});</script>属性列表窗⼝属性扩展⾃ Window(⾯板)，窗⼝新增或重新定义的属性如下Dialog 是继承⾃ Window 组件的，所以 Window 组件和 Panel 组件均可⽤事件列表窗⼝的事件完整继承⾃ Window(⾯板)。
jQueryEasyUI数字框（NumberBox）用法
jQueryEasyUI数字框（NumberBox）⽤法这⾥的options是选项，可以参考下表：选项名类型描述默认值min数字⽂本框中可允许的最⼩值nullmax数字⽂本框中可允许的最⼤值nullprecision数字最⾼可精确到⼩数点后⼏位0例如：⾦额输⼊框最⼤值为“99999.99” 精确到两位⼩数。
<input name="money" id="money" type="text" class="easyui-numberbox" precision="2" max="99999.99" size="8" maxlength="8" style="text-align:right;"/>如果是动态的input 加载的时候会有问题。
解决⽅法：加载动态的input后，更新⼀下jquery.easyui.min.js⽂件。
就相当于重新加载⼀次jquery.easyui.min.js⽂件。
另转⼀个 JQuery 验证表单只能输⼊数字⽀持⽕狐$.fn.numeral = function() {$(this).css("ime-mode", "disabled");this.bind("keypress",function(e) {var code = (e.keyCode ? e.keyCode : e.which); //兼容⽕狐 IEif(!$.browser.msie&&(e.keyCode==0x8)) //⽕狐下不能使⽤退格键{return ;}return code >= 48 && code<= 57;});this.bind("blur", function() {if (stIndexOf(".") == (this.value.length - 1)) {this.value = this.value.substr(0, this.value.length - 1);} else if (isNaN(this.value)) {this.value = "";}});this.bind("paste", function() {var s = clipboardData.getData('text');if (!/\D/.test(s));value = s.replace(/^0*/, '');return false;});this.bind("dragenter", function() {return false;});this.bind("keyup", function() {if (/(^0+)/.test(this.value)) {this.value = this.value.replace(/^0*/, '');}});};使⽤⽅法 $("#txt1").numeral();。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
目录1Accordion（可折叠标签） (4)1.1实例 (4)1.2参数 (5)2DateBox（日期框） (5)2.1实例 (5)2.2参数 (8)2.3事件 (8)2.4方法 (8)3ComboBox(组合框) (8)3.1实例 (8)3.2参数 (10)3.3事件 (11)3.4方法 (11)4Dialog（对话框） (11)4.1实例 (11)4.2参数 (13)4.3事件 (14)4.4方法 (14)5Messager（提示框） (14)5.1实例 (14)5.2方法 (17)5.3扩展 (18)6NumberBox（数字框） (18)6.1实例 (18)6.2参数 (19)7ValidateBox（验证框） (19)7.1实例 (19)7.2参数 (21)7.3方法 (21)7.4扩展 (21)8Pagination（分页） (22)8.1实例 (22)8.2参数 (23)8.3事件 (24)9Window（窗口） (24)9.1实例 (24)9.2参数 (27)9.3事件 (27)9.4方法 (27)10Panel（面板） (27)10.1实例 (27)10.2参数 (29)10.3事件 (30)10.4方法 (30)11Tabs（标签） (31)11.1实例 (31)11.2参数 (33)11.3事件 (33)11.4方法 (34)11.5标签面板属性 (34)12Tree（树） (34)12.1实例 (34)12.2参数 (37)12.3事件 (38)12.4方法 (38)13Layout（布局） (39)13.1实例 (39)13.2参数 (40)13.3方法 (40)14Datagrid（数据表） (40)14.1实例 (41)14.2参数 (44)14.3Column参数 (45)14.4事件 (46)14.5方法 (47)1Accordion（可折叠标签）1.1实例1.1.1代码<html><head><meta http-equiv="Content-Type"content="text/html; charset=UTF-8"><title>jQuery EasyUI</title><link rel="stylesheet"type="text/css"href="../themes/default/easyui.css"><link rel="stylesheet"type="text/css"href="../themes/icon.css"><script type="text/javascript"src="../jquery-1.4.2.min.js"></script><script type="text/javascript"src="../jquery.easyui.min.js"></script><script type="text/javascript">$( function() {$('#aa').accordion( {width : 400,height : 200,fit : false});});</script></head><body><div id="aa"border="true"><div title="Title1"icon="icon-save" style="overflow: auto; padding: 10px;"> <h3style="color: #0099FF;">Accordion for jQuery</h3><p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p></div><div title="Title2"icon="icon-reload"selected="true"style="padding: 10px;">content2</div><div title="Title3">content3</div></div></body></html>1.1.2效果图1.1.3 扩展实例html代码中<div id="aa"border="true">此行也可写成<div id="aa" class="easyui-accordion" style="width:300px;height:200px;" fit="false" border="false">，并且将js代码全部去掉，效果图是一样的。
1.2参数1.2.1容器参数1.2.2面板参数可折叠标签面板继承自面板（panel）,许多属性定义在<div />标签里，下面的属性就是如此：2DateBox（日期框）2.1实例2.1.1代码<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type"content="text/html; charset=gb2312"><title>jQuery EasyUI</title><link rel="stylesheet"type="text/css"href="../themes/default/easyui.css"><link rel="stylesheet"type="text/css"href="../themes/icon.css"><script type="text/javascript"src="../jquery-1.4.2.min.js"></script> <script type="text/javascript"src="../jquery.easyui.min.js"></script> <script>function disable() {$('#dd').datebox('disable');}function enable() {$('#dd').datebox('enable');}/*将Date/String类型,解析为String类型.传入String类型,则先解析为Date类型不正确的Date,返回 ''如果时间部分为0,则忽略,只返回日期部分.*/function formatDate(v) {if (v instanceof Date) {var y = v.getFullYear();var m = v.getMonth() + 1;var d = v.getDate();var h = v.getHours();var i = v.getMinutes();var s = v.getSeconds();var ms = v.getMilliseconds();if (ms > 0)return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s+ '.' + ms;if (h > 0 || i > 0 || s > 0)return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;return y + '-' + m + '-' + d;}return'';}$( function() {$('#dd').datebox( {currentText : '今天',closeText : '关闭',disabled : false,required : true,missingMessage : '必填',formatter : formatDate});});</script></head><body><h1>DateBox</h1><div style="margin-bottom: 10px;"><a href="#"onclick= disable();>disable</a><a href="#"onclick=enable();>enable</a></div><input id="dd"></input></body></html>2.1.2效果图2.2参数2.3事件2.4方法3ComboBox(组合框)3.1实例3.1.1代码<html><head><meta http-equiv="Content-Type"content="text/html; charset=gb2312"> <title>jQuery EasyUI</title><link rel="stylesheet"type="text/css"href="../themes/default/easyui.css"><link rel="stylesheet"type="text/css"href="../themes/icon.css"><script type="text/javascript"src="../jquery-1.4.2.min.js"></script> <script type="text/javascript"src="../jquery.easyui.min.js"></script> <script>function loadData(){$('#cc').combobox({url:'combobox_data.json',//该文件内容在下面valueField:'id',textField:'text'});}function setValue(){$('#cc').combobox('setValue','2');}function getValue(){var val = $('#cc').combobox('getValue');alert(val);}function disable(){$('#cc').combobox('disable');}function enable(){$('#cc').combobox('enable');}$( function() {$('#cc').combobox( {width:150,listWidth:150,listHeight:100,//valuefield:'value',//textField:'text',//url:'combobox_data.json',editable:false});});</script></head><body><h1>ComboBox</h1><div style="margin-bottom: 10px;"><a href="#"onclick="loadData()">loadData</a><a href="#"onclick="setValue()">setValue</a><a href="#"onclick="getValue()">getValue</a><a href="#"onclick="disable()">disable</a><a href="#"onclick="enable()">enable</a></div><span>Options: </span><select id="cc"name="dept"required="true"><option value="">==请选择==</option><option value="0">苹果</option><option value="1">香蕉</option><option value="2">鸭梨</option><option value="3">西瓜</option><option value="4">芒果</option> </select></body></html>combobox_data.json内容：[{"id":1,"text":"text1"},{"id":2,"text":"text2"},{"id":3,"text":"text3","selected":true},{"id":4,"text":"text4"},{"id":5,"text":"text5"}]3.1.2效果图3.2参数3.3事件3.4方法4Dialog（对话框）4.1实例4.1.1代码<html><head><meta http-equiv="Content-Type"content="text/html; charset=gb2312"> <title>jQuery EasyUI</title><link rel="stylesheet"type="text/css"href="../themes/default/easyui.css"><link rel="stylesheet"type="text/css"href="../themes/icon.css"><script type="text/javascript"src="../jquery-1.4.2.min.js"></script> <script type="text/javascript"src="../jquery.easyui.min.js"></script> <script>$(function(){$('#dd').dialog({title:'对话框',collapsible:true,minimizable:true,maximizable:true,resizable:true,toolbar:[{text:'Add',iconCls:'icon-add',handler:function(){alert('add');}},'-',{text:'Save',iconCls:'icon-save',handler:function(){alert('save');}}],buttons:[{text:'Ok',iconCls:'icon-ok',handler:function(){alert('ok');}},{text:'Cancel',handler:function(){$('#dd').dialog('close');}}]});});function open1(){$('#dd').dialog('open');}function close1(){$('#dd').dialog('close');}</script></head><body><h1>Dialog</h1><div style="margin-bottom: 10px;"><a href="#"onclick="open1()">open1</a><a href="#"onclick="close1()">close1</a></div><div id="dd"icon="icon-save"style="padding: 5px; width: 400px; height: 200px;"> <p>dialog content.</p><p>dialog content.</p><p>dialog content.</p><p>dialog content.</p><p>dialog content.</p><p>dialog content.</p><p>dialog content.</p><p>dialog content.</p></div></body></html>4.1.2效果图4.2参数4.3事件Dialog的事件和窗口(Window)的事件相同。