javascript - ¿Hay un ejemplo simple pero útil de jquery.JsPlumb?
jquery-ui (2)
Intenta agregar esto justo antes de la etiqueta de cabecera de cierre ...
<style type="text/css">
#container0, #container1 {
float: left;
height: 100px;
width: 100px;
border: 1px solid black;
margin: 10px;
}
</style>
Durante la última semana he estado buscando algunas bibliotecas javascript de visualización de gráficos y me he topado con jsPlumb , que es a juzgar por los ejemplos que he visto, la biblioteca más atractiva y avanzada que he visto hasta ahora. La documentación, aunque es bastante grande, no es muy útil ya que no puedo descubrir cómo realizar las tareas más esenciales.
Mi lista de preguntas incluye:
- ¿Cómo le digo a la gráfica que use elementos predefinidos del árbol DOM?
- ¿Qué parte de estos elementos se mostrarán?
- Mientras que hacer conexiones es fácil, ¿cómo defino la alineación?
Si bien estas preguntas permanecen, hay algunos ejemplos, pero o bien son muy sencillos de usar (vea el ejemplo 1), o son tan complejos que incluso se recuperan (la descarga no es un problema, pero no lo hago). Realmente quiero analizar todo antes de jugar con alguna biblioteca ...) el código es al menos imposible para mí (vea https://github.com/sporritt/jsPlumb/tree/master/demo ).
Ejemplo 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>
Lo que resulta en
¿Puede alguien darme un ejemplo que responda a mis preguntas?
Gracias por adelantado.
No hay nada de malo en lo que tienes allí, pero tus divs no tienen estilo y no están posicionados.
Yo sugeriría posicionarlos absolutos, darles a cada uno una parte superior / izquierda, y quizás un borde, y verás algo un poco más útil.