EasyUI之对话框Dialog

最新推荐文章于 2024-04-20 11:50:28 发布
最新推荐文章于 2024-04-20 11:50:28 发布
阅读量217 收藏
点赞数
文章标签： javascript ViewUI

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="width: 100px;">打开</a>
	        <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="$('#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）点击关闭按钮


iteye_8264
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
EasyUi之Dialog（对话框窗口）
Lzxccas的博客
06-28 3910
Dialog（对话框窗口）Dialog（对话框窗口）+Window（窗口）+Panel（面板）Dialog属性Dialog事件+方法Window属性,事件,方法Panel属性,事件,方法案列 实现过程 Dialog（对话框窗口）+Window（窗口）+Panel（面板） 今天我们涉及到的内容较多 我们一个一个整理 但我们着重学习的还是Dialog 该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具,如collaps
jQuery-EasyUI学习（十四）Dialog（对话框窗口）
quge_name_harder的博客
11-26 499
一、Dialog（对话框窗口）           该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具,如collapsible,minimizable,maximizable工具等。 二、例子 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans...
jquery easyUI dialog事件
xiaozhu0301的博客
07-09 4665
扩展自$.fn.window.defaults。使用$.fn.dialog.defaults重写默认值对象。 该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具,如collapsible,minimizable,maximizable工具等。 默认弹框是对于浏览器窗口剧中的，如果想对于当前
EasyUI中Dialog对话框的简单使用
BADAO_LIUMANG_QIZHI的博客
06-19 609
场景 效果 属性 该属性扩展自窗口（window）下面是为对话框（dialog）重写的属性。 名称 类型 描述 默认值 title string 对话框的标题文本。 New Dialog collapsible boolean 定义是否显示折叠按钮。 false minimizable boolean 定义是...
easyUI-Dialog（对话框窗口）
weixin_34267123的博客
05-03 141
2019独角兽企业重金招聘Python工程师标准>>> ...
easyUI（Dialog组件）
m0_46690290的博客
06-28 785
*DataGrid组件 DataGrid组件简介 示例 目标 实现步骤 界面 效果图 DataGrid组件简介 DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。 使用过程中可以查看官方文档：DataGrid组件的 依赖关系，案例，DataGrid属性，事件和方法，以及demo 示例 1.两种方式（静态代码块HTM
Jquery Easyui对话框组件Dialog使用详解（14）
10-20
主要为大家详细介绍了Jquery Easyui对话框组件Dialog的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
EasyUI创建对话框的两种方式
09-01
对话框（Dialog）是一个特殊的窗口（window），可以包含在顶部的工具栏和在底部的按钮。接下来通过本文给大家介绍easyui创建对话框的两种方式，非常不错，感兴趣的朋友一起看下吧
jQuery EasyUI API 中文文档 - Dialog对话框
10-28
jQuery EasyUI API 中文文档 - Dialog对话框使用说明，需要的朋友可以参考下。
JQuery EasyUI 对话框的使用方法
10-28
jQuery EasyUI 对话框(Dialog)用法与EasyUI的窗口用法极为相似，最终的效果图也只与窗口的效果图差几个按钮
easyui dialog和messager样式更改
06-15
easyui dialog和messager样式更改，默认样式太丑
easyui dialog 一文读懂dialog基本使用方法
热门推荐
前端小白
12-05 1万+
easyui dialog 打开方法，默认关闭。设置模态框
easyui dialog的用法
whaleluo的博客
12-20 1万+
  &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Basic Dialog - jQuery EasyUI Demo&lt;/title&gt; &lt;link rel="stylesheet" typ
EasyUi之dialog对话框
珊瑚海的博客
01-05 851
dialog对话框介绍
easyUI之dialog控件和form控件的使用，成功入职阿里月薪45K
m0_60750088的博客
03-18 777
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》[外链图片转存中…(img-THmHAVGv-1710768520717)]
jQuery EasyUI弹出确认对话框(确认操作中.....)
weixin_30765475的博客
05-04 324
因为毕业设计的原因，在初期设计系统的时候没有考虑功能的正确性，所以很多的功能都没有加验证和确认的操作，给人在操作方面上有一些不好的感觉（可能失误点击后，数据就别删除，或者增加了），所以在网上找了一些资料 ，以下是两种方式： 　　 1 //公告审核 2 function checkNotice() 3 { 4 var row = $('...
Jquery EasyUI中弹出确认对话框 以及加载效果
dearbaba_1666的博客
06-21 174
//confirm function Confirm(msg, control) { $.messager.confirm("确认", msg, function (r) {
easyui确认取消弹窗_Jquery EasyUI中弹出确认对话框
weixin_39634508的博客
01-14 649
例子，jquery EasyUI中弹出确认对话框。复制代码 代码示例://confirmfunction Confirm(msg, control) {$.messager.confirm("确认", msg, function (r) {if (r) {return true;}});return false;}例2，Jquery EasyUI加载效果。复制代码 代码示例://Loadfunct...
一个小时学习javaScript
最新发布
weixin_43064364的博客
04-20 707
JavaScript 是一种广泛使用的编程语言，最初被设计来增加网页的交互性，让用户能够与网页上的元素进行互动。自从1995年被引入以来，JavaScript已经发展成为Web开发中不可或缺的一部分，并且其用途已经大大扩展到了网页之外。
自定义easyui 对话框的样式
05-16
要自定义 EasyUI 对话框的样式，你需要先了解 EasyUI 对话框的 CSS 类。EasyUI 对话框包含以下 CSS 类： - `panel`: 对话框的主容器。 - `panel-body`: 对话框内容的容器。 - `panel-header`: 对话框标题栏的容器。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值