惯例广告一发，对于初学真，真的很有用www.java1234.com，去试试吧！
一头扎进EasyUI第1讲
、加载库文件和样式
<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/themes/icon.css">
<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
库文件和样式可以从官方网站下载 、基本面板组件
<div id="p" class="easyui-panel" title="基本面板组件" style="width:500px;height:200px;padding:10px;">
</div>
面板：easyui-panel 、打开关闭按钮
<a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('open')">打开</a>
<a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('close')">关闭</a>
按钮：easyui-linkbutton
jQuery选择器：$('#p')
panel的方法：panel('open')、panel('close') 、四个按钮
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#p').panel('open')">打开</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#p').panel('close')">关闭</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#p').panel('expand',true)">展开</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#p').panel('collapse',true)">折叠</a>
不返回值：javascript:void() 、面板上的四个按钮
<div id="p" class="easyui-panel" title="面板工具" style="width:500px;height:200px;padding:10px;"
data-options="iconCls:'icon-save',collapsible:true,minimizable:true,maximizable:true,closable:true">
data-options属性值集合
iconCls:'icon-save',保存图标 、定制工具
<div class="easyui-panel" title="定制面板工具" style="width:500px;height:200px;padding:10px;"
data-options="iconCls:'icon-save',closable:true,tools:'#tt'">
</div>
<div id="tt">
<a href="javascript:void(0)" class="icon-add" onclick="javascript:alert('添加')"></a>
<a href="javascript:void(0)" class="icon-edit" onclick="javascript:alert('编辑')"></a>
<a href="javascript:void(0)" class="icon-cut" onclick="javascript:alert('剪切')"></a>
<a href="javascript:void(0)" class="icon-help" onclick="javascript:alert('帮助')"></a>
</div> 、加载内容
<div id="p" class="easyui-panel" title="加载面板内容" style="width:500px;height:200px;padding:10px;"
data-options="
tools:[{
iconCls:'icon-reload',
handler:function(){
$('#p').panel('refresh', '../panel/_content.html');
}
}]
">
</div>
刷新图标：iconCls:'icon-reload',
文件路径： '../panel/_content.html'
最后一项不要加,，浏览器不兼容
handler:function(),把一个方法作为属性值 、嵌套面板
<div class="easyui-panel" title="嵌套面板" style="width:500px;height:200px;padding:10px;">
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'west',split:true" style="width:100px;padding:10px">
左边内容
</div>
<div data-options="region:'center'" style="padding:10px">
右边内容
</div>
</div>
</div>
region:'center'必须存在
easyui-layout：布局
fit:true：自适应屏幕
split:true：左右伸缩
一头扎进EasyUI第2讲
、基本消息组件
<div style="margin:10px 0;">
<a href="#" class="easyui-linkbutton" onclick="show()">普通消息显示</a>
<a href="#" class="easyui-linkbutton" onclick="slide()">滑动消息显示</a>
<a href="#" class="easyui-linkbutton" onclick="fade()">淡出消息显示</a>
<a href="#" class="easyui-linkbutton" onclick="progress()">进度条显示</a>
</div> <script type="text/javascript">
function show(){
$.messager.show({
title:'我的标题',
msg:'消息4秒后自动关闭.',
showType:'show'
});
}
function slide(){
$.messager.show({
title:'我的标题',
msg:'消息5秒后自动关闭.',
timeout:,
showType:'slide'
});
}
function fade(){
$.messager.show({
title:'我的标题',
msg:'消息不会自动关闭.',
timeout:,
showType:'fade'
});
}
function progress(){
var win = $.messager.progress({
title:'请稍等...',
msg:'加载数据中...'
});
setTimeout(function(){
$.messager.progress('close');
},)
}
title：标题
msg：内容
showType：方法
timeout：时间
$.messager.progress：进度条
messager.show方法 在屏幕的右下方显示一个消息窗口 、提醒消息组件
<div style="margin:10px 0;">
<a href="#" class="easyui-linkbutton" onclick="alert1()">提醒消息</a>
<a href="#" class="easyui-linkbutton" onclick="alert2()">错误消息</a>
<a href="#" class="easyui-linkbutton" onclick="alert3()">信息消息</a>
<a href="#" class="easyui-linkbutton" onclick="alert4()">问题消息</a>
<a href="#" class="easyui-linkbutton" onclick="alert5()">警告消息</a>
</div>
<script>
function alert1(){
$.messager.alert('我的标题','这是一个消息!');
}
function alert2(){
$.messager.alert('我的标题','这是一个错误消息!','error');
}
function alert3(){
$.messager.alert('我的标题','这是一个信息消息!','info');
}
function alert4(){
$.messager.alert('我的标题','这是一个问题消息!','question');
}
function alert5(){
$.messager.alert('我的标题','这是一个警告消息!','warning');
}
</script>
messager.alert方法 显示一个带进度条信息的窗口。
'error''info''question''warning'图标
中文本地化脚本：<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script> 、交互式消息组件
<div style="margin:10px 0;">
<a href="#" class="easyui-linkbutton" onclick="confirm1();">确认消息框</a>
<a href="#" class="easyui-linkbutton" onclick="prompt1()">提示消息框</a>
</div>
<script>
function confirm1(){
$.messager.confirm('我的标题', '确认吗?', function(r){
if (r){
alert('确认: '+r);
}
});
}
function prompt1(){
$.messager.prompt('我的标题', '请输些东西', function(r){
if (r){
alert('你输入的是: '+r);
}
});
}
</script>
messager.confirm方法 显示一个带有确认和取消按钮的确认信息窗口。
messager.prompt方法 显示一个带有确认和取消的输入信息窗口。 、消息框位置
<div style="margin:10px 0;">
<p>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="topLeft();">左上角</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="topCenter()">顶部左右居中</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="topRight()">右上角</a>
</p>
<p>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="centerLeft()">左边上下居中</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="center()">上下左右居中</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="centerRight()">右边上下居中</a>
</p>
<p>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="bottomLeft()">左下角</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="bottomCenter()">底部左右居中</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="bottomRight()">右下角</a>
</p>
</div>
<script>
function topLeft(){
$.messager.show({
title:'我的标题',
msg:'左上角',
showType:'show',
style:{
right:'',
left:,
top:document.body.scrollTop+document.documentElement.scrollTop,
bottom:''
}
});
}
function topCenter(){
$.messager.show({
title:'我的标题',
msg:'顶部左右居中',
showType:'slide',
style:{
right:'',
top:document.body.scrollTop+document.documentElement.scrollTop,
bottom:''
}
});
}
function topRight(){
$.messager.show({
title:'我的标题',
msg:'右上角',
showType:'show',
style:{
left:'',
right:,
top:document.body.scrollTop+document.documentElement.scrollTop,
bottom:''
}
});
}
function centerLeft(){
$.messager.show({
title:'我的标题',
msg:'左边上下居中',
showType:'fade',
style:{
left:,
right:'',
bottom:''
}
});
}
function center(){
$.messager.show({
title:'我的标题',
msg:'上下左右居中',
showType:'fade',
style:{
right:'',
bottom:''
}
});
}
function centerRight(){
$.messager.show({
title:'我的标题',
msg:'右边上下居中',
showType:'fade',
style:{
left:'',
right:,
bottom:''
}
});
}
function bottomLeft(){
$.messager.show({
title:'我的标题',
msg:'左下角',
showType:'show',
style:{
left:,
right:'',
top:'',
bottom:-document.body.scrollTop-document.documentElement.scrollTop
}
});
}
function bottomCenter(){
$.messager.show({
title:'我的标题',
msg:'底部左右居中',
showType:'slide',
style:{
right:'',
top:'',
bottom:-document.body.scrollTop-document.documentElement.scrollTop
}
});
}
function bottomRight(){
$.messager.show({
title:'我的标题',
msg:'右下角',
showType:'show'
});
}
</script>
一头扎进EasyUI第3讲
、基本日期框组件
<input class="easyui-datebox"></input>
easyui-datebox：日期框 、日期格式化
<input class="easyui-datebox" data-options="formatter:myformatter,parser:myparser"></input>
<script type="text/javascript">
function myformatter(date){
var y = date.getFullYear();
var m = date.getMonth()+;
var d = date.getDate();
return y+'/'+(m<?(''+m):m)+'/'+(d<?(''+d):d);
}
function myparser(s){
if (!s) return new Date();
var ss = (s.split('/'));
var y = parseInt(ss[],);
var m = parseInt(ss[],);
var d = parseInt(ss[],);
if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
return new Date(y,m-,d);
} else {
return new Date();
}
}
</script>
formatter:一个格式化日期的函数
parser:一个解析日期的字符串 、日期框验证
<input class="easyui-datebox" required></input>
required必填选项 、日期框事件
<div style="margin:10px 0">
<span>选择的日期是: </span>
<span id="result"></span>
</div>
<script>
function onSelect(date){
$('#result').text(date.getFullYear()+'-'+(date.getMonth()+)+'-'+date.getDate());
}
</script>
日期框onSelect事件
一头扎进EasyUI第4讲
、基本日期时间框组件
<input class="easyui-datetimebox" required style="width:150px">
easyui-datetimebox:日期时间框 、初始化
<input class="easyui-datetimebox" value="2013-11-11 2:3:56" style="width:150px">
value:初始化值 、显示秒
<div style="margin:10px 0;">
<span>显示秒: </span>
<input type="checkbox" checked onchange="$('#dt').datetimebox({showSeconds:$(this).is(':checked')})">
</div>
<input id="dt" class="easyui-datetimebox" style="width:150px">
onchange复选框
showSeconds显示秒方法
$(this).is(':checked')是否为true
一头扎进EasyUI第5讲
、时间微调器组件
<input class="easyui-timespinner" style="width:80px;">
easyui-timespinner：时间微调器组件 、时间范围
<input class="easyui-timespinner" data-options="min:'08:30',max:'18:00'" style="width:80px;"></input>
min:'08:30',max:'18:00' 、设置
<div style="margin:10px 0;">
<a href="#" class="easyui-linkbutton" onclick="getValue()">获取值</a>
<a href="#" class="easyui-linkbutton" onclick="setValue()">设置值</a>
<a href="#" class="easyui-linkbutton" onclick="disable()">禁用</a>
<a href="#" class="easyui-linkbutton" onclick="enable()">启用</a>
</div>
<input id="dt" class="easyui-timespinner" style="width:80px;">
<script>
function getValue(){
var val = $('#dt').timespinner('getValue');
alert(val);
}
function setValue(){
$('#dt').timespinner('setValue', '09:45');
}
function disable(){
$('#dt').timespinner('disable');
}
function enable(){
$('#dt').timespinner('enable');
}
</script>