EasyUI之对话框Dialog

1、实例背景

     EasyUI是一个基于jQuery的框架,集成了各种插件。Dialog是对话框,利用它设计新增用户场景。


2、实例源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>EasyUI之对话框Dialog</title>
		<link rel="stylesheet" href="../themes/black/easyui.css" />
		<link rel="stylesheet" href="../themes/icon.css" />
		<link rel="stylesheet" href="../css/demo.css" />
		<script type="text/javascript" src="../js/jquery.min.js" ></script>
		<script type="text/javascript" src="../js/jquery.easyui.min.js" ></script>
		<script>
			
		</script>
	</head>
	<body>
		<div style="margin:20px 0;">
	        <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="$('#dataDialog').dialog('open')" style=" 100px;">打开</a>
	        <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="$('#dataDialog').dialog('close')" style=" 100px;">关闭</a>
	    </div>
	    <div id="dataDialog" class="easyui-dialog" title="新增用户" data-options="iconCls:'icon-save'" style="440px;height:450px;padding:10px">
	        <div style="margin-bottom:20px">
	            <input class="easyui-textbox" label="邮箱:" labelPosition="top" data-options="prompt:'输入电子邮箱...',validType:'email'" style="100%;height:52px">
	        </div>
	        <div style="margin-bottom:20px">
	            <input type="radio" name="sex" value="01" checked="checked"><span>男</span>
	            <input type="radio" name="sex" value="02"><span>女</span>
	        </div>
	        <div style="margin-bottom:20px">
	            <input class="easyui-textbox" label="年龄:" labelPosition="top" style="100%;height:52px">
	        </div>
	        <div style="margin-bottom:20px">
	            <input class="easyui-textbox" label="QQ:" labelPosition="top" style="100%;height:52px">
	        </div>
	        <div style="margin-bottom:20px">
	            <input class="easyui-textbox" label="电话:" labelPosition="top" style="100%;height:52px">
	        </div>
	        <div>
	            <a href="#" class="easyui-linkbutton" iconCls="icon-ok" style="100%;height:42px">确定</a>
	        </div>
	    </div>
	</body>
</html>

3、实例结果

(1)初始化时


(2)点击关闭按钮


原文地址:https://www.cnblogs.com/hzcya1995/p/13314025.html