• showModelDialog的使用(一)


        前两天接到这样一个任务:在用户上传附件,需要校验用户上传附件中身份证信息,如果存在错误信息需要将所有的错误信息展示出来。

       这个需求我一开始考虑得就是使用jQuery Dialog。但是看到这个项目没有使用而是使用showModelDialog,所以为了统一,也需要使用showModelDialog。所以就记录下来以供后面使用。

       正文:

       window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框,由于是对话框,因此它并没有一般用window.open()打开的窗口的所有属性。

       使用方法:

       varreturnValue = window.showModalDialog(URL [, arguments] [, features])

        参数说明:

        URL:必选参数:用来指定对话框要显示的文档的URL。

       arguments:可选参数。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过       window.dialogArguments来取得传递进来的参数。

       features可选参数。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号”;”隔开。

       dialogHeight 对话框高度,不小于100px。

       dialogWidth: 对话框宽度。
        dialogLeft: 距离桌面左的距离。
        dialogTop: 离桌面上的距离。

       center: {yes| no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。
        help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。
        resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。
        status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
        scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。

       示例:

    var rv = window.showModalDialog("<%=path%>/query/query_showErrorInfo.action","","dialogWidth=600px;dialogHeight="+height+"px;dialogLeft=400px;dialogTop=200px;center=no;resizable=no");

        height:是根据展示的个数进行控制的。

       url:为一个action,该action用户获取所有的错误人员信息。同事跳转到errorInfo.jsp页面

       errorInfo.jsp

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%@ taglib uri="/struts-tags" prefix="s" %>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>批量查询身份错误人员名单</title>
        <script type="text/javascript" src="/bjlc/js/jquery-1.4.4.min.js"></script>
        <link href="/bjlc/css/queryErrorInfo.css" rel="stylesheet" type="text/css" />
        <link href="/bjlc/css/index.css" rel="stylesheet" type="text/css" />  </head>
        <base target="download">
      <body>
      	<div class="errorMain">
      	<div class="errorBtn">
    		<input type="button" value="我要修改" class="button_08" onclick="wyxg();"/>   
       		<input type="button" value="继续查询" class="button_08" onclick="jxcx();"/>   
       	</div>
       	<div id="showErrorInfo">
       		<table class="errorTable" cellpadding="0" cellspacing="0">
       			<tr>
       				<td colspan="3" class="errorTitle">错误人员名单</td>
       				<s:form theme="simple" id="error_download" namespace="/query" method="post"></s:form> 
       			</tr>
       			<tr>
       				<td width="20%" align="center">姓名</td>
       				<td width="30%" align="center">身份证</td>
       				<td width="50%" align="center">错误信息</td>
       			</tr>
       			<s:iterator value="#request.ecList">
       				<tr>
       					<td><s:property value="xm"/> </td>
       					<td><s:property value="sfz"/> </td>
       					<td><s:property value="message"/> </td>
       				</tr>
       			</s:iterator>
       		</table>
       	</div>
      	</div>
      </body>
      <SCRIPT type="text/javascript">
      	//设置高度
      	function setHeight(){
      		 var _allH = $(".errorMain").height();
      		 var _H1 = $("#showErrorInfo").height();
      		 if(_allH>=536){
      		 	$("#showErrorInfo").css("height","500px")
      		 }
      	}
      	
      	window.onload = setHeight;
      </SCRIPT>
    </html>


       样式表:queryErrorInfo.css

    html,body,.errorMain{
    	overflow:hidden;
    	height: 100%;
    	height: 100%;
    }
    
    #showErrorInfo{
    	 100%;
    	OVERFLOW-Y: auto; 
    	OVERFLOW-X:hidden; 
    }
    
    .errorTable{
    	 90%;
    	margin: 10px 5%;
    	font-size: 12px;
    	border: 1px solid #8DC8FF;
    }
    
    
    .errorTable td{
    	height: 40px;
    	border-right: 1px solid #8DC8FF;
    	border-bottom:1px solid #8DC8FF;
    	text-align: center;
    }
    
    .errorTable td:last-child{
    	border-right: 0px;
    }
    
    td[id="btn"]{
    	border-bottom: 0px;
    }
    
    .errorTitle{
    	font-weight: bold;
    	font-size: 14px;
    	background-color: #C6E3FF;
    	color: #176ED2;
    	text-align: center;
    }
    
    .errorBtn{
    	 100%;
    	height: 20px;
    	text-align: center;
        bottom: 0px; 
        position:absolute;
    }


       结果如下:



  • 相关阅读:
    设计模式复习-单例模式
    设计模式复习-组合模式
    设计模式复习-迭代器模式
    设计模式复习-备忘录模式
    PAT 1085 PAT单位排行 (Microsoft_zzt)
    PAT L1-034 点赞
    PAT L1-032 Left-pad
    PAT 甲级 1046 Shortest Distance
    PAT 甲级 1077 Kuchiguse
    PAT 甲级 1027 Colors in Mars
  • 原文地址:https://www.cnblogs.com/xinyuyuanm/p/3010898.html
Copyright © 2020-2023  润新知