概述
一：创建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>最后
以上就是有魅力冬天为你收集整理的EasyUI学习笔记 -- day01 基础的全部内容，希望文章能够帮你解决EasyUI学习笔记 -- day01 基础所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复