如果你有一个 form page 比如 form.jsp 通过 initHandler forward ， 在不改或者很少改代码的前提下 如何变成 overlay 效果呢？
具体效果请 访问
http://flowplayer.org/tools/demos/overlay/external.html
实现过程 以简单demo 聚例
demo.jsp
<html>
<head>
<link rel="stylesheet" media="all" type="text/css" href="<c:url value="/resource/css/jquery/ui/overlay-minimal.css"/>" />
<script type="text/javascript" src="<c:url value="/resource/js/jquery/core/jquery-1.4.2.js"/>"></script>
<script src="<c:url value='/resource/js/jquery/customer/jquery.overlay.js'/>"></script>
<script type="text/javascript" src="<c:url value='/resource/js/jquery/customer/jquery.myOverlay.js'/>"></script>
<script type="text/javascript" src="<c:url value="/resource/js/jquery/customer/jquery.form.js"/>"></script>
<script type="text/javascript">
$(function(){
window.personalDoFunc=function(el){
$().myOverlay(el,function(record){
document.getElementById("mytest").innerHTML="返回的结果：name:"+record.name;
});
};
});
</script>
</head>
<body>
<a href="/personEdu/84" onclick="personalDoFunc(this)" >[Add]</a>
<a href="/personEdu/edit_form/157" onclick="personalDoFunc(this)">[Edit]</a>
<div id="mytest">返回的结果：</div>
</body>
</html>
其中 如果需要引用 overlay 需导入 两个 ovelay js 一个css 和jquery core 并且 如果需要form ajax submit 同时要引入 form.js
<link rel="stylesheet" media="all" type="text/css" href="<c:url value="/resource/css/jquery/ui/overlay-minimal.css"/>" />
<script type="text/javascript" src="<c:url value="/resource/js/jquery/core/jquery-1.4.2.js"/>"></script>
<script src="<c:url value='/resource/js/jquery/customer/jquery.overlay.js'/>"></script>
<script type="text/javascript" src="<c:url value='/resource/js/jquery/customer/jquery.myOverlay.js'/>"></script>
<script type="text/javascript" src="<c:url value="/resource/js/jquery/customer/jquery.form.js"/>"></script>
如果 你点击一个连接 本来应该是连接到 另一个 页面如
<a href="/personEdu/84" onclick="personalDoFunc(this)" >[Add]</a>
只要 加上自己定义函数 personalDoFunc（名字任意） 并且实现如下
<script type="text/javascript">
$(function(){
window.personalDoFunc=function(el){
$().myOverlay(el,function(record){
document.getElementById("mytest").innerHTML="返回的结果：name:"+record.name;
});
};
});
</script>
在自定义函数中 显示调用 $().myOverlay(el,callback)方法 其中 el为当前 <a>对象 第二个参数为回调函数 参数record 就是后台返回的对象数据
如例子中我的url 指向personEdu/84 则后台接受如下
@RequestMapping(value = "/{id}",method = RequestMethod.GET)
public String init(@PathVariable("id") Integer personId,Model model) {
PersonEdu personEdu=new PersonEdu();
personEdu.setPersonId(personId);
model.addAttribute("personEdu", personEdu);
return "edu/personEdu";
}
在不加 overlay情况下会跳转到一个 personEdu.jsp的页面 如果加上 就可把 当前页面 内嵌在overlay 的div中
personedu.jsp 中的片段代码
<input type="submit" name="save2" value="保存form Submit" onclick="doSubmit(this)"/>
<a overlay="{url:'/personEdu/overlay2'}"><input type="button" value="普通Ajax" name="overlayUrl"/></a>
两种方法列举了 form submit 和普通的 ajax 如果 普通的ajax 需要自定义 overlay属性 以json格式
后台接受
@RequestMapping(method = RequestMethod.POST)
@ResponseBody
public JsonData savePersonEdu(PersonEdu personEdu, Model model,HttpServletRequest request,HttpServletResponse response) throws JSONException {
Integer i=personEdu.getId();
if(i!=null&&i>0){
// this.personEduService.updatePersonEdu(personEdu);
}else{
// i=this.personEduService.addPersonEdu(personEdu);
}
return new JsonData(personEdu);
}
由于时间有限 不明细处望见谅啊 附件中有 overlay 源码 以及 效果图片
分享到：
相关推荐
本文讲述了如何解决 Docker 中的 overlay 和 overlay2 文件占用磁盘太大的问题，并提供了相应的解决方案。同时，文章也附带了 Docker 配置 overlay 存储驱动的前提条件和步骤。 一、 Docker 中的 overlay 和 ...
DICOM图像，overlay层，包含只有一层overlay，两侧overlay，overlay加原始图像三种DICOM图像。 不少DICOM开源框架对这种图像支持不够，显示有问题。便于测试系统对带有overlay图像的显示是否正确
其中，“主机Overlay”和“网络Overlay”是两种重要的网络部署方式，它们能够更好地支持虚拟化环境下的资源调度与隔离需求。本篇将深入探讨这两种Overlay技术的特点、工作原理及应用场景。 #### 二、主机Overlay *...
FPGA overlay是一种基于现场可编程门阵列（FPGA）的技术，它允许在一个FPGA上实现一个或多个不同的可配置硬件层，从而在用户逻辑中模拟出一种类似FPGA的行为。这种技术的出现，使得FPGA可以被重新编程以适应不同的...
"嵌入式Linux系统中Overlay文件系统的实现" 概述： 嵌入式Linux系统中Overlay文件系统的实现是指在嵌入式Linux系统中引入Overlay文件系统，以满足对系统软件的升级和对系统程序的维护需求。Overlay文件系统是指在...
在这个场景中，"Swift-Swift实现的全屏Overlay效果可以用来做一些前卫的设计"，我们将会探讨如何利用Swift来实现这种功能。 首先，理解Overlay的概念。Overlay通常是指一种覆盖在原界面之上的UI组件，它不改变原有...
overlay技术的工作原理是将一部分图形数据放在显示器的硬件层面上，这些硬件层通常位于主显示缓冲区之上，可以独立于主画面进行刷新。当需要显示动态内容，如视频播放或游戏画面时，overlay层会覆盖在主画面上，...
通常需要通过adb（Android Debug Bridge）将overlay推送到设备上，然后重启设备查看效果。如果有错误，可能需要使用logcat来诊断问题。 总的来说，"a870device的overlay参考"是泛泰A870设备定制化的一个关键部分，...
"前端项目-jquery-loading-overlay"就是这样一个专门用于创建灵活加载覆盖层的jQuery插件，它可以帮助我们轻松地为网页添加动态加载效果。 首先，jQuery Loading Overlay插件的核心功能是创建一个覆盖整个页面或者...
本文介绍OVerlay网络技术原理，从虚拟网络的发展，虚拟网络面临的挑战，overlay如果解决虚拟网络存在的问题，overlay网络的类型，Overlay的主流技术VXLAN的技术基础，报文结构等介绍。
在Windows Shell编程中，`overlay icon`是一种特殊的技术，它允许在文件或文件夹图标上显示一个小图标，通常用于指示状态或属性，如文件的版本控制状态、加密状态或者是否被修改过。`overlayicon`的代码主要是用来...
在这个例子中，overlay技术被用来将一个富文本控件放置在一个背景之上，使得背景图像或颜色与富文本内容结合，提供更丰富的视觉体验。 "OVERLAY.C"的代码可能涉及到以下几个关键点： 1. **窗口和控件创建**：代码...
在IT行业中，"overlay demo"很可能是指一种使用了overlay技术的示例项目。Overlay技术是一种在计算机网络和存储系统中广泛使用的技术，特别是在虚拟化环境中，例如容器化平台（如Docker和Kubernetes）和分布式文件...
"Overlay"在这里可能是指对PE文件进行特殊处理，使其能够支持overlay技术，使得程序在运行时可以动态加载非关键部分。 描述中提到的问题"修复脱壳后无法运行的程序.提示:invalid data in the file!"，这可能涉及到...
- **扩展虚拟机迁移范围**：通过Overlay技术将二层报文封装在IP报文之上，只要网络支持IP路由可达即可实现Overlay网络部署，从而解决了虚拟机迁移范围受限的问题。 - **扩大虚拟机规模**：Overlay技术通过提高MAC...
### SPM多重overlay方法详解 #### 一、概述 SPM (Statistical Parametric Mapping) 是一种广泛应用于神经影像学领域的统计分析工具包，主要用于处理和分析功能性磁共振成像(fMRI)数据、正电子发射断层扫描(PET)...
集成Spring Boot的目的是利用其自动化配置、内嵌Web服务器和微服务支持等特性，简化CAS服务器的部署和管理。Spring Boot以其对Spring框架的深度整合和开箱即用的特性，使得构建基于Spring的应用变得更加简单，尤其...