jBox列表界面和新增/修改页面的传值,以及关闭iframce

最新推荐文章于 2024-08-10 07:55:37 发布

原创最新推荐文章于 2024-08-10 07:55:37 发布 · 6.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#api #jbox close contentDo

JavaScript 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何使用jBox插件实现按钮和滚动条的隐藏，并演示了如何在不同页面间传递值以及关闭jBox后刷新列表页面的方法。同时强调了理解JavaScript中window、parent等属性的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、API

熟悉一个插件的最简单，且最快捷的方式当然是找到作者的API,而jBox的API:http://www.5imvc.com/scripts/jbox/jbox-demo.html

二、设置jBox上的按钮消失和jBox滚动条消失

$.jBox("iframe:"+url, { 
		    title: "工点信息新增/修改", 
		    width: 500, 
		    height: 320, 
		    buttons: {},  //为了不出现底部的按钮这里特别要这样填写
		    closed: function(){  //关闭时发生，为了刷新父级页面
		    	search();
		    },
		    loaded : function(h) {   //隐藏滚动条
		    	$(".jbox-content", top.document).css( "overflow-y", "hidden"); 
		    }
		});

三、设跨页面传值并关闭页面后刷新列表页面

列表界面

列表界面要定义一个全局的变量chkConstructionId

$.jBox("iframe:"+url, { 
					    title: "工点信息新增/修改", 
					    width: 500, 
					    height: 320, 
					    buttons: {},  //为了不出现底部的按钮这里特别要这样填写
					    closed: function(){  //关闭时发生，为了刷新父级页面
					    	search();
					    },
					    loaded : function(h){ //隐藏滚动条
					    	$(".jbox-content", top.document).css( "overflow-y", "hidden");
					    	//  ConstructionAdd_id为表单的id
					    	// 页面传值
					    	//ConstructionAdd_id是新增/修改页面中文本框内唯一的id //chkConstructionId要传递的值

					    	h.find("iframe")[0].contentDocument.ConstructionAdd_id.value=chkConstructionId;
					    }
					});

新增/修改页面

	$(document).ready(function(){
		//得到拿到list界面中的全局变量
		var id=window.parent.chkConstructionId;
		$("#ConstructionAdd_id").val(id);
		if(id!="" && id!=null){
			getConstruction(id); //调用ajax初始化内容
		}
	});

关闭jBox

window.parent.window.jBox.close();

最后的结语:

jBox最后，我们还是要充分了解js中的window，parent，contentDocument，top属性，这对于我们做js游刃有余