javascript - 你好世界不能在带有jointjs的html中正常工作？

Question

我是 html 和 joint.js 库的初学者。我有这段代码，一旦我将它保存为 html 在我的笔记本电脑上，它应该绘制 2 个连接的矩形，但浏览器中没有出现任何内容。我下载了许多库并将它们放在具有 html 页面的同一个文件夹中，但也没有出现任何内容。

我该怎么办？我可以将我想在 html 代码中使用的库放在哪里？

我下载的库是：

骨干.js
核心.js
几何.js
联合.all.css
联合.all.js
联合.all.min.css
联合.all.min.js
联合.css
联合.dia.cell.js
联合直径元素.js
联合直径图.js
联合.dia.link.js
联合.dia.paper.js
联合.js
联合.min.css
联合最小.js
关节.shapes.devs.js
关节.shapes.devs.min.js
关节形状.erd.js
关节形状.erd.min.js
关节形状.fsa.js
关节形状.fsa.min.js
关节形状.org.js
关节形状.org.min.js
jQuery.js
jquery.sortElements.js
lodash.js
raphael-min.js
拉斐尔.js

矢量化器.js

<link rel="stylesheet" type="text/css" href="joint.css" />
<script type="text/javascript" src="joint.js" ></script>    
<script type="text/javascript">

$(function() {    
    var graph = new joint.dia.Graph;

    var paper = new joint.dia.Paper({
         el: $('#myholder'),
         width: 600,
         height: 200,
         model: graph
    });

    var rect = new joint.shapes.basic.Rect({
         position: { x: 100, y: 30 },
         size: { width: 100, height: 30 },
         attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
    });

    var rect2 = rect.clone();
    rect2.translate(300);

    var link = new joint.dia.Link({
         source: { id: rect.id },
         target: { id: rect2.id }
    });
       graph.addCells([rect, rect2, link]);
})           
</script>


<div id="myholder" >
</div>

感谢你们所有人.. 在我将库的来源更改为网站 URL 后，该程序现在正在运行。如果我使用我在计算机上下载的一次，它就不能再工作了：

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script src= "http://denknix.com/astro/lib/joint/www/build/joint.all.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.jointjs.com/downloads/joint.css" />
<script type="text/javascript" src="http://www.jointjs.com/downloads/joint.js" ></script>   
<script type="text/javascript">
    $(function() {

        var graph = new joint.dia.Graph;

        var paper = new joint.dia.Paper({
             el: $('#myholder'),
             width: 600,
             height: 200,
             model: graph
        });

        var rect = new joint.shapes.basic.Rect({
             position: { x: 100, y: 30 },
             size: { width: 100, height: 30 },
             attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
        });

        var rect2 = rect.clone();
        rect2.translate(300);

        var link = new joint.dia.Link({
             source: { id: rect.id },
             target: { id: rect2.id }
        });
graph.addCells([rect, rect2, link]);
    })     
    </script>

    <title>Test</title>

</head>
<body>

    <div id="myholder" >
    </div>

</body></html>

score 2 · Accepted Answer

请注意，您的示例中不需要以下两个文件：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script src= "http://denknix.com/astro/lib/joint/www/build/joint.all.min.js"></script>

这是因为 jQuery 已经包含在其中，joint.js而另一个joint.all.min.js是非常旧的 JointJS 版本（0.4）。

您只需要正确包含的其他两个文件：

<link rel="stylesheet" type="text/css" href="http://www.jointjs.com/downloads/joint.css" />
<script type="text/javascript" src="http://www.jointjs.com/downloads/joint.js" ></script>

问题必须出在将这些文件下载到计算机后如何引用它们。

javascript - 你好世界不能在带有jointjs的html中正常工作？

1 回答 1

Related

Reference