使用EasyUI开发后台系统-EasyUI对话框和窗体

来源：互联网发布：ubuntu 硬盘分区编辑：程序博客网时间：2024/06/07 09:41
按惯例献上案例的示意图：
图片描述
<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><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>
0 0