Primero, descargamos el plugin desde su sitio web.
El archivo a modificar debe ser:
jquery.fancybox-1.3.4.js
Agregaremos la función myCustomCallback, la pondremos al final, después de la declaración de defaults:
//....
$.fn.fancybox.defaults = {
//...
};
/*=========================================================*/
$.fancybox.myCustomCallback = function(param) {
selectedOpts.customCallbackObject.proccessOperation(param);
};
/*========================================================*/
//...
Crearemos nuestros ejemplos usando jquery en su versión actual, aunque la que viene con fancybox también sirve.
Código de la ventana padre:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Parent Window</title>
<script type="text/javascript" src="./jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
$(document).ready(function(){
var myRefObject = {};
myRefObject.proccessOperation = function(param){
SetContainer(param);
};
$(".fancybox-iframe").fancybox({
'type': 'iframe',
'customCallbackObject': myRefObject
});
});
function SetContainer(param)
{
$("#container").append("<p><strong>" + param + "</strong></p>");
}
</script>
</head>
<body>
<div class="">
<a href="ChildWindow.html" class="fancybox-iframe">
Mostrar página hija en un iframe
</a>
</div>
<div id="container">
</div>
</body>
</html>
Código de la ventana que será levantada en un iframe:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Child Window</title>
<script type="text/javascript">
function SendMessageToParentWindow()
{
var message = document.getElementById("txtMessage").value;
parent.$.fancybox.myCustomCallback(message);
}
</script>
</head>
<body>
<div class="">
<label for="txtMensaje">Escribe un texto</label>
<input type="text" id="txtMessage" />
</div>
<div>
<a href="javascript:SendMessageToParentWindow()">
Enviar mensaje a la página padre
</a>
</div>
</body>
</html>
Lo que hacemos es enviarle la referencia(los objetos son tipos de referencia) al objeto myRefObject que sí tiene acceso al método SetContainer() y por tanto lo ejecuta.
Captura:
No hay comentarios:
Publicar un comentario