- 浏览: 25795 次
- 性别:
- 来自: 成都
最新评论
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]">
相关推荐
3. 对话框(Dialog):用于弹出式显示内容,常用于表单提交、信息提示等场景。 4. 树形控件(Tree):展示层级关系的数据,可进行展开、折叠操作。 5. 表单(Form):包含各种输入控件,支持验证和数据提交。 五、...
6. **安全性**:EasyUI 的后台框架需要考虑安全性问题,如防止 SQL 注入、XSS 攻击等,这可以通过验证输入、使用预编译的 SQL 语句、过滤特殊字符等方式实现。 7. **性能优化**:使用缓存技术(如 Ehcache 或 Redis...
jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件,可以帮助开发者快速构建用户界面。这个"jquery-easyui-1.3.2+帮助文档"包含了该版本的所有相关资源和指南,使得开发者能够深入理解和...
7. **其他组件**:包括滑块(Slider)、按钮(Button)、提示(Tip)、提示框(Alert/Confirm/Prompt)等。 此外,`EasyUI` 还提供了主题定制功能,可以方便地改变应用的外观以适应不同的设计需求。`1.3.5`版本可能已经包含...
3. 对话框(dialog):弹出式窗口,可用于显示内容、提示信息或进行用户交互。 4. 表单(form):支持验证和提交,方便用户输入和编辑数据。 5. 提示(tooltip):提供浮动的提示信息,增强用户体验。 6. 按钮...
- **官方文档**:EasyUI的官方文档提供了详尽的API和示例,是学习和使用EasyUI的重要参考。 - **社区和论坛**:开发者可以在EasyUI的社区和论坛中找到问题解答和示例代码,互相交流经验。 - **在线示例**:通过...
1. **Dialog**:弹出对话框,用于展示独立的内容,支持拖动、最大化、最小化、关闭等操作,常用于提示信息或编辑表单。 2. **Grid**:数据网格,可以展示和操作大量结构化的数据,支持排序、分页、过滤等功能,与...
总结来说,“jquery-easyui-1.3.3-api.rar”这个压缩包包含了完整的jQuery EasyUI 1.3.3版本的API文档,是学习和使用EasyUI开发Web应用的必备参考资料。通过深入理解和实践其中的API,开发者能够熟练掌握EasyUI,...
例如,数据网格可以实现数据的增删改查功能,表单则用于收集和验证用户输入,对话框用于展示弹窗提示或进行独立操作,菜单和树形控件则用于导航和展示层级关系。 在“custom”目录中,可能包含了用户自定义的样式和...
validatebox验证框的使用通常包括以下几个步骤: 1. **引入依赖**:首先,你需要在HTML文件中引入jQuery、EasyUI和validatebox的相关CSS和JS文件。这些文件可以从EasyUI的官方下载包中获取。 ```html ...
EasyUI 是一个基于 jQuery 的 UI 组件库,它为 Web 应用程序提供了一套完整的、易于使用的界面组件。这个“easyui模板.rar”压缩包很可能是包含了一系列预先设计好的 EasyUI 页面模板,用于快速搭建符合企业级标准的...
- **readme.txt**:包含基本的使用指南和注意事项,是初学者的重要参考。 - **plugins**:插件目录,扩展了EasyUI的功能,例如图表、日历等。 - **locale**:本地化文件夹,提供了多种语言的支持,便于国际化开发...
- **组件丰富**:jQuery EasyUI 提供了诸如对话框(Dialog)、表格(Grid)、树形控件(Tree)、下拉选择框(ComboBox)、菜单(Menu)等多种常见的 UI 控件,满足开发各种复杂界面的需求。 - **响应式设计**:...
7. **表单(Form)**:表单组件用于创建各种表单元素,如文本输入、复选框、单选按钮等,还支持表单验证和数据提交。它能够与服务器端进行数据交互,实现数据的增删改查。 8. **其他组件**:除了以上组件,jQuery ...
- **对话框(dialog)**:类似于窗口,但通常用于临时性的交互,如确认、提示等。 - **菜单(menu)**:创建下拉菜单或者多级菜单,方便用户操作。 - **按钮(button)**:提供各种类型按钮,如普通按钮、提交...
在描述中提到的“easyUI框架下载”,暗示我们将讨论如何获取和使用 EasyUI。 首先,你需要从官方网站或者其他可靠的资源下载 EasyUI 压缩包。文件名为“EasyUI”,通常包含以下几个核心部分: 1. **CSS 文件**:...
- **对话框(Dialog)**: 显示弹出窗口,常用于确认、提示、设置等场景。 - **按钮(Button)**: 提供各种形式的按钮,如普通按钮、复选按钮、单选按钮等。 - **树形控件(Tree)**: 展示层级结构的数据,支持展开、...
6. 表单(Form):表单组件提供了多种输入控件,如文本框、下拉选择、复选框等,以及表单验证功能,简化了用户输入数据的处理。 除了上述组件,jQuery EasyUI 还包含其他辅助功能,如工具提示(Tooltip)、进度条...