- 浏览: 25025 次
- 性别:
- 来自: 成都
最新评论
1.1.1 代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>jQuery EasyUI</title> <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <script type="text/javascript" src="../jquery-1.4.2.min.js"></script> <script type="text/javascript" src="../jquery.easyui.min.js"></script> <script> $(function(){ $('#dd').dialog({ title:'对话框', collapsible:true, minimizable:true, maximizable:true, resizable:true, toolbar:[{ text:'Add', iconCls:'icon-add', handler:function(){ alert('add'); } },'-',{ text:'Save', iconCls:'icon-save', handler:function(){ alert('save'); } }], buttons:[{ text:'Ok', iconCls:'icon-ok', handler:function(){ alert('ok'); } },{ text:'Cancel', handler:function(){ $('#dd').dialog('close'); } }] }); }); function open1(){ $('#dd').dialog('open'); } function close1(){ $('#dd').dialog('close'); } </script> </head> <body> <h1>Dialog</h1> <div style="margin-bottom: 10px;"><a href="#" onclick="open1()">open1</a> <a href="#" onclick="close1()">close1</a></div> <div id="dd" icon="icon-save" style="padding: 5px; width: 400px; height: 200px;"> <p>dialog content.</p> <p>dialog content.</p> <p>dialog content.</p> <p>dialog content.</p> <p>dialog content.</p> <p>dialog content.</p> <p>dialog content.</p> <p>dialog content.</p> </div> </body> </html> 属性名 类型 描述 默认值 title 字符串 对话框的标题文本 New Dialog collapsible 布尔 定义是否显示可折叠按钮 false minimizable 布尔 定义是否显示最小化按钮 false maximizable 布尔 定义是否显示最大化按钮 false resizable 布尔 定义对话框是否可编辑大小 false toolbar 数组 对话框上的工具条,每个工具条包括: text, iconCls, disabled, handler etc. null buttons 数组 对话框底部的按钮,每个按钮包括: text, iconCls, handler etc. null
1 Dialog(对话框)
1.1 实例
1.2 参数
1.3 事件
Dialog的事件和窗口(Window)的事件相同。
1.4 方法
Dialog的函数方法和窗口(Window)的相同。
2 Messager(提示框)
2.1 实例
2.1.1 代码
<!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=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function show1(){
$.messager.show({
title:'My Title',
msg:'Message will be closed after 4 seconds.',
showType:'show'
});
}
function show2(){
$.messager.show({
title:'My Title',
msg:'Message will be closed after 5 seconds.',
timeout:5000,
showType:'slide'
});
}
function show3(){
$.messager.show({
title:'My Title',
msg:'Message never be closed.',
timeout:0,
showType:'fade'
});
}
function alert1(){
$.messager.alert('My Title','Here is a message!');
}
function alert2(){
$.messager.alert('My Title','Here is a error message!','error');
}
function alert3(){
$.messager.alert('My Title','Here is a info message!','info');
}
function alert4(){
$.messager.alert('My Title','Here is a question message!','question');
}
function alert5(){
$.messager.alert('My Title','Here is a warning message!','warning');
}
function confirm1(){
$.messager.confirm('My Title', 'Are you confirm this?', function(r){
if (r){
alert('confirmed:'+r);
location.href = 'http://www.google.com';
}
});
}
function prompt1(){
$.messager.prompt('My Title', 'Please type something', function(r){
if (r){
alert('you type:'+r);
}
});
}
$(function(){
$.messager.defaults={ok:"确定",cancel:"取消"};
});
</script>
</head>
<body>
<h1>Messager</h1>
<div><a href="javascript:void(0)" onclick="show1()">show</a> | <a
href="#" onclick="show2()">slide</a> | <a href="#" onclick="show3()">fade</a>
|</div>
<div><a href="#" onclick="alert1()">alert</a> | <a href="#"
onclick="alert2()">alert(error)</a> | <a href="#" onclick="alert3()">alert(info)</a>
| <a href="#" onclick="alert4()">alert(question)</a> | <a href="#"
onclick="alert5()">alert(warning)</a></div>
<div><a href="#" onclick="confirm1();">confirm</a></div>
<div><a href="#" onclick="prompt1()">prompt</a></div>
<div style="height: 600px;"></div>
</body>
</html>
2.2 方法
方法名 |
参数 |
描述 |
$.messager.show |
options |
在屏幕的右下角显示一个消息窗口。这些选项的参数可以是一下的一个配置对象: |
$.messager.alert |
title, msg, icon, fn |
显示一个警告窗口。参数如下: |
$.messager.confirm |
title, msg, fn |
显示一个含有确定和取消按钮的确认消息窗口。参数如下: |
$.messager.prompt |
title, msg, fn |
显示一个确定和取消按钮的信息提示窗口,提示用户输入一些文本。参数如下: |
|
|
|
2.3 扩展
可以通过$.messager.defaults方法自定义alert框的ok按钮和cancel按钮上显示的文字。
名字 |
类型 |
描述 |
默认值 |
|
|
ok |
字符串 |
Ok |
按钮上的文本 |
Ok |
|
cancel |
字符串 |
Cancel |
按钮上的文本 |
Cancel |
|
3 NumberBox(数字框)
3.1 实例
3.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function disable(){
$('#nn').numberbox('disable');
}
function enable(){
$('#nn').numberbox('enable');
}
$(function(){
$('#nn').numberbox({min:5.5,max:20,precision:2});
});
</script>
</head>
<body>
<h1>NumberBox</h1>
<p>The Box can only input number.</p>
<div style="margin-bottom: 10px;"><a href="#" onclick="disable()">disable</a>
<a href="#" onclick="enable()">enable</a></div>
<input id="nn" required="true" />
</body>
</html>
3.2 参数
选项名 |
类型 |
描述 |
默认值 |
|
min |
数字 |
文本框中可允许的最小值 |
null |
|
max |
数字 |
文本框中可允许的最大值 |
null |
|
precision |
数字 |
最高可精确到小数点后几位 |
0 |
|
4 ValidateBox(验证框)
4.1 实例
4.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<style type="text/css">
input,textarea {
width: 200px;
border: 1px solid #ccc;
padding: 2px;
}
</style>
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function valid(){
alert($('#dfe').validatebox('isValid'));
}
$(function(){
$.extend($.fn.validatebox.defaults.rules, {
minLength: {
validator: function(value, param){
return value.length >= param[0];
},
message: 'Please enter at least {0} characters.'
}
});
});
</script>
</head>
<body>
<h1>ValidateBox <a href="#0" onclick="valid();">EmailisValid</a></h1>
<div>
<table>
<tr>
<td>Name:</td>
<td><input class="easyui-validatebox" required="true"
validType="length[1,3]"></td>
</tr>
<tr>
<td>Email:</td>
<td><input id="dfe" class="easyui-validatebox"
invalidMessage="email格式错误" validType="email"></td>
</tr>
<tr>
<td>URL:</td>
<td><input class="easyui-validatebox" required="true"
validType="url"></td>
</tr>
<tr>
<td>testr:</td>
<td><input class="easyui-validatebox" validType="minLength[5]"
invalidMessage="至少5个字符"></td>
</tr>
<tr>
<td>Note:</td>
<td><textarea class="easyui-validatebox" required="true"
missingMessage="必填" style="height: 100px;"></textarea></td>
</tr>
</table>
</div>
</body>
</html>
4.2 参数
属性名 |
类型 |
描述 |
默认值 |
required |
布尔 |
定义文本域是否为必填项 |
false |
validType |
字符串 |
定义字段的验证类型 |
url(匹配电子邮件正则表达式规则), email(匹配URL正则表达式规则),length[0,100](允许字符串长度的范围)etc.null |
missingMessage |
字符串 |
当文本框为空时提示的文本信息 |
This field is required. |
invalidMessage |
字符串 |
当文本框内容不合法时提示的文本信息 |
null |
4.3 方法
方法名 |
参数 |
描述 |
destroy |
none |
删除并且销毁组件 |
validate |
none |
做验证以确定文本框的内容是否是有效的。 |
isValid |
none |
调用验证方法并返回验证结果,true或者false |
4.4 扩展
当然也可以自定义验证规则,重写$.fn.validatebox.defaults.rules 可以定义一个校验器的功能和无效的显示消息。例如,要定义一个minLength有效的类型:
$.extend($.fn.validatebox.defaults.rules, {
minLength: {
validator: function(value, param){
return value.length >= param[0];
},
message: 'Please enter at least {0} characters.'
}
});定义好以后我们就可以使用了,下面的代码表示输入的最小长度是5个字符:
<input class="easyui-validatebox" validType="minLength[5]">
相关推荐
jquery-easyui-EDT-1.5.2-build1 jquery-easyui-EDT-1.5.2-build1
jquery-easyui-1.2.2jquery-easyui-1.2.2jquery-easyui-1.2.2
easyui\easyui-accordion-demo.zip easyui\easyui-crud-demo.zip easyui\easyui-datagrid10-demo.zip easyui\easyui-datagrid11-demo.zip easyui\easyui-datagrid12-demo.zip easyui\easyui-datagrid13-demo.zip ...
easyui-datagrid2-demo.zip
jquery-easyui-EDT-1.4.2-,包括中文文档以及一些示例,静态资源,各种样式
jQuery EasyUI jquery-easyui-1.5.5.6 版 API 中文版 PDF和chm版本,jQuery
jQueryEasyUI1.4.1-版-API-中文版
EasyUI入门教程--第02课_介绍easyloader组件和easyui怎样使用.avi,这是由孙宇老师录制的视频,现在很难找了,讲得很详细,授人以鱼,不如授人以渔。
第02课(介绍easyloader组件和easyui怎样使用) 第03课(parser组件panel组件) 第04课(通过用户登录来演示dialog、ajax的使用,serialize方法的使用,前后台怎样交互等) 第05课(讲解easyui的form控件、validatebox控件...
jQuery EasyUI API 中文文档 - ValidateBox验证框,使用jQuery EasyUI的朋友可以参考下。
easyui-datagrid21-demo.zip
jQuery EasyUI API 中文文档 - Dialog对话框使用说明,需要的朋友可以参考下。
jquery-easyui-EDT-1.4.5-build1很好用
jQuery EasyUI 官方API文档中文版 version 1.4.2 Build 1 作者:王锦阳 CSDN账号:richie696 EasyUI专题 http://download.csdn.net/album/detail/343 文档 EasyUI每个组件的属性,方法和事件。用户可以很容易地扩展...
jQuery EasyUI API 中文文档 - NumberBox数字框使用介绍,需要的朋友可以参考下。
这是我自己总结出来easyui-textbox和easyui-combobox的onchange事件响应实例,绝对可用,网上很多实例都无法运行,这个我亲自测试可用使用才传上来的,供大家参考学习。
easyui的tree组件的使用,使用springmvc作为后台支持,前后通信是实现tree的操作
支持datagrid扩展,在一条记录下面可以嵌套一个子datagrid,切记要在页面中引入该js
第02课(介绍easyloader组件和easyui怎样使用) 第03课(parser组件panel组件) 第04课(通过用户登录来演示dialog、ajax的使用,serialize方法的使用,前后台怎样交互等) 第05课(讲解easyui的form控件、validatebox控件...
easyUI离线文档1.3-1.4全部包含,还包含了工具,很好用的资源喔