EasyUI学习笔记 -- day01 基础

最新推荐文章于 2022-04-05 21:22:44 发布
最新推荐文章于 2022-04-05 21:22:44 发布
阅读量1.7k 收藏 3
点赞数
分类专栏： HTML 文章标签： easyui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wingzhezhe/article/details/53239171
版权

一：创建Web项目，导入easyUI的js


二：实现功能

1.实现可拖拽的div

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<!-- 导入js的主文件 -->
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
	
	<!-- 导入easyUI的主文件 -->
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.easyui.min.js"></script>
	
	<!-- 导入easyUI的样式文件 -->
	<link rel="stylesheet" href="${pageContext.request.contextPath }/js/themes/default/easyui.css">
	
	<!-- 导入easyUI的图标文件 -->
	<link rel="stylesheet" herf="${pageContext.request.contextPath }/js/themes/icon.css">


<title>Insert title here</title>
</head>
<style type="text/css">
	div{
		border:3px solid #abcdef;
		background:red;
		height:300px;
		width:300px;
	}
</style>
<body>

	<!-- jquery的easyUI实现可拖拽的div -->
	<div id="div1" class="easyui-draggable"></div><!-- 其中的class属性中的easyui是固定的，draggable是一个组件的名称 -->
	
</body>
</html>

2.实现动态进度条
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<!-- 导入js的主文件 -->
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
	
	<!-- 导入easyUI的主文件 -->
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.easyui.min.js"></script>
	
	<!-- 导入easyUI的样式文件 -->
	<link rel="stylesheet" href="${pageContext.request.contextPath }/js/themes/default/easyui.css">
	
	<!-- 导入easyUI的图标文件 -->
	<link rel="stylesheet" herf="${pageContext.request.contextPath }/js/themes/icon.css">

	<script type="text/javascript">
		/**
		创建easyui页面组件有两种方式：
		1.通过页面标签的方式创建
			<div id="p" class="easyui-progressbar" data-options="value:60" style="width:40px;"></div>
		
		2.通过页面标签+js的方式创建 -- 可以跟后台进行交互，使用动态数据
		*/
		$().ready(function(){ //页面加载完成时，执行的function
			$("#progre1").progressbar({
				value:50
			})
			
		})
		
		$().ready(function(){
			load();
		})
		
		var i = 0;
		function load(){
			$("#progre2").progressbar({
				value:i++	
			})
			
			window.setTimeout(function(){ //给页面设置定时任务，100秒后执行方法
				load();
			},100)
		}
	
	</script>

<title>Insert title here</title>
</head>
<body>

	<!-- jquery的easyUI实现进度条的div -->
	<div id="progre1" style="width:400px;"></div>
	<hr>
	<div id="progre2" style="width:400px;"></div>
	
</body>
</html>
3.实现菜单选项

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<!-- 导入js的主文件 -->
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
	
	<!-- 导入easyUI的主文件 -->
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.easyui.min.js"></script>
	
	<!-- 导入easyUI的样式文件 -->
	<link rel="stylesheet" href="${pageContext.request.contextPath }/js/themes/default/easyui.css">
	
	<!-- 导入easyUI的图标文件 -->
	<link rel="stylesheet" herf="${pageContext.request.contextPath }/js/themes/icon.css">
	
	<script type="text/javascript">
		$(function(){ //进入页面执行的方法
			$("#easyui_menu").menu('show',{
				left:200,
				top:100
			})
		})
	</script>


<title>Insert title here</title>
</head>
<body>

	<!-- jquery的easyUI实现菜单 -->
	<div id="easyui_menu" style="width:200px" class="easyui-menu">
		<div data-options="iconCls:'icon-add'">新建文件夹</div><!-- data-options属性是给当前的菜单添加图标 -->
		<div class="menu-sep"></div><!-- 此div是添加分割线 -->
		<div>排列图标</div>
		<div class="menu-sep"></div><!-- 此div是添加分割线 -->
		<div>创建快捷方式</div>
		<div class="menu-sep"></div><!-- 此div是添加分割线 -->
		<div>剪切</div>
		<div data-options="iconCls:'icon-no'">删除</div>
		<div>复制</div>
		<div class="menu-sep"></div><!-- 此div是添加分割线 -->
		<div>粘贴</div>
		<div class="menu-sep"></div><!-- 此div是添加分割线 -->
		<div>打开方式
			<div style="width:200px">
				<div>迅雷看看</div>
				<div>暴风影音</div>
				<div>QQ影音</div>
				<div>快播</div>
			</div>
		</div>
	</div>
	
</body>
</html>

4.实现按钮
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<!-- 导入js的主文件 -->
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
	
	<!-- 导入easyUI的主文件 -->
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.easyui.min.js"></script>
	
	<!-- 导入easyUI的样式文件 -->
	<link rel="stylesheet" href="${pageContext.request.contextPath }/js/themes/default/easyui.css">
	
	<!-- 导入easyUI的图标文件 -->
	<link rel="stylesheet" herf="${pageContext.request.contextPath }/js/themes/icon.css">


<title>Insert title here</title>
</head>
<body>

	<!-- jquery的easyUI实现按钮 -->
	<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>
	<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加</a>
	<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除</a>
	<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">修改</a>
	
</body>
</html>
5.实现弹出窗口

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<!-- 导入js的主文件 -->
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
	
	<!-- 导入easyUI的主文件 -->
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.easyui.min.js"></script>
	
	<!-- 导入easyUI的样式文件 -->
	<link rel="stylesheet" href="${pageContext.request.contextPath }/js/themes/default/easyui.css">
	
	<!-- 导入easyUI的图标文件 -->
	<link rel="stylesheet" herf="${pageContext.request.contextPath }/js/themes/icon.css">
	
	<!-- 引入国际化文件 -->
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/locale/easyui-lang-zh_CN.js"></script>

	<script type="text/javascript">
		$(function(){
			$("#btn").bind("click",function(){	//给按钮绑定点击事件
				$("#win").css("display","block");
				$("#win").window({
					height:400,
					width:400,
					title:"添加用户",
					modal:true 	//弹出框后使背景虚化	
				})
			})
		})
	</script>
	<style type="text/css">
		#from1 div{
			padding:16px
		}
	</style>
<title>Insert title here</title>
</head>
<body>
	<div id="win" style="display:none">
		<form id="from1" method="post" >
			<div>
				<label for="name">用户名：</label>
				<input class="easyui-validatebox" type="text" name="name" />
			</div>
			<div>
				<label for="email">邮 箱：</label>
				<input class="easyui-validatebox" type="text" name="email" />
			</div>
			<div>
				<label for="date">生  日</label>
				<input class="easyui-datetimebox" name="birthday" value="3/4/2016 2:3" />
			</div>
			
			<br>
			<br>
			   
			<a id="btn1" href="#" class="easyui-linkbutton" >确定</a>
			<a id="btn1" href="#" class="easyui-linkbutton">取消</a>
		</form>
	</div>

	<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加用户</a>
</body>
</html>

6.实现退出系统弹框和右下角广告

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<!-- 导入js的主文件 -->
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
	
	<!-- 导入easyUI的主文件 -->
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.easyui.min.js"></script>
	
	<!-- 导入easyUI的样式文件 -->
	<link rel="stylesheet" href="${pageContext.request.contextPath }/js/themes/default/easyui.css">
	
	<!-- 导入easyUI的图标文件 -->
	<link rel="stylesheet" herf="${pageContext.request.contextPath }/js/themes/icon.css">
	
	<!-- 引入国际化文件 -->
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/locale/easyui-lang-zh_CN.js"></script>

	<script type="text/javascript">
		$(function(){
			$("#btn2").click(function(){
				$.messager.confirm('确认','您确定退出吗？',function(r){
					if(r){
						alert("确认退出");
					}
				});
			})
			
			$.messager.show({
				title:'您有新的消息',
				msg:'消息在5秒后关闭',
				timeout:5000,
				height:200,
				width:300,
				showType:'slide'
			});
			
		})
	</script>

<title>Insert title here</title>
</head>
<body>

	<!-- 实现退出系统 -->
	<div style="float:right;">
		<a id="btn2" href="#" class="easyui-linkbutton">退出系统</a>
	</div>
	
</body>
</html>





DJTUDaker
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
easyui-lang-zh_CN.js，easyui汉化包
08-09
easyui插件的支持日期汉化，分页汉化，form表单提示汉化。
easyui笔记
lcfqzd的博客
09-20 225
1、入门 1.1. 简介 封装大量的jQuery插件(简化ajax，jquery，css样式，布局) 学习内容 插件实现: ① HTML标签+插件的class样式。 <a href="#" class="easyui-linkbutton">我是讲文明</a> ② HTML标签+基于编程的插件实现 <a href='#' id="btn">我是洪世鹏</a> js代码： $("#btn").link
【EasyUI】EasyUI学习笔记
热门推荐
寒泉
09-27 2万+
一.EasyUI 简介 1.EasyUI 是前端框架. 2.前端框架 2.1 封装大量css 2.2 封装大量JS 3.使用前端框架 3.1 给标签设置easyui提供的 class 属性即可，id属性可以随便起名。 4.easyui 中需要注意的地方 4.1 data-options 属性定义easyui 属性的. 4.2 如果easyui 提供的属性和html 标签属性相同,可以把这个属性 不...
Easyui初步学习
月亮投递员的博客
06-20 5031
Easyui初步学习前言Easyui的初步学习1、easyui概念2、easyui的不足3、学习easyui的目的和好处注意要点思维导图总结 前言 今天博主和大家分享的知识点呢，是一个easyui的前端框架，接下来让我们一起来了解一下这个前端框架吧~ Easyui的初步学习 1、easyui概念 easyui是一款基于jQuery的前端框架，可以使用其中的组件进行布局以及用来做后台的管理界面。 2、easyui的不足 相比较于近段时间的发展历史中，ui框架中有三种比较流行。分别是easyui框架、boot
EasyUI学习笔记(一)——EasyUI入门
u012369153的专栏
12-05 4572
初识EasyUIEasyUI
Easyui学习整理笔记
weixin_30467087的博客
02-23 116
目录 (1) 表格双击事件 (2) treegrid传参更新 (3) 设置列表checkbox单选 (4) Easyui实现单行选择和取消选择 @ 对工作中遇到的easyui做一下笔记，不定时更新 (1) 表格双击事件 datagrid和treegrid都适用，例子：...
easyUI-springmvc-tree-demo
11-29
在HTML中，我们可以定义一个div作为树的容器，并设置相应的class为"easyui-tree"。然后在JavaScript中，通过$(selector).tree()方法初始化并配置Tree组件。 二、SpringMVC支持 SpringMVC作为Java Web开发中的主流...
jquery-easyui-EDT-1.5.2-build1
05-08
jquery-easyui-EDT-1.5.2-build1 jquery-easyui-EDT-1.5.2-build1
jquery-easyui-EDT-1.5.5.rar
05-31
而“jquery-easyui-EDT-1.5.5.rar”则是一个包含jQuery EasyUI扩展、PC及移动设备演示以及插件的压缩包，旨在为开发者提供全方位的开发支持。 首先，我们要理解jQuery EasyUI的核心概念。EasyUI是由一系列预先定义...
JavaWeb-easyUI-main-page
03-26
标题"JavaWeb-easyUI-main-page"暗示了我们正在讨论的是一个使用EasyUI来创建的JavaWeb项目的主页面，特别关注的是页面左侧的结构树视图。 EasyUI的核心在于它的组件库，这些组件包括数据网格、表单、对话框、菜单...
最全面的javascript思维导图
07-25
最全面的javascript思维导图最全面的javascript思维导图最全面的javascript思维导图
easyui学习笔记（十三）源码
04-11
easyui学习笔记（十三）源码 大家下载看看吧
SSH+easyUI项目
03-25
一个基于SSH和easyUI开发的管理系统，把easyUI的各种插件，无缝融合到项目当中去，有数据库文件
jquery easyui 最新教学视频下载地址
04-05
jquery easyui 最新教学视频下载地址,分虽然要10分,但是绝对值得,下载完成的视频在30集左右,全部是高清的,如果您下载了,麻烦在评论的时候如实评论,如果觉得好,请给好评,让大家知道这个资源到底能行不. 如果觉得不好,请在评论时注明为什么不好,并且让大家不要来下载.
EasyUI学习笔记
11-26
一、EasyUI的目录结构 1.demo：包含各种插件的案例(不是必须的) 2.locale：包含语言支持的JS文件(是必须的) 3.plugins：各种JS插件包(必须的) 4.src：JS的源码(不是必须的) 5.themes：各种主题的图片资源，样式文件(必须的) 6.jquery.easyui.min.js：easyui的主要js文件(必须的) 7.jquery.min.js：是jquery2.0版本(在上课过程中，会使用1.x版本，因为2.0对低版本浏览器兼容性不好)(jquery是必须的，本课程使用1.x)
初识Easyui
m0_61148761的博客
04-05 605
什么是Easyui？优点是什么？搭建框架的几个步骤：目录结构引入必要的js和css样式文件 路径问题基于jquery的页面组件集合，提供了丰富的组件的集合。1）easyui是个完美支持HTML5网页的完整框架 2）easyui节省网页开发的时间和规模 3）easyui很简单但功能强大1）打开eclipse，创建一个web工程。注意：为了防止出现乱码问题，建议先检查一下eclipse的工作空间的编码问题， window -> preferences -> Genernal -> workspace；设置初始编
EasyUI学习笔记记录
dianyanxia的博客
10-16 192
EasyUI 是一个基于JQuery的框架,集成了各种用户界面插件. 该框架提供了创建网友所需要的一切东西,轻松建立站点. 在使用easyUI之前要先声明UI控件. 1.直接在HTML声明控件. &lt;div class = "easyui-dialog" style="width: 400px; height:200px" data-options="title:'My D...
EasyUI笔记总结
qq_31073169的博客
11-15 284
写在开头：本文是EasyUI的学习笔记，方便自己查阅要是恰好能帮到别人那就是小弟的荣幸了。写的不好请大家多多指教。 EasyUI的使用需要导入jqueary.easyui.min.js包这个包包含了easyUI的所有的插件功能。 1.layout是一个页面布局 2.according折叠面板
【干货】jsMind思维导图整合Easyui的右键菜单
a406502972的专栏
07-29 653
&#13; 原材料：&#13; 1、web版本的JavaScript思维导图（BSD开源协议）【戳这里去官网】。&#13; 2、easyui最新版【戳这里去官网】。&#13;  &#13; 这里是原本的jsMind：&#13; &#13; 在线测试地址 ：http://hizzgdev.github.io/jsmind/example/1_basic.html&#13; 为了...
easyui easyui-combobox 边框颜色
最新发布
04-01
可以通过设置CSS样式来改变easyui-combobox的边框颜色。例如： ``` .combobox-border{ border-color: red !important; } <input id="cc" class="easyui-combobox" data-options="..."> ``` 在CSS中定义一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值