您的位置：首页 > Web前端 > JQuery

jQuery.easyui Dialog使用

2013-07-29 17:39 375 查看
继承$.fn.window.defaults，使用$.fn.dialog.defaults重载默认值。

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


属性（Properties）

属性继承窗口，以下是对话窗口的属性。
名称类型描述默认值
titlestring对话标题。New Dialog
collapsibleboolean定义是否显示折叠按钮。false
minimizableboolean定义是否显示最小化按钮。false
maximizableboolean定义是否显示最大化按钮。false
resizableboolean定义对话窗口是否可以被缩放。false
toolbararray,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>

null
buttonsarray,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
>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航