easyUI整理

最新推荐文章于 2021-01-27 15:02:51 发布
最新推荐文章于 2021-01-27 15:02:51 发布
阅读量453 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dawn_WL/article/details/78149124
版权

引入部分:

<link rel="stylesheet" type="text/css" href="themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="themes/icon.css"/>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="locale/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>

推荐学习网站：http://www.jeasyui.net/plugins/

accordion: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="themes/default/easyui.css"/>
		<link rel="stylesheet" type="text/css" href="themes/icon.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$('#accordion').accordion({
					width:300,
					height:200
				})
				$("#accordion").accordion('add',{
					title:'accordion1',
					content:'accordion1 content',
					selected:false
				})
				$("#accordion").accordion('add',{
					title:'accordion2',
					content:'accordion2 content',
					selected:true
				})
				$("#accordion").accordion('add',{
					title:'accordion3',
					content:'accordion3 content',
					selected:false
				})
			})
		</script>
	</head>
	<body>
		<div id="accordion">
			
		</div>
	</body>
</html>

datagrid: 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="themes/default/easyui.css"/>
		<link rel="stylesheet" type="text/css" href="themes/icon.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="locale/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//把json数据获取出来
				var data;
				$.ajax({
					type:"get",
					url:"data.json",
					async:true,
					success:function(d){
						data=d;
						$('#datagrid').datagrid({
							title:'学员信息',
							sortOrder:'asc',
							height:300,
							width:300,
							pagination:true,
							pageSize:5,
							aligh:'center',
							remoteSort:false,
							pageList:[5,10,15,20],
							tools:[{
								iconCls:'icon-add',
								handler:function(){
									$("#datagrid").datagrid('appendRow',{
										id:21,
										name:'蜡笔小新',
										score:43
									})
								}
							},{
								iconCls:'icon-remove',
								handler:function(){
									$("#datagrid").datagrid('deleteRow',{
										
									})
								}
							}],
							columns:[[{
								title:'学生编号',
								field:'id',
								width:100,
								sortable:true
								
							},{
								title:'学员姓名',
								field:'name',
								width:100,
								sortable:true
							},{
								title:'学生成绩',
								field:'score',
								width:100,
								sortable:true
							}]], 
							data:{
								
								total:data.length,
								rows:data.slice(0,5)
								
							}
						})
						var pager=$('#datagrid').datagrid('getPager');
						pager.pagination({
							onSelectPage:function(pageNumber,pageSize){
								//alert(pageNumber);
								$('#datagrid').datagrid('loadData',{
									total:data.length,
									rows:data.slice((pageNumber-1)*pageSize,pageNumber*pageSize)
								})
							}
						})
					}
				})
				
			})
		</script>
	</head>
	<body>
		<table id="datagrid">
			
		</table>
	</body>
</html>
dialog: 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="themes/default/easyui.css"/>
		<link rel="stylesheet" type="text/css" href="themes/icon.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$('#dialog').dialog({
					title:'对话框',
					width:300,
					height:200,
					resizable:true,
					collapsible:true,
					tools:[{
						iconCls:'icon-add',
						handler:function(){
							alert('点击了添加');
						}
					},{
						iconCls:'icon-clear',
						handler:function(){
							alert('点击了删除');
						}
					}],
					toolbar:[{
						iconCls:'icon-add',
						handler:function(){
							alert('添加');
						},
						text:'添加'
					},{
						iconCls:'icon-clear',
						handler:function(){
							alert('取消');
						},
						text:'取消'
					}],

					buttons:[{
						iconCls:'icon-save',
							handler:function(){
								alert('保存');
							},
							text:'保存'
						
					}],
					
				})
			})
		</script>
	</head>
	<body>
		<div id="dialog">
			
		</div>
	</body>
</html>
draggable: 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>拖动控件</title>
		<link rel="stylesheet" type="text/css" href="themes/default/easyui.css"/>
		<link rel="stylesheet" type="text/css" href="themes/icon.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$('#d1').draggable({
					handle:'#d2',
					onDrag:function(){
						$(this).css('background-color','green');
					},
					onStopDrag:function(){
						$(this).css('background-color','white');
					}
				})
				alert($('#d1').draggable('options'));
				
			})
		</script>
	</head>
	<body>
		<div id="d1" style="width: 200px;height: 200px;border: 1px solid red;">
			<div id="d2" style="width: 100px;height: 100px;background-color: orange;">
				
			</div>	
		</div>
		
	</body>
</html>
messager: 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="themes/default/easyui.css"/>
		<link rel="stylesheet" type="text/css" href="themes/icon.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$.messager.show({
					title:'我的消息',
					msg:'消息将在5秒后关闭。',
					timeout:5000,
					showType:'slide',
					showspeed:3000

				})
				$.messager.alert('消息提醒','您有一条消息','warning')
			})
		</script>
	</head>
	<body>
	</body>
</html>
panel: 
DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="themes/default/easyui.css"/>
		<link rel="stylesheet" type="text/css" href="themes/icon.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$('#panel').panel({					
					title:'面板标题',
					width:300,
					height:200,					
					top:100,
					style:{
						position:'relative',
						margin:'0px auto'
					},
					iconCls:'icon-save',
					minimizable:true,
					maximizable:true,
					collapsible:true,
					closable:true,
					border:false,
					content:'hello easyUI',
					href:'file.txt',
					tools:[{
						iconCls:'icon-add',
						handler:function(){
							alert('点击了添加');
						}
					},{
						iconCls:'icon-clear',
						handler:function(){
							alert('点击了删除');
						}
					}],					
					extractor:function(data){
						var list=data.split(',');
						var str='';
						$(list).each(function(index){
							str+=list[index];
						})
						return str;
					}
				})
			})
		</script>
	</head>
	<body>
		<div id="panel">
			面板区域显示的内容
		</div>
	</body>
</html>
progressbar: 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="themes/default/easyui.css"/>
		<link rel="stylesheet" type="text/css" href="themes/icon.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$('#pro').progressbar({
					width:400,
					height:30,
					value:0,
					text:'进度{value}%',
					onChange:function(n,o){
						if(n==100){
							alert("加载完毕");
						}
					}
				})
				setInterval(function(){
					$("#pro").progressbar('setValue',$("#pro").progressbar('getValue')+1);
				},100)
			})
		</script>
	</head>
	<body>
		<div id="pro"style="margin: 0px auto;">
			
		</div>
	</body>
</html>
searchbox: 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="themes/default/easyui.css"/>
		<link rel="stylesheet" type="text/css" href="themes/icon.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$('input').searchbox({
					width:400,
					height:30,
					prompt:'请输入搜索内容',
					searcher:function(){
						alert($(this).searchbox('getValue'));
					},
					menu:'#mm'
				})
			})
		</script>
	</head>
	<body>
		<input type="text" name="" id="" value="" />
		<div id="mm" style="width:150px">
			<div data-options="name:'item1'">Search Item1</div>
			<div data-options="name:'item2',selected:true">Search Item2</div>
			<div data-options="name:'item3'">Search Item3</div>
		</div>



	</body>
</html>
switchbutton: 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="themes/default/easyui.css"/>
		<link rel="stylesheet" type="text/css" href="themes/icon.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$('#a1').switchbutton({
					width:100,
					height:20
				})
				
			})
		</script>
	</head>
	<body>
		<div id="a1">
			
		</div>
	</body>
</html>
tabs: 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="themes/default/easyui.css"/>
		<link rel="stylesheet" type="text/css" href="themes/icon.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$('#tabs').tabs({
					width:500,
					height:200,
					tools:[{
						iconCls:'icon-add',
						handler:function(){
							$("#tab").tabs('update',{
								tab:$("#tab").tabs('getTab','tab2'),
								options:{
									title:'newtab1',
									content:'新内容'
								}
							})
						}
					},{
						iconCls:'icon-save',
						handler:function(){
							alert('保存')
						}
					}]
				})
				$('#tabs').tabs('add',{
					 title:'New Tab',    
				    content:'Tab Body',    
				    closable:false,    
				    
				})
				$('#tabs').tabs('add',{
					 title:'New Tab',    
				    content:'Tab Body',    
				    closable:true,    
				     
				})

			})
		</script>
	</head>
	<body>
		<div id="tabs">
			
		</div>
	</body>
</html>
tooltip: 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="themes/default/easyui.css"/>
		<link rel="stylesheet" type="text/css" href="themes/icon.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$('#a1').tooltip({
					content:'今天是星期三'
				})
			})
		</script>
	</head>
	<body>
		<a id="a1">提示框</a>
	</body>
</html>
validatebox: 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>验证框</title>
		<link rel="stylesheet" type="text/css" href="themes/default/easyui.css"/>
		<link rel="stylesheet" type="text/css" href="themes/icon.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="locale/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
				$.extend($.fn.validatebox.defaults.rules, {    
				    minLength: {    
				        validator: function(value, param){    
				            return value.length >= param[0];    
				        },    
				        message: 'Please enter at least {0} characters.'   
				    }    
				});  


			$(function(){
				$("#email").validatebox({
					required:true,
					//validType:['email','length[0,20]']
					validType:'minLength[10]'	

				})	
				
			})
		</script>
	</head>
	<body>
		用户名（邮箱）<input id="email" />
	</body>
</html>
window: 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="themes/default/easyui.css"/>
		<link rel="stylesheet" type="text/css" href="themes/icon.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$('#d1').window({
					title:'这是一个窗口',
					width:300,
					height:200,
					modal:false,
				})
			})
		</script>
	</head>
	<body>
		<div id="d1">
			
		</div>
	</body>
</html>

Dawn_WL
关注
EasyUI 整理
lys的博客
09-02 976
EasyUI ：基于jQuery的UI插件集合 一、在页面中使用easyui必须引入相应的js和css样式文件，文件的引入顺序如下:创建一个简单的对话框（Dialog）: 1、javaScript方式创建：2、直接在html代码中声明：二、Easyui还提供了easyloader加载的方式来加载样式表和脚本文件 在以下情况下推荐使用easyloader: 1)、一次性导入 easyui 的核
EasyUI体系整理
weixin_43921225的博客
12-15 442
文章目录EasyUI_Day1一、EasyUI简介二、使用EasyUI开发一个按钮1、在页面引入EasyUI的功能文件2、按钮插件的开发3、使用js编程开发4、EasyUI插件的定制和使用规则【重点】4.1 插件定制方式4.2 插件的使用规则三、插件分类讲解1、Linkbutton按钮插件(a标签)2、Menu菜单插件(嵌套div)3、Menubutton菜单按钮插件(嵌套div)4、Splitb...
jQuery Easyui框架整理
yzl127的博客
12-09 463
jQuery Easyui框架: 主要组件 Layout(布局) 1.panel(面板):承载其它内容的容器,提供了折叠、关闭、最大化、最小化和自定义行为,很容易嵌入到web页面的任何位置。  注意:每个面板一定要设置title属性    --class="easyui-panel"  2.tabs(选项卡):选项卡显示一批面板。但在同一个时间只会显示一个面板。    --clas
UI学习笔记---EasyUI panel插件使用---03
添柴程序猿的专栏
03-30 3825
UI学习笔记---EasyUI panel插件使用---03 UI学习笔记---EasyUI panel插件使用---03 1.panel简单小例子 ------------------- 2.可以自己做一些小例子放到自己的icon.css中,加载进来用 3.用的时候先加载进来5个常用的js和css文件 4.一些panel的属性可以查看api       1.html
项目中使用easyui框架，常见的用法（慢慢整理）
u014575933的博客
01-24 1892
1.下拉框加载数据 $("#uom").combobox({ data : result,//获取要显示的json数据 valueField: 'baseUOM', textField: 'baseUOM', onLoadSuccess:function(){//默认选中某个值显示 $("#uom").combobox('select','EA'); } });
easyUI个人整理
11-14
easyUI，个人整合处理后，编写的使用方法及easyUI的源码
EasyUI超实用的DEMO案例整理
08-13
这个"EasyUI超实用的DEMO案例整理"集合了官方源码Quicknine中的精华部分，旨在帮助前端开发者快速理解和应用EasyUI。 1. EasyUI 基本概念： EasyUI 提供了一系列组件，如布局（layout）、表格（datagrid）、对话框...
easyui整理资料
Thinking
12-28 425
http://www.cnblogs.com/wuhuacong/p/3872890.html
jquery_easyui_整理
03-29
《jQuery EasyUI 整理》 jQuery EasyUI 是一个基于 jQuery 的前端开发框架，它提供了一套丰富的 UI 组件，让开发者能够快速构建出功能完备、界面友好的 Web 应用程序。EasyUI 的核心思想是简化 HTML 页面的编写，...
easyUI相关资料整理
dongchen920928的专栏
05-31 340
//easyUI初始化select $('#gsUserId').combobox({   url: '${root}/gsUser/getNickName',   valueField:'id',   textField:'nickName' });
jquery easyui dialog 第二次加载不初始化_EasyUI外观太落伍？此仅为“表”，以实例看它强大的数据“芯”...
weixin_42315824的博客
01-27 330
EasyUI框架最被人诟病的就是它的UI界面了。前两天在我发的一篇文章《都说EasyUI框架的界面不够漂亮？稍有一点CSS知识就可以改造它》中就有网友留言说：“有现成好看的，为什么还要优化它？”这句话问的非常好，为什么？就是因为它有着非常强大的数据交互能力，尤其适合企业级的项目开发包括网站后台管理。不信么？那就以最基础的panel面板组件为例，来看看它的数据“芯”究竟强在哪里？如要测试本实例，请直...
【Web】jQuery EasyUI 1.3.6版panel面板加载bug
u014650759的专栏
06-26 940
最近接手一个项目，由于是个老系统，没有用bootstrap实现布局，采用的jQuery EasyUI。在实际开发中发现了panel面板的一个大bug，出现跟API文档描述不一致的情况。 按照1.3.6版本的API中文文档，使用panel： $('#p').panel({ href:'content_url.php', onLoad:function()...
jQuery Easy UI Panel(面板)组件
曹海成的专栏
09-01 5844
panel(面板)组件,跟前面的组件用法几乎都差不多，也是从设置一些面板属性、操作面板触发的事件、我们可针对面板对象的操作方法这三个点去学习。 后面有一些组件要依赖于这个组件。 还有一点跟前面不同的就是面板内容可以请求远程数据。 示例： jQuery Easy UI $(function () { //属性列表 $('#box').panel({ id : 'b
EasyUI panel 插件使用
wuyujin1997的博客
04-27 726
EasyUI 插件的两种使用方法 list HTML元素的属性名值对 EasyUI插件的每个属性对直接写为HTML标签的属性对。不推荐 EasyUI插件的所有属性对都写在HTML标签的data-options属性的字符串值中。 先写HTML标签。再用JS对DOM元素进行操作。 HTML <!DOCTYPE html> <html lang="en"> <he...
easyUI学习记录（二）- Parser&&Panel介绍
开心程序猿
09-19 1147
2014年9月18日   1.       Parser（解析器） jquery.parser.js auto:true ----自动解析（解析成想要的样式） onComplete:function(context){},解析完之后触发； 但是为什么在页面的class=””中写上easyui-就能渲染easyUI的样式呢？ 其功劳在于方法：$.parser.parse   2. 
C#的WinForm开发框架源码 权限管理系统源码数据库 SQL2008源码类型 WinForm
11-16
WinForm开发框架源码 权限管理系统源码 功能描述：01.登录界面 02.系统配置 03.申请账户 04.即时通讯 05.发送消息 06.广播消息 07.软件频道 - 内部通讯录 08.软件频道 - 名片管理 09.软件频道 - 代码生成器 10.系统后台管理 - 用户审核 11.系统后台管理 - 用户管理 12.系统后台管理 - 组织机构管理 13.系统后台管理 - 角色管理 14.系统后台管理 - 员工管理 15.系统后台管理 - 岗位管理 16.系统后台管理 - 用户权限设置 17.系统后台管理 - 角色权限设置 18.系统后台管理 - 组织机构权限设置 19.系统后台管理 - 菜单权限项设置 20.系统后台管理 - 选项管理 21.系统后台管理 - 序号（流水号）管理 22.系统后台管理 - 系统日志 - 按用户访问情况 23.系统后台管理 - 系统日志 - 按用户查询 24.系统后台管理 - 系统日志 - 按菜单查询 25.系统后台管理 - 系统日志 - 按日期查询 26.系统后台管理 - 系统日志 - 系统异常情况记
超级常用的甘特图-项目管理.xlsx
11-16
超级常用的甘特图-项目管理.xlsx
【MRFO栅格地图】蝠鲼觅食算法MRFO栅格地图路径规划（目标函数：最短距离）【含Matlab源码 9168期】.mp4
11-16
Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
.f2812.acid
最新发布
11-16
.f2812.acid
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值