hello world在带有jointjs的html中无法正常工作？

Question

I am a beginner in html and the joint.js library. 我是html和joint.js库的初学者。 I have this code and once I saved it as html on my laptop, it is suppose to draw 2 connected rectangles but nothing appears in the browser. 我有这个代码，一旦我将它保存为我的笔记本电脑上的html，它假设绘制2个连接的矩形，但浏览器中没有任何内容。 I downloaded many libraries and put them in the same folder that has the html page but nothing appear too. 我下载了很多库，并将它们放在具有html页面的同一个文件夹中，但没有任何内容。

What am I suppose to do? 我该怎么办？ Where can I put the libraries that I want to use in html code? 我在哪里可以放置我想在html代码中使用的库？

The libraries that I downloaded are: 我下载的库是：

backbone.js Backbone.js的
core.js core.js
geometry.js geometry.js
joint.all.css joint.all.css
joint.all.js joint.all.js
joint.all.min.css joint.all.min.css
joint.all.min.js joint.all.min.js
joint.css joint.css
joint.dia.cell.js joint.dia.cell.js
joint.dia.element.js joint.dia.element.js
joint.dia.graph.js joint.dia.graph.js
joint.dia.link.js joint.dia.link.js
joint.dia.paper.js joint.dia.paper.js
joint.js joint.js
joint.min.css joint.min.css
joint.min.js joint.min.js
joint.shapes.devs.js joint.shapes.devs.js
joint.shapes.devs.min.js joint.shapes.devs.min.js
joint.shapes.erd.js joint.shapes.erd.js
joint.shapes.erd.min.js joint.shapes.erd.min.js
joint.shapes.fsa.js joint.shapes.fsa.js
joint.shapes.fsa.min.js joint.shapes.fsa.min.js
joint.shapes.org.js joint.shapes.org.js
joint.shapes.org.min.js joint.shapes.org.min.js
jquery.js 的jquery.js
jquery.sortElements.js jquery.sortElements.js
lodash.js lodash.js
raphael-min.js 拉斐尔-min.js
raphael.js raphael.js

vectorizer.js vectorizer.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>

Thanks to all of you .. The program is working now after I changed the source of the libraries to be website URLs. 感谢大家..在我将库的源代码更改为网站URL后，该程序正在运行。 If I use the once that I downloaded on my computer it does not work again : 如果我使用我在计算机上下载的那一次它再次不起作用：

<!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>

Answer 1

Note that you don't need the following two files in your example: 请注意，您的示例中不需要以下两个文件：

<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>

This is because jQuery is already included in joint.js and the other joint.all.min.js is a very old version of JointJS (0.4). 这是因为jQuery已经包含在joint.js ，而另一个joint.all.min.js是JointJS（0.4）的一个非常旧的版本。

You only need the other two files that you have correctly included: 您只需要正确包含的其他两个文件：

<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>

The problem must lie in how you reference those files once download them to your computer. 问题必须在于将这些文件下载到计算机后如何引用这些文件。

hello world在带有jointjs的html中无法正常工作？

问题描述

1 个解决方案

解决方案1
2 2014-01-23 18:54:23

hello world在带有jointjs的html中无法正常工作？

问题描述

1 个解决方案

解决方案1 2 2014-01-23 18:54:23

解决方案1
2 2014-01-23 18:54:23