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

2012-08-26

easyUI使用参考02-对话框,提示框,数字框,验证框?1??????????????? Dialog（对话框） 1.1???????? 实例 html

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

1??????????????? Dialog（对话框） 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???????? 实例

<!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)：用户点击按钮后的回调函，参数是用户输入的内容。

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

名字

类型

描述

默认值

字符串

按钮上的文本

cancel

字符串

Cancel

按钮上的文本

Cancel

3??????????????? NumberBox（数字框） 3.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

数字

最高可精确到小数点后几位

4??????????????? ValidateBox（验证框） 4.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>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个字符：

热点排行

Web前端

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