下面是基础的练习：
Base：基础的网页
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>我的第一个EasyUI应用</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入EasyUI的CSS文件 -->
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<!-- 引入EasyUI的JS文件 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
<!-- 采用的是静态的使用方式-->
<div
id="pp"
class="easyui-panel"
style="width:500px;height:150px;padding:10px;background:#fafafa;"
data-options="border:true,collapsible:false,maximizable:false, closable:false,fit:true"
>
<!-- iconCls="icon-ok"
collapsible="true"
maximizable="true"
closable="true" -->
这是第一个easyui案例。
</div>
<!--解释上述代码
div块标签
id属性表示为div标签取一个在web页面中唯一的名字，便于将来用jquery等技术定位，如$("#pp")
class属性引用第三方的样式文件，EasyUI的样式文件有这么一个规定：easyui-小写字母开头，后面接着使用UI组件的名字
style属性是控件div的样式，style书写一定是css代码，语法：key:value;key:value;key:value;
title属性为面板取名
iconCls属性图标
collapsible属性是否面板可折叠,true表示可折叠；false表示不可折叠
-->
<!-- 采用动态的方式来创建easyui
<div id="pp" style="padding:10px;background:#fafafa;" >
呵呵
</div>
<script type="text/javascript">
$(function(){
$("#pp").panel({
width:500,
height:150,
title: 'My Panel',
iconCls:'icon-ok',
collapsible:'true',
maximizable:'true',
closable:'true',
border:true
});
});
</script>
-->
</body>
</html>
Pagination分页控件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>01_Pagination.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入EasyUI的CSS文件 -->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<!-- 引入EasyUI的JS文件 -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
</head>
<body>
<!-- 用HTML标签创建UI控件的方式：静态方式
凡是使用easyUI特有的属性，需要在html标签中使用一个叫data-options的属性。
total表示总记录数
pageSize表示每页显示多少条记录
pageNumber表示当前页号
pageList表示可供选择的每页显示记录数
注意:pageSize的值是pageList值之一
NaN Not a Number
适合于属性值少的情况
-->
<div
id="pp1" style="width:1000px;background-color: #efefef"
class="easyui-pagination"
data-options="total:100,pageSize:5,pageNumber:1,pageList:[5,10],loading:false,buttons:[
{
iconCls:'icon-add',
handler:function(){alert('增加')}
}
,{
iconCls:'icon-remove',
handler:function(){alert('删除')}
}],
layout:['list',
'first',
'next',
'prev',
'last',
'refresh',
'manual',
'links']"
>
</div>
<hr/>
<!-- 用JS技术创建UI控件的方式：动态方式（相对较多） -->
<div id="pp2" style="width:1000px;background-color: #efefef" ></div>
<script type="text/javascript">
//当web页面加载时执行,用Jquery的语法
$(function(){
//用Jquery的语法定位<div标签>
//用EasyUI的语法，参数是一个JSON对象，属性名：属性值（number,boolean,"string",[array]）---属性
$("#pp2").pagination({
total:100,
pageSize:5,
pageNumber:1,
pageList:[5,10],
showPageList:true,
showRefresh:true,
});
//为pagination这个UI控件设置事件监听器，参数是一个JSON对象，事件名 ：无名函数------------------事件
$("#pp2").pagination({
onSelectPage:function(pageNumber, pageSize){
//pageNumber:当前页号，2
//pageSize: 每页显示记录数,10
alert(pageNumber+"#"+pageSize);
}
});
//调用pagination这个UI控件的方法---------------------------------------------------方法
//自动跳转到第三页
$("#pp2").pagination("select",3);
});
</script>
</body>
</html>SearchBox搜索框的控件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>02_SearchBox.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入EasyUI的CSS文件 -->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<!-- 引入EasyUI的JS文件 -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
</head>
<body>
<input id="ss"></input>
<div id="mm" style="width:200px">
<div>麻生希</div>
<div>桃谷绘里香</div>
<div>樱井莉亚</div>
</div>
<script type="text/javascript">
//web界面加载时触发
$(function(){
//将div菜单动态添加到input中
$("#ss").searchbox({
prompt:"你喜欢那个明星？",
menu:"#mm",
width:200
});
});
</script>
<script type="text/javascript">
$("#ss").searchbox({
//按搜索钮
searcher:function(value,name){
//获取用户输入的内容
//var value = $("#ss").searchbox("getValue");
//window.alert("value="+value);
//value:表示用户输入的值
//name:表示下拉框中的内容
window.alert(value+"#"+name);
}
});
</script>
</body>
</html>ProgressBar进度条的控件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>03B_ProgressBar.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入EasyUI的CSS文件 -->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<!-- 引入EasyUI的JS文件 -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
</head>
<body>
<div id="pp" style="width:1000px;height:100px"></div>
<script type="text/javascript">
$(function(){
//动态设置进度条的值为0
$("#pp").progressbar({
value:0
});
//计数器
var i = 0;
//JS版的定时器，每隔100毫秒执行一次，时间到，定时器停止，类似循环
var t = window.setInterval(function(){
i++;
//停止JS版的定时器，参数一：定时器的引用t
if(i<=100){
$("#pp").progressbar("setValue",i);
}else{
window.clearInterval(t);
alert("下载完毕！");
}
}, 100);
});
</script>
</body>
</html>Tooltip提示框的控件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>04_Tooltip.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入EasyUI的CSS文件 -->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<!-- 引入EasyUI的JS文件 -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
</head>
<body>
<a id="tt" href="javascript:void(0)" style="font-size:55px;text-decoration:none;">小巷子约定你</a>
<script type="text/javascript">
$(function(){
//动态设置Tooltip控件
$("#tt").tooltip({
position:'right',
content:"有机会的话一起去小巷子",
deltaX:50,
showDelay:200
});
//为Tooltip控件设置事件监听器
$("#tt").tooltip({
//当Tooltip控件隐藏时触发
onHide:function(){
//只执行一次
window.setTimeout(function(){
//休息3秒，再将其显示
$("#tt").tooltip("show");
},3000);
}
});
});
</script>
</body>
</html>Panel面板的控件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>05_Panel.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入EasyUI的CSS文件 -->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<!-- 引入EasyUI的JS文件 -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
</head>
<body>
<!-- fit表示填满整个父窗体 -->
<!-- href表示加载远程文件，将其结果包含进来
如：
href:'../index.jsp'
href:'/UserServlet',PrintWriter.write("大家好");
href:'/UserAction.action'
href:'/UserAction.springmvc'
-->
<div
id="pp"
class="easyui-panel"
title="我的面板"
style="width:540px;height:300px;padding:10px;background:#fafafa;"
data-options="iconCls:'icon-tip',top:500,left:500,fit:false,content:'你好',collapsible:true,closable:true,href:'../base.html'"
>
<p>内容1</p>
<p>内容2</p>
</div>
</body>
</html>Tabs选项卡的控件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>06A_Tabs.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入EasyUI的CSS文件 -->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<!-- 引入EasyUI的JS文件 -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
</head>
<body>
<!-- 选项卡容器 -->
<div id="tt" style="width:500px;height:250px;">
<!-- 选项卡一 -->
<div title="标题一" style="padding:20px;">
内容一
</div>
<div title="标题二" style="overflow:auto;padding:20px;">
内容二
</div>
<div title="标题三" style="padding:20px;">
内容三
</div>
</div>
<script type="text/javascript">
$(function(){
$("#tt").tabs({
plain:false,
fit:false,
border:true,
toolPosition:"left",
tabPosition:"top",
headerWidth:100,
selected:-1
});
//添加选项卡
//参数一： 方法名
//参数二：JSON对象，即{}
/* $("#tt").tabs("add",{
title:"标题四",
content:"内容四",
selected:false,
closable:true,
href:'../base.html'
}); */
});
</script>
</body>
</html>
Accordion分类的控件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>07_Accordion.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入EasyUI的CSS文件 -->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<!-- 引入EasyUI的JS文件 -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
</head>
<body>
<!-- 容器 -->
<div id="aa" class="easyui-accordion" style="width:300px;height:400px;"
data-options="border:true,animate:true,selected:-1">
<!-- 面板 -->
<div title="标题1" data-options="iconCls:'icon-save',collapsible:true" style="overflow:auto;padding:10px;">
内容1
</div>
<div title="标题2" data-options="iconCls:'icon-reload'" style="padding:10px;">
内容2
</div>
<div title="标题3" data-options="iconCls:'icon-help'">
内容3
</div>
</div>
<script type="text/javascript">
//对于网站的路径，有二类：
//一类：相对于本文件的路径，一切以本文出发，相对路径../base.html
//二类HTML：相对于webapps目录的路径，一切以tomcat/webapps出发，绝对路径/工程名/images/girl_1.jpg
//二类JSP：相对于webapps目录的路径，一切以tomcat/webapps出发，绝对路径${pageContext.request.contextPath}/images/girl_1.jpg
$(function(){
//动态添加标题4
$("#aa").accordion("add",{
title:"标题4",
selected:false,
iconCls:'icon-edit',
});
//为Accordion添加事件
$("#aa").accordion({
onSelect:function(title){
//个人建议：只要是字符串，做一个trim操作
var title = $.trim(title);
if(title=="标题4"){
//用户选中的面板
var four = $("#aa").accordion("getSelected");
//面板4动态添加内容
four.panel("refresh","/mjf.haihan.easyui01/photo.html");
}else if(title=="标题3"){
var three = $("#aa").accordion("getSelected");
three.panel("refresh","/mjf.haihan.easyui01/base.html");
}
}
});
});
</script>
</body>
</html>Layout布局的控件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>08C_Layout.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入EasyUI的CSS文件 -->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<!-- 引入EasyUI的JS文件 -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
</head>
<body>
<!-- 容器 -->
<div id="ll" class="easyui-layout" data-options="fit:true">
<!-- 北 -->
<div data-options="region:'north',title:'海涵标志',collapsible:false" style="height: 150px"></div>
<!-- 中 -->
<div data-options="region:'center',border:false">
<!-- 拆分 -->
<div class="easyui-layout" data-options="fit:true">
<!-- 西 -->
<div data-options="region:'west',title:'系统菜单',collapsible:false" style="width:200px">
<!-- 嵌入Accordion-->
<div id="aa" data-options="fit:true" class="easyui-accordion" style="width:300px;height:200px;">
<div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
content2
</div>
<div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
content2
</div>
<div title="Title3">
content3
</div>
</div>
</div>
<!-- 中 -->
<div data-options="region:'center',href:'../base.html',title:'系统内容',collapsible:false"></div>
</div>
</div>
</div>
</body>
</html>
还有的就是linkbutton按钮的控件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>09_LinkButton.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入EasyUI的CSS文件 -->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<!-- 引入EasyUI的JS文件 -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
</head>
<body>
<input type="button" value="传统按钮"/>
<hr/>
<a id="addBtn" href="javascript:void(0)" class="easyui-linkbutton">增加用户</a><p>
<a id="leteBtn" href="javascript:void(0)" class="easyui-linkbutton">删除用户</a><p>
<a id="updateBtn" href="javascript:void(0)" class="easyui-linkbutton">修改用户</a><p>
<a id="findBtn" href="javascript:void(0)" class="easyui-linkbutton">查询用户</a><p>
<hr/>
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
</div>
<script type="text/javascript">
//为上边四个a添加单击事件
$("a").click(function(){
//获取你点击按钮的内容
var tip = $(this).text().trim();
//判断
if(tip=="增加用户"){
//判断指定的选项卡是否存在，true已存在，false不存在
var flag = $("#tt").tabs("exists",tip);
//如果不存在
if(!flag){
//动态创建一个tabs
$("#tt").tabs("add",{
title:tip,
closable:true,
href:'../base.html'
});
}
}
});
</script>
</body>
</html>
今天根据easyui的学习文档进行了一些比较简单的开发，现在越来越觉得学习一个东西，学会查询api和学习文档还有官方的一些案例，是很不错的学习方式。
下面是基础的练习：
Base：基础的网页
Pagination分页控件：
SearchBox搜索框的控件：
ProgressBar进度条的控件：
Tooltip提示框的控件：
Panel面板的控件：
Tabs选项卡的控件：
Accordion分类的控件：
Layout布局的控件：
Form表单的控件：
Validatebox验证框的控件：
ComboBox下拉列表框的控件：
DateBox日期输入框的控件：
NumberSpinner数字微调的控件：
Slider滑动条的控件：
Window窗口的控件：
Dialog对话框窗口的控件：
Messager消息窗口的控件：
Datadrid表格的控件：
Tree树的控件：
扫一扫
455
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
