Есть ли простой, но полезный jquery.Пример JsPlumb? [закрытый]

на прошлой неделе я искал некоторую javascript-библиотеку визуализации графа, и я наткнулся на jsPlumb, что, судя по примерам, которые я видел, самая красивая и самая продвинутая библиотека, которую я видел до сих пор. Документация, будучи довольно большой, не очень полезна, поскольку я не могу понять, как на самом деле выполнять самые важные задачи.

мой список вопросов включает в себя:

  • как мне сказать графику использовать предопределенные элементы DOM-дерева?
  • какая часть этих элементов будет отображаться?
  • пока делать соединения легок, как я определяю выравнивание?

пока эти вопросы остаются, есть несколько примеров, но либо они просты, чтобы быть полезными (см. Пример 1), либо они настолько сложны, что даже получение(ну, загрузка не проблема, но я действительно не хочу анализировать все, прежде чем играть с некоторой библиотекой...) код, по крайней мере, для меня невозможен (см. https://github.com/sporritt/jsPlumb/tree/master/demo).

Пример 1

 <head>
  <script type="text/javascript" 
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
  </script>
  <script type="text/javascript" 
     src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js">
  </script>
  <script type="text/javascript" 
     src="PATH_TO/jquery.jsPlumb-1.3.15-all-min.js ">
  </script>
  <script type="text/javascript">
     jsPlumb.bind("ready", function() {
        var e0 = jsPlumb.addEndpoint("container0"),
        e1 = jsPlumb.addEndpoint("container1");

        jsPlumb.connect({ source:e0, target:e1 });
     });
 </script>
 </head>
 <body>
   <div id="container0">
   </div>
   <div id="container1">
   </div>
 </body>

что приводит к Screenshot of Example 1

кто может дать мне пример, который отвечает на мои вопросы?

спасибо заранее.

20
javascript jquery jquery-ui jsplumb

2 ответов

попробуйте добавить перед закрывающим тегом head ...

<style type="text/css">
    #container0, #container1 {
        float: left;
        height: 100px;
        width: 100px;
        border: 1px solid black;
        margin: 10px;
    }
</style>
15

нет ничего плохого в том, что у вас есть, но ваши дивы не имеют стиля и не расположены.

Я бы предложил позиционировать их абсолютными, дать им каждый сверху / слева и, возможно, границу, и вы увидите что-то более полезное.

3