Открытие ссылки с узла Рафаэля в лайтбокс - PullRequest
Новая
       13

Открытие ссылки с узла Рафаэля в лайтбокс

2 голосов
/ 10 сентября 2010

Я использую 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, который объявлен после: 

<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 Ответ

1 голос
/ 10 сентября 2010

Исправлено.

Вместо использования атрибута 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");
        }
    };

Что работает!

...