Dialog（对话框窗口）

最新推荐文章于 2024-04-15 14:38:30 发布

墨渐生微

最新推荐文章于 2024-04-15 14:38:30 发布

阅读量1.9k

点赞数

分类专栏： easyUI

本文链接：https://blog.csdn.net/Mythology_px/article/details/83033922

版权

easyUI 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具,如collapsible,minimizable,maximizable工具等。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Dialog</title>
    <!-- 引入easyUI:JQuery文件支持 -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.min.js"></script>
  	<!-- 引入easyUI -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
  	<!-- 引入中文支持 -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script>
  	<!-- 引入easyUI主题css文件 -->
  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/default/easyui.css" type="text/css"></link>
  	<!-- 引入easyUI 图标导航文件 -->
  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/icon.css" type="text/css"></link></head>
  
  <body>
  	<%
  		/*
  			resizable:是否可以改变对话框窗口大小
  			modal:是否将窗体显示为模式化窗口
  			toolbar:对话框窗口顶部工具栏
  			buttons:对话框窗口底部按钮
  		*/
  	 %>
	<div id="dd" class="easyui-dialog" title="对话框窗口" style="width:400px;height:200px;"   
	        data-options="iconCls:'icon-save',resizable:true,modal:false">   
			会当凌绝顶,一览众山小
	</div>
  </body>
</html>

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Dialog</title>
    <!-- 引入easyUI:JQuery文件支持 -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.min.js"></script>
  	<!-- 引入easyUI -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
  	<!-- 引入中文支持 -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script>
  	<!-- 引入easyUI主题css文件 -->
  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/default/easyui.css" type="text/css"></link>
  	<!-- 引入easyUI 图标导航文件 -->
  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/icon.css" type="text/css"></link></head>
  
  <body>
  	<%
  		/*
  			resizable:是否可以改变对话框窗口大小
  			modal:是否将窗体显示为模式化窗口
  			toolbar:对话框窗口顶部工具栏
  			buttons:对话框窗口底部按钮
  		*/
  	 %>
<!-- ----------------------------------选择器-------------------------------------------------------- -->
	<div id="dd" class="easyui-dialog" title="对话框窗口" style="width:400px;height:200px;"   
	        data-options="iconCls:'icon-save',resizable:true,modal:false,toolbar:'#tb'">   
			会当凌绝顶,一览众山小
	</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:'编辑',
				iconCls:'icon-edit',
				handler:function(){alert('edit')}
			},{
				text:'帮助',
				iconCls:'icon-help',
				handler:function(){alert('help')}
			}]">
		欢迎关注
	</div>
  </body>
</html>

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Dialog</title>
    <!-- 引入easyUI:JQuery文件支持 -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.min.js"></script>
  	<!-- 引入easyUI -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
  	<!-- 引入中文支持 -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script>
  	<!-- 引入easyUI主题css文件 -->
  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/default/easyui.css" type="text/css"></link>
  	<!-- 引入easyUI 图标导航文件 -->
  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/icon.css" type="text/css"></link></head>
  
  <body>
  	<%
  		/*
  			resizable:是否可以改变对话框窗口大小
  			modal:是否将窗体显示为模式化窗口
  			toolbar:对话框窗口顶部工具栏
  			buttons:对话框窗口底部按钮
  		*/
  	 %>
<!-- -----------------------------选择器--------------------------------- -->
	<div id="dd" class="easyui-dialog" title="对话框窗口" style="width:400px;height:200px;"   
	        data-options="iconCls:'icon-save',resizable:true,modal:false,buttons:'#bb'">   
			会当凌绝顶,一览众山小
	</div>

	<div id="bb">
		<a href="#" class="easyui-linkbutton">保存</a>
		<a href="#" class="easyui-linkbutton">关闭</a>
	</div>
<!-- -----------------------------数组--------------------------------- -->
	<div class="easyui-dialog" style="width:600px;height:300px"
			data-options="title:'我的对话框',modal:true,
				buttons:[{
					text:'保存',
					handler:function(){alert('保存');}
				},{
					text:'关闭',
					handler:function(){alert('关闭');}
				}]">
		墨渐生微
	</div>
  </body>
</html>

墨渐生微

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Dialog（对话框窗口）

该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具,如collapsible,minimizable,maximizable工具等。 &lt;%@ page language="java" import="java.util.*" pageEncoding="utf-8"%&...
复制链接

扫一扫