EasyUI之对话框Dialog

来源：互联网发布：收银机软件免费编辑：程序博客网时间：2024/06/05 03:47

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" onclick="$('#dataDialog').dialog('open')" style="width: 100px;">打开</a>        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dataDialog').dialog('close')" style="width: 100px;">关闭</a>    </div>    <div id="dataDialog" class="easyui-dialog" title="新增用户" data-options="iconCls:'icon-save'" style="width:440px;height:450px;padding:10px">        <div style="margin-bottom:20px">            <input class="easyui-textbox" label="邮箱:" labelPosition="top" data-options="prompt:'输入电子邮箱...',validType:'email'" style="width: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="width:100%;height:52px">        </div>        <div style="margin-bottom:20px">            <input class="easyui-textbox" label="QQ:" labelPosition="top" style="width:100%;height:52px">        </div>        <div style="margin-bottom:20px">            <input class="easyui-textbox" label="电话:" labelPosition="top" style="width:100%;height:52px">        </div>        <div>            <a href="#" class="easyui-linkbutton" iconCls="icon-ok" style="width:100%;height:42px">确定</a>        </div>    </div></body></html>

3、实例结果

（1）初始化时

（2）点击关闭按钮

0 1