词条统计
浏览次数:10064 次
编辑次数:7次 历史版本
最近更新:2013/6/20
创建者:掷鸡蛋者


为了不离开当前页面,有时候我们需要让一个链接的内容显示在弹出的窗口中:

 

在上面的图中,我们点击了左侧的“添加分类”链接,然后网页中弹出一个窗口。

要实现这个效果也很简单,只要给链接加上一个属性即可。

 

将链接的class属性的值设为 frmBox ,则 wojilu ajax framwork 异步请求链接网址,然后将内容在弹出窗口中显示。

请注意上图的html代码,您会发现除了class="frmBox"属性之外,我们还添加了一个title属性。这个属性其实对应着弹窗的标题。如果没有这个属性,您看到的效果就是:

注意到了弹窗的区别吗?弹窗的标题是一般性的“对话窗口”,而不是“添加分类”等具体内容。

关闭这个弹窗。如果您给“分类列表”也加上属性 class="frmBox", 再点击效果是这样的:

 

您还可以在这个列表弹窗中继续操作,比如点击其中的“修改”或“删除”链接。

控制弹窗的大小

如果想控制弹窗的大小,只需要继续添加两个属性xwidth/xheight


 

wojilu framework 从1.7开始,因为支持无限级弹窗嵌套,所以针对父页面和父窗口的操作有所变动,说明请参考下面文字,演示和代码请参考此处:
http://www.wojilu.com/Demo/Valid/Box.aspx 

------------------------ 高级话题 -----------------------------------

【获取父页面(或父窗口)】

因为wojilu的弹窗支持无限级弹窗(效果见 http://www.wojilu.com/Demo/Box/NBox.aspx ),所以,经常需要在弹窗中获取父页面(或父窗口),方法是——

//得到父窗口
var p = wojilu.tool.getBoxParent();

【关闭弹窗】

两种方式——
1)客户端js控制。在弹窗中js来关闭。注意:弹窗不可以自己关闭自己,必须通过父页面(或父窗口)来关闭

var p = wojilu.tool.getBoxParent();
p.wojilu.ui.box.hideBox();

2)服务端关闭。一般通过 echoToParent 和 echoToParentPart 方法,这两个方法都会在关窗之前出现信息提示。具体用法见下面说明。

【关闭并刷新父页面

在服务器端cs代码中,通过框架提供的方法操作:
     echoToParent( "提示信息" ); // 效果:在弹窗中显示提示信息,然后关闭弹窗,并刷新父页面。
     echoToParent( "提示信息", url ); // 效果:在弹窗中显示提示信息,然后关闭弹窗,并让父页面跳转到指定url。

关闭并刷新父窗口】

因为 echoToParent 会引起整页刷新,如果仅仅想刷新父窗口,而不是刷新整个页面,请使用 echoToParentPart( msg ) 方法


【让弹窗和父页面交互】

1)将弹窗中的值返回到父页面
参考此处的演示代码和说明:
http://www.wojilu.com/Demo/Valid/BoxReturn.aspx 

2)调用父页面的 js 方法
比如父页面中的 js 方法这样:
   function myFunc( str ) {
alert( str );
   }
那么,在弹窗中写js调用就是:
var p = wojilu.tool.getBoxParent();
p.myFunc( "你好" );
【注意】调用父页面方法的时候,不能传递dom元素,但能够传递字符串、整数、json对象等。