jQuery.easyui Dialog使用

来源：互联网发布：it行业发展前景论文编辑：程序博客网时间：2024/04/29 14:50

继承$.fn.window.defaults，使用$.fn.dialog.defaults重载默认值。

该对话框是一种特殊类型的窗口，它可以有一个工具栏上的顶部和底部的按钮栏。该对话框只有一个头默认情况下，显示在右上角的关闭工具。用户可以配置对话框显示，如可折叠，可最小化的maximizable工具等其他工具的行为。

属性（Properties）

属性继承窗口，以下是对话窗口的属性。

名称类型描述默认值titlestring对话标题。New Dialogcollapsibleboolean定义是否显示折叠按钮。falseminimizableboolean定义是否显示最小化按钮。falsemaximizableboolean定义是否显示最大化按钮。falseresizableboolean定义对话窗口是否可以被缩放。falsetoolbararray,selector对话窗口顶部的工具栏，每个工具的属性都跟链接按钮的属性一样。:
1）数组，每个工具选项和链接按钮相同。
2）选择显示的工具栏。.

工具栏可以定义在一个<div>的标签内:

<div class="easyui-dialog" style="width:600px;height:300px"data-options="title:'My Dialog',toolbar:'#tb',modal:true">Dialog Content.</div><div id="tb"><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a></div>

该对话框工具栏也可以通过数组定义:

<div class="easyui-dialog" style="width:600px;height:300px"data-options="title:'My Dialog',modal:true,toolbar:[{text:'Edit',iconCls:'icon-edit',handler:function(){alert('edit')}},{text:'Help',iconCls:'icon-help',handler:function(){alert('help')}}]">Dialog Content.</div>

nullbuttonsarray,selector对话窗口底部的按钮，每个按钮的属性都跟链接按钮一样。:
1) an array, each button options is same as linkbutton.
2) a selector that indicating the button bar.

按钮可以定义在一个<div>的标签内:

<div class="easyui-dialog" style="width:600px;height:300px"data-options="title:'My Dialog',buttons:'#bb',modal:true">Dialog Content.</div><div id="bb"><a href="#" class="easyui-linkbutton">Save</a><a href="#" class="easyui-linkbutton">Close</a></div>

该对话框按钮也可以通过数组定义:

<div class="easyui-dialog" style="width:600px;height:300px"data-options="title:'My Dialog',modal:true,buttons:[{text:'Save',handler:function(){...}},{text:'Close',handler:function(){...}}]">Dialog Content.</div>

null

首先要导入基本的js文件和css样式

1<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
2<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
3<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
4<link rel="stylesheet" type="text/css" href="css/EasyUIthemes/default/easyui.css"/>
5<link rel="stylesheet" type="text/css" href="css/EasyUIthemes/icon.css"/>

点击查看原图

代码

01<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02<html xmlns="http://www.w3.org/1999/xhtml">
03<head>
04<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05<title>无标题文档</title>
06<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
07<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
08<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
09<link rel="stylesheet" type="text/css" href="css/EasyUIthemes/default/easyui.css"/>
10<link rel="stylesheet" type="text/css" href="css/EasyUIthemes/icon.css"/>
11<style type="text/css"> 
12    table {
13        font-family:"微软雅黑";
14        padding:0;  
15        margin:0 auto; 
16        border-collapse: collapse;
17        margin-top:20px;
18    }         
19    td { 
20        background: #fff; 
21        font-size:12px; 
22        padding: 3px 3px 3px 8px; 
23        color: #4f6b72; 
24    }
25    input{
26        width:200px;
27        border: 1px solid #999;
28        }
29</style> 
30<script type="text/javascript">
31    $(document).ready(function(){
32            $("#tt").dialog({                      
33                title: 'My Dialog demo',  
34                width: 400,  
35                height: 200,  
36                closed: false,  
37                cache: false,
38                minimizable:true,
39                maximizable:true,
40                modal: true,
41                buttons:'#bb'
42            });
43            $.extend($.fn.validatebox.defaults.rules, {  
44                equals: {  
45                            validator: function(value,param){  
46                                return value == $(param[0]).val();  
47                            },  
48                            message: '两次输入密码不一致' 
49                        }  
50            });
51    });
52</script>
53</head>
54<body>
55<div id="tt">
56<table>
57<tr>
58<td>邮箱帐号:</td>
59<td><input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'" /></td>
60</tr>
61<tr>
62<td>邮箱密码:</td>
63<td><input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true" /></td>
64</tr>
65<tr>
66<td>重复密码:</td>
67<td><input id="rpwd" name="rpwd" type="password" class="easyui-validatebox"   
68    required="required" validType="equals['#pwd']" /></td>
69</tr>
70</table> 
71</div>
72<div id="bb">
73    <a href="#" class="easyui-linkbutton">Save</a>
74    <a href="#" class="easyui-linkbutton">Close</a>
75</div>
76</body>
77</html>