jQuery.easyui Dialog使用

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

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

 

属性(Properties)

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

名称 类型 描述 默认值
title string 对话标题。 New Dialog
collapsible boolean 定义是否显示折叠按钮。 false
minimizable boolean 定义是否显示最小化按钮。 false
maximizable boolean 定义是否显示最大化按钮。 false
resizable boolean 定义对话窗口是否可以被缩放。 false
toolbar array,selector 对话窗口顶部的工具栏,每个工具的属性都跟链接按钮的属性一样。:
1)数组,每个工具选项和链接按钮相同。
2)选择显示的工具栏。.

工具栏可以定义在一个

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

按钮可以定义在一个

的标签内:

Dialog Content.

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

Dialog Content.
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
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">Savea>
74     <a href="#" class="easyui-linkbutton">Closea>
75 div>
76 body>
77 html>

 

你可能感兴趣的:(jquery)