`
netskys
  • 浏览: 47711 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

内嵌url 的 overlay 支持form 的ajax 提交，随意将普通网页变成overlay效果

AjaxJavaJSPjQueryjson 
阅读更多
如果你有一个 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 源码 以及 效果图片
分享到：
| extend jquery validate myValidate 表单验 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics