您的位置：首页 > Web前端 > JavaScript

JsPlumb 基本使用方法( JsPlumb & JQ ContextMenu & JQ Dialog)

2015-07-25 15:51 656 查看

1. JQ contextmenu 在JQ dialog 上面 由于index 问题 导致 contextmenu 显示不出来

2. JsPlumb 在IE 上动态生成 oval 标签 并不生成ID,在 FF Chrome上动态生成 canvas 标签并生成随机ID, 这就导致不能通过ID来获取这个控件, 在jsplumb.js中 唯一固定的是 class name , 并且 jsplumb 提供 click,dbclick 两个

3.暂时还没有办法动态的给connector 添加 contextmenu (由于connector 是动态生成的,用户手动控制EndPoint 时生成connector,并且会调用jsPlub的setConnector 方法 生成 JsPlumb Connector)

Google 演示页面参考:http://jsplumb.org/jquery/draggableConnectorsDemo.html

File Source below:

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<script src="../../Scripts/jquery-1.4.4.min.js"></script>

<script src="../../Scripts/jquery-ui.min.js"></script>

<script src="../../Scripts/jquery.contextmenu.r2.packed.js"></script>

<script src="../../Scripts/jquery.jsPlumb-1.3.2-all-min.js"></script>

<style>

._jsPlumb_endpoint

{

z-index: 50;

cursor: move;

}

.window

{

border: 1px solid #346789;

-moz-border-radius: 0.5em;

border-radius: 0.5em;

opacity: 0.8;

filter: alpha(opacity=80);

width: 5em;

height: 5em;

line-height: 5em;

text-align: center;

z-index: 20;

position: absolute;

background-color: #eeeeef;

color: black;

font-family: helvetica;

padding: 0.5em;

font-size: 0.9em;

}

.window:hover

{

box-shadow: 2px 2px 19px #444;

-o-box-shadow: 2px 2px 19px #444;

-webkit-box-shadow: 2px 2px 19px #444;

-moz-box-shadow: 2px 2px 19px #444;

opacity: 0.6;

filter: alpha(opacity=60);

}

#w1

{

top: 20em;

left: 10em;

}

#w2

{

top: 5em;

left: 10em;

}

</style>

</head>

<body>

<!-- background page-->

<div id="mainContent" style="background-color: #aaaaaa; width: 1000px; height: 700px;

filter: alpha(opacity=20);">

backgroud color

<div id="showDialog">

Show dialog</div>

<div class="ui-resizable-handle ui-resizable-w">

ui-resizable-handle ui-resizable-w

</div>

<canvas contextmenu="contextMenu">testats contentmenu</canvas>

</div>

<!--Dialog Page-->

<div id="demo" style="background-color: yellow;" title="Dialog Window">

<input type="button" value="Create Canvas" onclick="CreatePoint()">

<div class="window" id="w1">

w 1</div>

<div class="window" id="w2">

w 2</div>

<!--Contextmenu -->

<div class="contextMenu" id="myMenu1">

<ul>

<li id="open">

<img src="folder.png" />

打开</li>

<li id="email">

<img src="email.png" />

邮件</li>

<li id="save">

<img src="disk.png" />

保存</li>

<li id="delete">

<img src="cross.png" />

关闭</li>

</ul>

</div>

<div class="contextMenu" id="menuBody">

<ul>

<li id="body1">

<img src="folder.png" />

Body Open</li>

<li id="body2">

<img src="email.png" />

Body 邮件</li>

<li id="body3">

<img src="disk.png" />

Body 保存</li>

<li id="body4">

<img src="cross.png" />

Body 关闭</li>

</ul>

</div>

<div class="contextMenu" id="menuLine">

<ul>

<li id="line1">

<img src="folder.png" />

Line Open</li>

<li id="line2">

<img src="email.png" />

Line 邮件</li>

<li id="line3">

<img src="disk.png" />

Line 保存</li>

<li id="line4">

<img src="cross.png" />

Line 关闭</li>

</ul>

</div>

</div>

<script>

// when page load ready , run this function

$(function () {

jsPlumb.bind("ready", function () {

jsPlumb.setRenderMode(jsPlumb.CANVAS);

jsPlumb.setMouseEventsEnabled(true);

jsPlumb.Defaults.Connector = ["Flowchart", { stub: 40}]; jsPlumb.Defaults.PaintStyle = { lineWidth: 2, strokeStyle: "#888888", joinstyle: "round" };

var shapeTopEndPoint = {

isSource: true,

hoverPaintStyle: { lineWidth: 2, strokeStyle: "#000000" },

connectorHoverStyle: { lineWidth: 2, strokeStyle: "#000000" },

paintStyle: { fillStyle: "#225588", radius: 5 },

dropOptions: { tolerance: "touch", hoverClass: "dropHover" },

anchor: "TopCenter"

};

var shapeBottomEndPoint = {

isTarget: true,

hoverPaintStyle: { lineWidth: 2, strokeStyle: "#000000" },

connectorHoverStyle: { lineWidth: 2, strokeStyle: "#000000" },

paintStyle: { fillStyle: "#225588", radius: 5 },

dropOptions: { tolerance: "touch", hoverClass: "dropHover" },

anchor: "BottomCenter",

};

var e11 = jsPlumb.addEndpoint("w1", { uuid: "w1_T" }, shapeTopEndPoint);

var e21 = jsPlumb.addEndpoint("w2", { uuid: "w2_B" }, shapeBottomEndPoint);

var c1 = jsPlumb.connect({ uuids: ["w1_T", "w2_B"], paintStyle: { dashstyle: "4 2", strokeStyle: "#888888", lineWidth: 2} });

//find connector and set to the contextmenu

$("._jsPlumb_connector ").contextMenu('menuLine', //目前使用id 不能找到这个connection,只能通过样式找到,另外必须使用 jsPlumb.setRenderMode(jsPlumb.SVG); //svg 兼容contextmenu SVG模式才能够在IE ,FF,Chrome中显示出右键

{

bindings:

{

'line1': function (t) {

alert('Trigger was ' + t.id + '\nAction was Open');

},

'line2': function (t) {

alert('Trigger was ' + t.id + '\nAction was Email');

},

'line3': function (t) {

alert('Trigger was ' + t.id + '\nAction was Save');

},

'line4': function (t) {

alert('Trigger was ' + t.id + '\nAction was Delete');

}

}

}, function (re) { });

$("#w2").contextMenu('myMenu1',

{

bindings:

{

'open': function (t) {

alert('Trigger was ' + t.id + '\nAction was Open');

},

'email': function (t) {

alert('Trigger was ' + t.id + '\nAction was Email');

},

'save': function (t) {

alert('Trigger was ' + t.id + '\nAction was Save');

},

'delete': function (t) {

alert('Trigger was ' + t.id + '\nAction was Delete');

}

}

});

$("#demo").contextMenu('menuBody',

{

bindings:

{

'body1': function (t) {

alert('Trigger was ' + t.id + '\nAction was Open');

},

'body2': function (t) {

alert('Trigger was ' + t.id + '\nAction was Email');

},

'body3': function (t) {

alert('Trigger was ' + t.id + '\nAction was Save');

},

'body4': function (t) {

alert('Trigger was ' + t.id + '\nAction was Delete');

}

}

});

});

});

//auto open the dialog window

$(function () {

$("#dialog:ui-dialog").dialog("destroy");

$("#demo").dialog({

height: 540,

width: 800,

modal: true,

zindex: 100,

buttons: [

{

text: " Close ",

click: function () { $(this).dialog("close"); }

}]

});

});

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航