EasyUI–消息框、对话框和窗体详解

最新推荐文章于 2020-12-20 13:00:02 发布

程序员大阳

最新推荐文章于 2020-12-20 13:00:02 发布

阅读量2.6k

点赞数

分类专栏： # 前端文章标签： jquery 对话框 easyui 窗体消息框

未经本人允许，请勿转载本人文章

本文链接：https://blog.csdn.net/woshisangsang/article/details/62036891

版权

前端专栏收录该内容

60 篇文章 5 订阅

订阅专栏

点此查看全部文字教程、视频教程、源代码

本篇主要介绍信息提示框、对话框及窗体相关控件，这些都是最常用的页面弹出控件，使用一个详细的例子描述。

按惯例献上案例的示意图：
这里写图片描述

代码如下，注意文字部分描述：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>窗体和布局</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
	<script type="text/javascript" src="easyui/jquery.min.js"></script>
	<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
  </head>
  <body>
  <!-- 通过设置宽度和左右边距auto使form居中 -->
  <form class="main_form" style="margin:8px auto;width:600px;">
     <div>脚本在body最后面</div>
  	 <div class="easyui-panel" title="信息窗messager 示例" style="width:540px;margin-bottom:10px;padding:10px 10px;">
  	 	<div>是否曾对丑陋的alert提示框感到伤悲？EasyUI框架的Messager美观又好用，下面是常用例子</div>
  	 	<a href="#" class="easyui-linkbutton" onclick="showMessager();">右下角弹窗提示</a><br/>
  	 	<a href="#" class="easyui-linkbutton" onclick="showAlert();">页面中心弹窗提示</a><br/>
  	 	<a href="#" class="easyui-linkbutton" onclick="showConfirm();">非常常用的交互提示框</a>
  	 </div>
  	 
  	 <div class="easyui-panel" title="对话框dialog 示例" style="width:540px;margin-bottom:10px;padding:10px 10px;">
  	 	<div>在用户列表界面，新增、修改用户使用弹出式的对话框界面非常合适</div>
  	 	<a href="#" class="easyui-linkbutton" onclick="showSimpleDialog();">点此显示简单对话框</a>
  	 	<div id="dialog_simple" class="easyui-dialog" title="简单对话框" data-options="iconCls:'icon-ok',closed:'true'" style="width:300px;height:200px;padding:10px">
			这是一个简单的对话框，默认情况下是关闭的
		</div><br/>
		<a href="#" class="easyui-linkbutton" onclick="showComplexDialog();">带工具栏和按钮的对话框</a>
		<!-- 该对话框的工具栏为#dialog_toolbar，按钮栏为#dialog_buttonbar -->
		<div id="dialog_complex" class="easyui-dialog" title="复杂对话框" style="width:300px;height:200px;padding:10px"
			data-options="iconCls: 'icon-save',closed:'true',toolbar: '#dialog_toolbar',buttons: '#dialog_buttonbar'">
			注意工具栏和按钮栏的关联方式
		</div>
		<!-- 工具栏 -->
		<div id="dialog_toolbar" style="padding:2px 0">
			<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 id="dialog_buttonbar">
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="closeComplexDialog();">关闭</a>
			<a href="javascript:void(0)" class="easyui-linkbutton">按钮2</a>
		</div>
  	 </div>
  	 
  	  <div class="easyui-panel" title="窗体window 示例" style="width:540px;margin-bottom:10px;padding:10px 10px;">
  	  	<div>窗体跟对话框不同的时，窗体是一个完整的窗口，可以最大化、最小化、折叠（说实话也没啥多大区别..）</div>
  	  	<a href="javascript:void(0)" class="easyui-linkbutton" onclick="openSimpleWindow();">打开一个简单窗体</a>
  	  	<div id="window_simple" class="easyui-window" title="简单窗体" data-options="iconCls:'icon-ok',closed:'true'" style="width:300px;height:200px;padding:10px;">
			窗体内容
		</div>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="openModalWindow();">打开一个模态窗口(不明白模态的请百度)</a>
  	  	<div id="window_modal" class="easyui-window" title="模态窗口" data-options="modal:true,closed:true,iconCls:'icon-ok'" style="width:300px;height:200px;padding:10px;">
			这是一个模态窗口，焦点保持在窗口内
		</div>
  	  </div>
  </form>
  
  <script type="text/javascript">
  		function showMessager(){
			$.messager.show({
				title:'这里是标题',
				msg:'这里是具体内容',
				showType:'show'//此处可改为slide fade等不同显示方式
			});
		}
		function showAlert(){
			//注意第三个参数为图标类型，其他取值有：info question warning
			$.messager.alert('标题','错误!','error');
		}
		function showConfirm(){
			$.messager.confirm('确认？', '您确定吗?', function(result){
				//注意result的值为true或者false 
				alert('结果: '+result);
			});
		}
		function showSimpleDialog(){
			//对话框显示
			$('#dialog_simple').dialog('open');
		}
		function showComplexDialog(){
			$('#dialog_complex').dialog('open');
		}
		function closeComplexDialog(){
			$('#dialog_complex').dialog('close');
		}
		function openSimpleWindow(){
			$('#window_simple').window('open');
		}
		function openModalWindow(){
			$('#window_modal').window('open');
		}
  </script>
  </body>
</html>