jquery ui 的拉斐尔行为

Question

我正在尝试使用 Raphael 和 jQuery UI。我的问题的一个非常简单的例子涉及一个简单的按钮，它打开一个 jQuery 对话框。

在该对话框中，我正在使用 Raphael 纸从数组中绘制文本列表，并覆盖一些分配有点击事件的透明矩形。

我不知道如何为这个例子创建一个 jsfiddle，因此在下面粘贴我的代码。

首先，html部分：

<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.theme.min.css"/>
    <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.11.3.min.js"></script>
    <script type="text/javascript" src="js/raphael-2.1.2.min.js"></script>
    <script type="text/javascript" src="js/jscode.js"></script>
</head>
<body>
<div><button id="fireit">Open</button></div>
<div id="content"></div>
</body>
</html>

接下来，jscode.js部分：

$( function() {

    $("#content").dialog({
        position: {my: "left top", at: "left+5px top+40px", of: window},
        title: "A title",
        width: 350,
        height: 375,
        resizable: false,
        closeOnEscape: true,
        autoOpen: false
    });

    var paper_content = Raphael("content", 300, 30);
    var info = ["foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo"];

    paper_content.setStart();
    var texts = paper_content.setFinish();

    function print_texts() {
        texts.remove();
        var i;
        var row = 10;

        paper_content.setStart();

        for (i = 0; i < info.length; i++) {
            paper_content.text(25, row, info[i])
                .attr({'text-anchor': 'start', 'font-size': '14px'});
            row += 20;     
        }

        row = 10;
        var somerect;

        for (i = 0; i < info.length; i++) {
            somerect = paper_content
                .rect(5, row - 10, 500, 20)
                .attr({fill: "#acadea", 'stroke-opacity': '0.5', 'fill-opacity': 0.5});
            somerect.id = i;
            somerect.click(function() {
                alert(info[this.id]);
            })
            row += 20;
        }

        texts = paper_content.setFinish();
    }

    $("#fireit").click(function() {
        print_texts();
        $(paper_content.canvas).height(texts.getBBox().height + 20);
        $("#content").dialog("open");
    })
});

点击函数触发 print_texts() 函数，由于 Raphael 打印的内容比纸高，纸 canvas 被调整大小。

按下按钮时出现问题：Raphael 打印的文本不在应有的位置...！

第二次单击该按钮会奇迹般地以正确的顺序排列它们。

现在的问题是：我该如何克服这个问题？我需要从第一次点击开始就得到正确的顺序。

在此先感谢您的任何提示，阿德里安

Answer 1

和往常一样，一旦得到一个最小的例子，答案就会自动弹出。重点是首先打开对话框，然后才打开运行其他说明：

$("#fireit").click(function() {
    $("#content").dialog("open");
    print_texts();
    $(paper_content.canvas).height(texts.getBBox().height + 20);
})

jquery ui 的拉斐尔行为

raphael behavior with jquery ui

raphael

jquery-ui-dialog