kzerg

浏览: 25857 次
性别:
来自: 成都

最近访客更多访客>>

suncong1024

daiwenzh5

xyzhao888

qq752011193

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

easyUI使用参考02-对话框,提示框,数字框,验证框

博客分类：

参考

javascript easyui

4.... Dialog（对话框）... 10

5.... Messager（提示框）... 12

6.... NumberBox（数字框）... 16

7.... ValidateBox（验证框）... 18

1 Dialog（对话框）

1.1 实例

1.1.1 代码

<html>

<head>

<title>jQuery EasyUI</title>

href="../themes/default/easyui.css">

$(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>

<a href="#" onclick="close1()">close1</a></div>

<div id="dd" icon="icon-save"

style="padding: 5px; width: 400px; height: 200px;">

<p>dialog content.</p>

</div>

</body>

</html>

1.2 参数

属性名	类型	描述	默认值
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.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>

<title>jQuery EasyUI</title>

href="../themes/default/easyui.css">

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>

</body>

</html>

2.2 方法

方法名	参数	描述
$.messager.show	options	在屏幕的右下角显示一个消息窗口。这些选项的参数可以是一下的一个配置对象： showType：定义如何将显示消息窗口。可用的值是：null,slide,fade,show。默认值是slide。 showSpeed：定义消息窗口完成的时间（以毫秒为单位），默认值600。 width：定义消息窗口的宽度。默认值250。 height：定义消息窗口的高度。默认值100。 msg：定义显示的消息文本。 title：定义显示在标题面板显示的标题文本。 timeout：如果定义为0，消息窗口将不会关闭，除非用户关闭它。如果定义为非0值，当超时后消息窗口将自动关闭。
$.messager.alert	title, msg, icon, fn	显示一个警告窗口。参数如下： title：显示在标题面板的标题文本。 msg：提示框显示的消息文本。 icon：提示框显示的图标。可用的值是：error,question,info,warning. fn：当窗口关闭时触发的回调函数。
$.messager.confirm	title, msg, fn	显示一个含有确定和取消按钮的确认消息窗口。参数如下： title：显示在标题面板的标题文本。 msg：确认消息窗口显示的消息文本。 fn(b)：当用户点击按钮后触发的回调函数，如果点击OK则给回调函数传true,如果点击cancel则传false。
$.messager.prompt	title, msg, fn	显示一个确定和取消按钮的信息提示窗口，提示用户输入一些文本。参数如下： title：显示在标题面板的标题文本。 msg：提示窗口显示的消息文本。 fn(val)：用户点击按钮后的回调函，参数是用户输入的内容。

2.3 扩展

可以通过$.messager.defaults方法自定义alert框的ok按钮和cancel按钮上显示的文字。

名字	类型	描述	默认值
ok	字符串	Ok	按钮上的文本	Ok
cancel	字符串	Cancel	按钮上的文本	Cancel

3 NumberBox（数字框）

3.1 实例

3.1.1 代码

<html>

<head>

<title>jQuery EasyUI</title>

href="../themes/default/easyui.css">

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>

</body>

</html>

3.2 参数

选项名	类型	描述	默认值
min	数字	文本框中可允许的最小值	null
max	数字	文本框中可允许的最大值	null
precision	数字	最高可精确到小数点后几位	0

4 ValidateBox（验证框）

4.1 实例

4.1.1 代码

<html>

<head>

<title>jQuery EasyUI</title>

href="../themes/default/easyui.css">

input,textarea {

width: 200px;

border: 1px solid #ccc;

padding: 2px;

}

</style>

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><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><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><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个字符：

分享到：

easyUI使用参考03-分页,窗口,面板,标签 | easyUI使用参考01-可折叠标签,日期框,组 ...

2012-03-29 14:34
浏览 5638
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

easyUI使用参考02-对话框,提示框,数字框,验证框

1 Dialog（对话框）

1.1 实例

1.2 参数

1.3 事件

1.4 方法

2 Messager（提示框）

2.1 实例

2.2 方法

2.3 扩展

3 NumberBox（数字框）

3.1 实例

3.2 参数

4 ValidateBox（验证框）

4.1 实例

4.2 参数

4.3 方法

4.4 扩展

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

easyUI使用参考02-对话框,提示框,数字框,验证框

1 Dialog（对话框）

2 Messager（提示框）

3 NumberBox（数字框）

4 ValidateBox（验证框）

评论

发表评论

相关推荐

easyUI使用参考04-树,布局,数据表

easyUI使用参考03-分页,窗口,面板,标签

easyUI使用参考01-可折叠标签,日期框,组合框

最近访客更多访客>>