`
kzerg
  • 浏览: 25795 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

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

阅读更多

4.... Dialog(对话框)... 10

5.... Messager(提示框)... 12

6.... NumberBox(数字框)... 16

7.... ValidateBox(验证框)... 18

 

1                Dialog(对话框)

1.1         实例

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>

 

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>

<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

在屏幕的右下角显示一个消息窗口。这些选项的参数可以是一下的一个配置对象:
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>

<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.4.5-build1

    3. 对话框(Dialog):用于弹出式显示内容,常用于表单提交、信息提示等场景。 4. 树形控件(Tree):展示层级关系的数据,可进行展开、折叠操作。 5. 表单(Form):包含各种输入控件,支持验证和数据提交。 五、...

    java源码 EasyUI-2 后台框架(仅供参考) 2018127

    6. **安全性**:EasyUI 的后台框架需要考虑安全性问题,如防止 SQL 注入、XSS 攻击等,这可以通过验证输入、使用预编译的 SQL 语句、过滤特殊字符等方式实现。 7. **性能优化**:使用缓存技术(如 Ehcache 或 Redis...

    jquery-easyui-1.3.2+帮助文档

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件,可以帮助开发者快速构建用户界面。这个"jquery-easyui-1.3.2+帮助文档"包含了该版本的所有相关资源和指南,使得开发者能够深入理解和...

    jquery-easyui-1.3.5

    7. **其他组件**:包括滑块(Slider)、按钮(Button)、提示(Tip)、提示框(Alert/Confirm/Prompt)等。 此外,`EasyUI` 还提供了主题定制功能,可以方便地改变应用的外观以适应不同的设计需求。`1.3.5`版本可能已经包含...

    jquery-easyui-1.2.6

    3. 对话框(dialog):弹出式窗口,可用于显示内容、提示信息或进行用户交互。 4. 表单(form):支持验证和提交,方便用户输入和编辑数据。 5. 提示(tooltip):提供浮动的提示信息,增强用户体验。 6. 按钮...

    EasyUI效果参考

    - **官方文档**:EasyUI的官方文档提供了详尽的API和示例,是学习和使用EasyUI的重要参考。 - **社区和论坛**:开发者可以在EasyUI的社区和论坛中找到问题解答和示例代码,互相交流经验。 - **在线示例**:通过...

    jquery-easyui 前端开发框架

    1. **Dialog**:弹出对话框,用于展示独立的内容,支持拖动、最大化、最小化、关闭等操作,常用于提示信息或编辑表单。 2. **Grid**:数据网格,可以展示和操作大量结构化的数据,支持排序、分页、过滤等功能,与...

    jquery-easyui-1.3.3-api.rar

    总结来说,“jquery-easyui-1.3.3-api.rar”这个压缩包包含了完整的jQuery EasyUI 1.3.3版本的API文档,是学习和使用EasyUI开发Web应用的必备参考资料。通过深入理解和实践其中的API,开发者能够熟练掌握EasyUI,...

    EasyUI后台管理框架

    例如,数据网格可以实现数据的增删改查功能,表单则用于收集和验证用户输入,对话框用于展示弹窗提示或进行独立操作,菜单和树形控件则用于导航和展示层级关系。 在“custom”目录中,可能包含了用户自定义的样式和...

    jQuery+easyui validatebox 验证框

    validatebox验证框的使用通常包括以下几个步骤: 1. **引入依赖**:首先,你需要在HTML文件中引入jQuery、EasyUI和validatebox的相关CSS和JS文件。这些文件可以从EasyUI的官方下载包中获取。 ```html ...

    easyui模板.rar

    EasyUI 是一个基于 jQuery 的 UI 组件库,它为 Web 应用程序提供了一套完整的、易于使用的界面组件。这个“easyui模板.rar”压缩包很可能是包含了一系列预先设计好的 EasyUI 页面模板,用于快速搭建符合企业级标准的...

    jquer-easyui-1.6.6

    - **readme.txt**:包含基本的使用指南和注意事项,是初学者的重要参考。 - **plugins**:插件目录,扩展了EasyUI的功能,例如图表、日历等。 - **locale**:本地化文件夹,提供了多种语言的支持,便于国际化开发...

    jquery-easyui-1.3.1.zip

    - **组件丰富**:jQuery EasyUI 提供了诸如对话框(Dialog)、表格(Grid)、树形控件(Tree)、下拉选择框(ComboBox)、菜单(Menu)等多种常见的 UI 控件,满足开发各种复杂界面的需求。 - **响应式设计**:...

    jquery-easyui.rar_jquery easyui _jquery对话框

    7. **表单(Form)**:表单组件用于创建各种表单元素,如文本输入、复选框、单选按钮等,还支持表单验证和数据提交。它能够与服务器端进行数据交互,实现数据的增删改查。 8. **其他组件**:除了以上组件,jQuery ...

    easyui包 jquery-easyui

    - **对话框(dialog)**:类似于窗口,但通常用于临时性的交互,如确认、提示等。 - **菜单(menu)**:创建下拉菜单或者多级菜单,方便用户操作。 - **按钮(button)**:提供各种类型按钮,如普通按钮、提交...

    EasyUI前端框架下载

    在描述中提到的“easyUI框架下载”,暗示我们将讨论如何获取和使用 EasyUI。 首先,你需要从官方网站或者其他可靠的资源下载 EasyUI 压缩包。文件名为“EasyUI”,通常包含以下几个核心部分: 1. **CSS 文件**:...

    jquery-easyui-1.2.5

    - **对话框(Dialog)**: 显示弹出窗口,常用于确认、提示、设置等场景。 - **按钮(Button)**: 提供各种形式的按钮,如普通按钮、复选按钮、单选按钮等。 - **树形控件(Tree)**: 展示层级结构的数据,支持展开、...

    jquery-easyui-1.5.2

    6. 表单(Form):表单组件提供了多种输入控件,如文本框、下拉选择、复选框等,以及表单验证功能,简化了用户输入数据的处理。 除了上述组件,jQuery EasyUI 还包含其他辅助功能,如工具提示(Tooltip)、进度条...

Global site tag (gtag.js) - Google Analytics