程序博客网 > 网络加速器哪个好用

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

来源：互联网 发布：网络加速器哪个好用 编辑：程序博客网 时间：2024/05/29 17:04

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>


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

0 0
网络加速器哪个好用 网络加速器哪个好用
原创粉丝点击
热门IT博客
淘宝客挣钱吗淘宝客挣钱吗
天猫淘宝全屏海报尺寸天猫淘宝全屏海报尺寸
1010软件怎么用
淘宝新开企业店铺骗局
nginx ssl 泛域名
易语言qq加好友源码
淘宝店铺装修店招
php将json转换成数组
最新淘宝店铺装修教程
虚拟机ubuntu怎样流畅
mac取消钥匙串密码
淘宝店有两个管控记录
5s4g网络怎么设置a1453
全民奇迹数据库密码
python spark安装
sql统计重复数据个数
机构持仓数据查询
麒麟 高通 知乎
淘宝到货短信
php cgi.fixpathinfo
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 此生不慕寒温台烟 慕韵吧跪着生不出来 入骨相思知不知慕天星与凌冽 爱妃她扶不上墙慕长安 宠婚不逾慕天星 坚持不懈 常备不懈 孜孜不懈 不懈努力 夙夜不懈 不懈 不懈的意思 始终不懈 坚持不懈的名言 坚持不懈名言 坚持不懈意思 坚持不懈的意思 坚持不懈作文 坚持不懈的作文 坚持不懈英文 坚持不懈的英文 坚持不懈近义词 坚持不懈的近义词 坚持不懈的例子 名人坚持不懈成功故事 坚持不懈英语 坚持不懈的句子 名人坚持不懈的故事 表示坚持不懈的词语 形容人坚持不懈的成语 坚持不懈的拼音 关于坚持不懈的名言 坚持不懈的成语 坚持不懈的名人事例简短3个 至死不懈的意思 坚持不懈的名人故事 表示坚持不懈的名言警句 坚持不懈的座右铭 坚持不懈的意思是什么 关于坚持不懈的名言警句 李时珍坚持不懈的故事

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里