html5子菜单怎么设置 html子页面

转载

数据探索家 2024-06-03 22:04:54

文章标签 html5子菜单怎么设置 php javascript java ViewUI 文章分类 HTML5 移动开发

html页面，有的时候不是直接一个页面，一连串(或并行)页面的结束，为了提高用户体验或完成某种功能需要父子页面(或窗口)来实现，或者父子，兄弟窗口来完成。本文主要介绍：

html父子页面(弹框)的实现和交互[通信]

实现简单业务介绍：

1.父页面，点下“注册”按钮，按钮锁定，并弹框；

2.父页面隐藏域的值“欢迎您的注册……”，传给子弹框，并显示；

3.子窗口，进行注册用户，成功后调用父页面js方法，将注册的“用户名”填写到登录用户名中；

4.用户登录，后台ajax传值，显示注册的“用户名”；

5.后台类的处理，使用MAP保存[内存暂时]，然后用用户名去获取对象进行登录验证。

父页面jsp代码[popupmain.jsp]：

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>注册页面</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="${pageContext.request.contextPath }/tsjs/jquery-1.11.1.js"></script>	
	<script type="text/javascript" src="${pageContext.request.contextPath }/tsjs/popupmain.js"></script>	

  </head>
  
  <body>
  <center id="centerid">
  	<div id="userlogin">
  		<form id="userloginform">
  		<table id="tbuserlogin" width="150" border="0" cellpadding="0" cellspacing="0">
  			<tr class="setshow">
  				<td width="30">user:</td>
  				<td width="70">
  					<input id="userlog" name="userlog" type="text" maxlength="8" size="15" />
  				</td>
  				<td width="50"><div id="userlogmsg"></div></td>
  			</tr>
  			<tr class="setshow">
  				<td width="30">pass:</td>
  				<td width="70">
  					<input id="passlog" name="passlog" type="password" maxlength="12" size="15" />
  				</td>
  				<td></td>
  				<td></td>
  			</tr>
  			<tr>
  				<td colspan="2" align="right">
  				<div id="userregbtdiv">
  					<input type="button" id="popupbt" value="注册" />
  				</div>
  				<div id="userloginbtdiv">
  					<input type="button" id="userlogin" value="登录" οnclick="login(this);" />
  				</div>
  				</td>
  			</tr>
  		</table>
  		</form>
  	</div>	
  </center>
    <input id="contextPath" type="hidden" value="${pageContext.request.contextPath }"> 
    <!-- 子窗口 -> 父页面的交互传值[到] -->
    <input id="returnreginfo" type="hidden" value=""> 
    <!-- 父页面 -> 子窗口的交互传值 -->
    <input id="maintochildwidow" type="hidden" value="欢迎您的注册……"> 
  </body>
</html>

父页面的js[popupmain.js]:

$(document).ready(function() {
	var contextPath = $("#contextPath").val();
	$("tr[class='setshow']").hide();
	$("#userloginbtdiv").hide();
	$("#popupbt").click(function(){
		//锁定注册按钮
		$("#popupbt").attr("disabled",true);
		//弹框的url
		var popup_url = contextPath+"/tsjsp/popup.jsp";
		//弹框高度
		var popup_height = "350";
		//弹框宽度
		var popup_width = "500";
		//获得窗口的垂直位置
		var popup_top_dist = (window.screen.availHeight - 30 - popup_height) / 2;
		//获得窗口的水平位置
		var popup_left_dist = (window.screen.availWidth - 10 - popup_width) / 2;
		//打开连接弹框界面
		winOpen = window.open(popup_url,'newwindow','width='+popup_width+',height='+popup_height+',top='+popup_top_dist+',left='+popup_left_dist+',toolbar=no,menubar=no,scrollbars=yes,resizable=no,location=no,status=no');
		//检查是否关闭新窗口，1s一次
		winOpenClosedShow();//window.onload 
		window.setInterval("winOpenClosedShow()",1000);
	});
});
function login(obj){
	var value = obj.value;
	var id =obj.id;
//	alert(value+"*"+id);
	$("#userlogin").attr("disabled",true);
	$.ajax({
		url:"user.do?param=login",
		type:"post",
		data:$("#userloginform").serialize(),
		timeout:20000,
		success:function(data){
			$("#centerid").html("<div style=\"color: #0F0;\">"+data+"欢迎您登录...<div>");
		},
		error:function(){
			alert("您登录失败，请重新登录");
		}
	});
}
//弹框关闭，用户进行登录
function winOpenClosedShow(){
	if(!winOpen || winOpen.closed){
		$("#popupbt").attr("disabled",false);
		$("#userregbtdiv").hide();
		$("tr[class='setshow']").show();
		$("#userloginbtdiv").show();
	}
}
function setUser(){
	setTimeout(function(){
		var returnreginfo = $("#returnreginfo").val();
		$("#userlog").val(returnreginfo);
	},1000);
}

注：获取当前的操作this下的obj对象[参数]的属性：

1.var id = $(obj).attr("id"); var id = $(obj).val();

2.var id =obj.id; var value = obj.value;

注：setTimeout(A,B);是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method

A为要执行的代码，字符，函数等都可以，B为定时时间，单位为ms[毫秒]

注：window.open()；

环境：JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+

语法：window.open(pageURL,name,parameters)

pageURL为子窗口路径；name为子窗口句柄；parameters为窗口参数(各参数用逗号分隔)
参数|取值范围|说明：其中yes/no也可使用1/0；pixelvalue为具体的数值，单位像素。

alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后
 
alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上
 
depended | yes/no | 是否和父窗口同时关闭
 
directories | yes/no | Nav2和3的目录栏是否可见
 
height | pixelvalue | 窗口高度
 
hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键
 
innerHeight | pixelvalue | 窗口中文档的像素高度
 
innerWidth | pixelvalue | 窗口中文档的像素宽度
 
location | yes/no | 位置栏是否可见
 
menubar | yes/no | 菜单栏是否可见
 
outerHeight | pixelvalue | 设定窗口(包括装饰边框)的像素高度
 
outerWidth | pixelvalue | 设定窗口(包括装饰边框)的像素宽度
 
resizable | yes/no | 窗口大小是否可调整
 
screenX | pixelvalue | 窗口距屏幕左边界的像素长度
 
screenY | pixelvalue | 窗口距屏幕上边界的像素长度
 
scrollbars | yes/no | 窗口是否可有滚动栏
 
titlebar | yes/no | 窗口题目栏是否可见
 
toolbar | yes/no | 窗口工具栏是否可见
 
Width | pixelvalue | 窗口的像素宽度
 
z-look | yes/no | 窗口被激活后是否浮在其它窗口之上

子窗口jsp代码[popup.jsp]：

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>用户注册界面</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="${pageContext.request.contextPath }/tsjs/jquery-1.11.1.js"></script>	
	<script type="text/javascript" src="${pageContext.request.contextPath }/tsjs/popup.js"></script>
  </head>
  <!-- overflow:滚动条 -->
  <body id="bodyid" style="overflow: scroll;">
  <center id="centerid">
  <!-- 欢迎语显示 -->
  	<div id="welcomto"></div><br />
  	<div id="userreg">
  	 <form id="userregform">
  		<table id="tbuserreg" width="150" border="0" cellpadding="0" cellspacing="0">
  			<tr>
  				<td width="30">user:</td>
  				<td width="70">
  					<input id="userreg" name="userreg" type="text" maxlength="8" size="15" />
  				</td>
  				<td width="50"><div id="userregmsg" style="color: red;"></div></td>
  			</tr>
  			<tr>
  				<td width="30">pass:</td>
  				<td width="70">
  					<input id="passreg" name="passreg" type="password" maxlength="12" size="15" />
  				</td>
  				<td></td>
  			</tr>
  			<tr>
  				<td width="30">name:</td>
  				<td width="70">
  					<input id="namereg" name="namereg" type="text" maxlength="12" size="15" />
  				</td>
  				<td></td>
  			</tr>
  			<tr>
  				<td colspan="2" align="right">
  					<input id="regbt" name="regbt" type="button" value="reg">
  				</td>
  			</tr>
  		</table>
  	 </form>
  	</div>
  </center>
  </body>
</html>

子窗口js代码[popup.js]：

$(document).ready(function(){
	//window.opener表示打开子窗口的父(主)页面
	var parentHtml = window.opener;
	//父页面给子页面传值，也可以用url传参 eg:"url?id="+id; 父  -> 子[交互]
	if(parentHtml != null){
		var wlstr = parentHtml.document.getElementById("maintochildwidow").value;
		$("#welcomto").html("<span style=\"color:blue;\">"+wlstr+"</span>");
	}
	//获取弹框页面内容的高度
	var htmlheight = document.body.clientHeight;
	//获取弹框页面内容的宽度
	var htmlwidth = document.body.clientWidth;
	//用户内容大小，大于弹框大小，显示滚动条
//	alert(htmlheight+"*"+htmlwidth);
	if(htmlheight < 350){
		$("#bodyid").css("overflow-y","hidden");
	}
	if(htmlwidth < 500){
		$("#bodyid").css("overflow-x","hidden");
	}
	if(htmlheight <= 350 && htmlwidth <= 500){
		$("#bodyid").css("overflow","hidden");
	}
	//注册
	$("#regbt").click(function(){
		$("#regbt").attr("disabled",true);
		$.ajax({
			url:"user.do?param=reg",
			type:"post",
			data:$("#userregform").serialize(),
			timeout:20000,
			success:function(data){
				//保存后台返回数据到父界面popupmain.jsp   子  -> 父[交互]
				window.opener.document.getElementById("returnreginfo").value = data;
				//调用父界面的js方法,setUser(),自动填写用户名
				window.opener.setUser();
				//关闭弹框子界面
				window.close();
			},
			error:function(){
				$("#centerid").html("<div style=\"color: red;\">不好意思，由于……，您注册失败,请关闭页面,点击重新注册...<div>");
			}
		});
	});
});

struts1configuration[struts-config.xml]配置：

<action path="/user"  parameter="param"  scope="request" 
  	type="com.ts.actions.UserRegAndLoginAction">
  		<forward name="success" path="/tsjsp/popupmain.jsp"></forward>
  	</action>

后台处理类[UserRegAndLoginAction]：

package com.ts.actions;

import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.log4j.Logger;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import org.apache.struts.actions.DispatchAction;

 /**
 * ClassName: UserRegAndLoginAction <br/>
 * Description: TODO <br/>
 * Date: 2015-1-22 下午05:09:23 <br/>
 * <br/>
 * 
 * @author yptian@aliyun.com
 * 
 * first made 
 * @version 0.0.1<br/>
 * 
 */

public class UserRegAndLoginAction extends DispatchAction {
    private static final Logger LOG = Logger.getLogger(UserRegAndLoginAction.class);
    //db
    private static Map<String, User> userMap = new HashMap<String, User>();
    //reg
    public ActionForward reg(ActionMapping mapping, ActionForm form, HttpServletRequest request,
            HttpServletResponse response) throws Exception {
        String userId = request.getParameter("userreg");
        String userPass = request.getParameter("passreg");
        String userName = request.getParameter("namereg");
        User user = new User();
        user.userId = userId;
        user.userPass = userPass;
        user.userName = userName;
        userMap.put(userId, user);
        LOG.info("user reg:"+userId+"***"+userPass+" - "+userName);
        response.setHeader("Cache-Control", "no-cache");
        response.setContentType("text/html");
        response.setCharacterEncoding("GBK");
        PrintWriter out = response.getWriter();
        out.print(userId);
        out.close();
        return null;
    }
    //login
    public ActionForward login(ActionMapping mapping, ActionForm form, HttpServletRequest request,
            HttpServletResponse response) throws Exception {
        String userId = request.getParameter("userlog");
        String userPass = request.getParameter("passlog");
        User user = userMap.get(userId);
        LOG.info("user reg:"+user.userId+"***"+user.userPass);
        LOG.info("user login:"+userId+"***"+userPass);
        if(userId.equals(user.userId) && userPass.equals(user.userPass)){
            response.setHeader("Cache-Control", "no-cache");
            response.setContentType("text/html");
            response.setCharacterEncoding("GBK");
            PrintWriter out = response.getWriter();
            out.print(user.userName);
            out.close();
        }
        return null;
    }
    //vo
    class User{
        public String userId;
        public String userPass;
        public String userName;
    }
}

系列效果图：

html5子菜单怎么设置 html子页面_php