2010-09-10 54 views
2

我为灯箱需要使用fancybox打开从拉斐尔节点到灯箱的链接

我需要打开一个raphael元素的链接(在此演示中,a circle)。

通常你会创建一个链接和风格它像这样:

<a id="test" href="ajax.html">Click Me</a></li> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('#test').fancybox({ 
     'width'   : '75%', 
     'height'   : '75%', 
     'autoScale'  : false, 
     'transitionIn' : 'none', 
     'transitionOut' : 'none', 
     'type'   : 'iframe' 
    }); 

要东西的圈子是在它自己的JavaScript文件,该文件是的fancybox后宣布复杂的是:

<script src="./fancybox/jquery.fancybox-1.3.1.pack.js" type="text/javascript"></script> 
<script src="demo02.js" type="text/javascript" charset="utf-8"></script> 

删节版本的demo02.js看起来像:

var Demo = { 
    initialize: function() { 
     var dim = this.getWindowDimensions(); 
     this.paper = Raphael("canvas", dim.width, dim.height); 
     // set events 
     (document.onresize ? document : window).onresize = function() { 
      Demo.resize(); 
     } 

     // add circle 
     var circle = this.paper.circle(150, 120, 100); 
     circle[0].style.cursor = "pointer"; 
     circle.attr({ 
      fill: "green", 
      stroke: "#333", 
      "stroke-width": 10, 
      href: "ajax.html", 
     }); 
    }, 
... 

所以我尝试了几种方式e链接。一个天真的尝试是简单地将测试的id添加到attr。

我也试过如下:

$(circle.node).fancybox({ 
$('circle.node').fancybox({ 
$('#circle.node').fancybox({ 
$('#canvas.circle.node').fancybox({ 
$('#Demo.circle.node').fancybox({ 

,没有他们的工作。该链接始终作为新链接打开,而不是花哨框。

我在做什么错,我需要做些什么来纠正它?

回答

1

修正了它。

除了使用href属性的,我直接调用的fancybox从onclick处理程序中的节点给我这个:

var circle = this.paper.circle(150, 120, 100); 
    circle[0].style.cursor = "pointer"; 
    circle.attr({ 
     fill: "green", 
     stroke: "#333", 
     "stroke-width": 10, 
    }); 
    circle.node.onclick = function() { 
     $.fancybox({ 
      'href'   : 'ajax.html', 
      'width'   : '75%', 
      'height'  : '75%', 
      'autoScale'  : false, 
      'transitionIn' : 'none', 
      'transitionOut' : 'none', 
      'type'   : 'iframe' 
     }); 

     if (circle.attr("fill") == "red") { 
      circle.attr("fill", "green"); 
     } else { 
      circle.attr("fill", "red"); 
     } 
    }; 

其中一期工程!