代码之家  ›  专栏  ›  技术社区  ›  graham.reeds

打开从Raphael节点到lightbox的链接

  •  2
  • graham.reeds  · 技术社区  · 14 年前

    我正在使用 fancybox

    我需要打开一个 raphael 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",
            });
        },
    ...
    

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

    但都没用。链接总是作为新链接打开,而不是在花式方框中。

    1 回复  |  直到 14 年前
        1
  •  1
  •   graham.reeds    14 年前

    修好了。

    我没有使用href属性,而是直接从该节点的onclick处理程序中调用了fancybox,得到以下结果:

        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");
            }
        };
    

    真管用!