hello world在jointjs的html中無法正常工作？

我是html和joint.js庫的初學者。我有這個代碼，並且一旦我將它作爲html保存在我的筆記本電腦上，假設繪製2個連接的矩形，但瀏覽器中沒有任何內容出現。我下載了許多庫，並將它們放在具有html頁面的文件夾中，但沒有出現任何內容。hello world在jointjs的html中無法正常工作？

我想要做什麼？我在哪裏可以把我想要在html代碼中使用的庫？

，我下載的庫是：

Backbone.js的
core.js
geometry.js
joint.all.css
joint.all.js
joint.all.min.css
joint.all.min.js
joint.css
joint.dia.cell.js
joint.dia.element.js
joint.dia.graph.js
joint.dia.link.js
joint.dia .paper.js
joint.js
joint.min.css
joint.min.js
joint.shapes.devs.js
joint.shapes.devs.min.js
joint.shapes.erd.js
joint.shapes.erd.min.js
joint.shapes.fsa.js
joint.shapes。 fsa.min.js
joint.shapes.org.js
joint.shapes.org.min.js
的jquery.js
jquery.sortElements.js
lodash.js
拉斐爾-min.js
raphael.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>

感謝所有的你.. 該計劃後，我現在的工作將庫的來源改爲網站網址。如果我使用，我在我的電腦上下載的，一旦它不能再工作：

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

來源

2014-01-22 Nada

檢查，如果被加載JavaScript文件中，並沒有在加載它的錯誤。只需在瀏覽器中點擊F12，然後查看控制檯，如果在加載javascript時沒有找到它的位置，則通常應該會出現錯誤。 – Gjohn

hello @Gjohn：我的筆記本電腦是mac>我應該按哪個按鈕？ – Nada

你在safari中運行網站嗎？你使用的是什麼瀏覽器？如果您使用Safari瀏覽器，請按照以下步驟啓用開發菜單http://macs.about.com/od/usingyourmac/qt/safaridevelop.htm。一旦你啓用它選擇顯示錯誤控制檯並刷新您的網站 – Gjohn

注意，你並不需要以下兩個文件在你的榜樣：

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

問題必須在於您如何引用這些文件，一旦將它們下載到您的計算機。看到

來源

2014-01-23 18:54:23 dave

非常感謝@dave我感謝你的回答..我想問你是否有關於JointJS或任何材料的明確文件來理解功能？我對這個圖書館非常感興趣，主要是它會幫助我學習項目。 – Nada

@Nada，JointJS的API被記錄在這裏：http://jointjs.com/api，教程和入門指南是在這裏：http://jointjs.com/tutorial，您還可以從的源代碼學習演示：http://jointjs.com/demos。有關進一步信息的討論在這裏：https://groups.google.com/forum/#!forum/jointjs和StackOverflow：http://stackoverflow.com/questions/tagged/jointjs。 – dave

hello world在jointjs的html中無法正常工作？

回答

相關問題