jQuery.easyui Dialog使用

最新推荐文章于 2021-09-15 17:22:09 发布

wukf_it

最新推荐文章于 2021-09-15 17:22:09 发布

阅读量2.2k

点赞数

分类专栏： jquery

jquery 专栏收录该内容

11 篇文章

订阅专栏

继承$.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）选择显示的工具栏。. 工具栏可以定义在一个<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
buttons	array,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样式

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

代码

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>无标题文档</title>
 
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
 
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
 
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
 
<link rel="stylesheet" type="text/css" href="css/EasyUIthemes/default/easyui.css"/>
 
<link rel="stylesheet" type="text/css" href="css/EasyUIthemes/icon.css"/>
 
<style type="text/css"> 
 
    table {
 
        font-family:"微软雅黑";
 
        padding:0;  
 
        margin:0 auto; 
 
        border-collapse: collapse;
 
        margin-top:20px;
 
    }         
 
    td { 
 
        background: #fff; 
 
        font-size:12px; 
 
        padding: 3px 3px 3px 8px; 
 
        color: #4f6b72; 
 
    }
 
    input{
 
        width:200px;
 
        border: 1px solid #999;
 
        }
 
</style> 
 
<script type="text/javascript">
 
    $(document).ready(function(){
 
            $("#tt").dialog({                      
 
                title: 'My Dialog demo',  
 
                width: 400,  
 
                height: 200,  
 
                closed: false,  
 
                cache: false,
 
                minimizable:true,
 
                maximizable:true,
 
                modal: true,
 
                buttons:'#bb'
 
            });
 
            $.extend($.fn.validatebox.defaults.rules, {  
 
                equals: {  
 
                            validator: function(value,param){  
 
                                return value == $(param[0]).val();  
 
                            },  
 
                            message: '两次输入密码不一致' 
 
                        }  
 
            });
 
    });
 
</script>
 
</head>
 
<body>
 
<div id="tt">
 
<table>
 
<tr>
 
<td>邮箱帐号:</td>
 
<td><input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'" /></td>
 
</tr>
 
<tr>
 
<td>邮箱密码:</td>
 
<td><input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true" /></td>
 
</tr>
 
<tr>
 
<td>重复密码:</td>
 
<td><input id="rpwd" name="rpwd" type="password" class="easyui-validatebox"   
 
    required="required" validType="equals['#pwd']" /></td>
 
</tr>
 
</table> 
 
</div>
 
<div id="bb">
 
    <a href="#" class="easyui-linkbutton">Save</a>
 
    <a href="#" class="easyui-linkbutton">Close</a>
 
</div>
 
</body>
 
</html>