实现 cytoscape.js-qtip 的困难答案

【问题标题】：Difficulty in implementing cytoscape.js-qtip实现 cytoscape.js-qtip 的困难
【发布时间】：2015-04-24 16:43:57
【问题描述】：

第一部分

我发现很难在我的代码中复制cytoscape.js-qtip 的功能。

这是 JavaScript 代码：

$(function()
{ 
    $('#cy').cytoscape
    ({
          style: cytoscape.stylesheet()
            .selector('node').css({'content': 'data(name)'})
            .selector('edge').css({'target-arrow-shape': 'triangle'})
            .selector(':selected').css({'line-color': 'black'})
          elements: {
                nodes: [ 
                        { data: { id: '1', name: '1' } },
                        { data: { id: '2', name: '2' } },
                    ],
                edges: [{ data: { source: '1', target: '2' } }]
            },
          layout: { name: 'grid'},
          ready: function()
            {
                window.cy = this;
                cy.panzoom({});
                cy.cxtmenu
                ({  commands:[{ content: '<span class="fa fa-flash fa-2x"></span>',
                                select: function()  {console.log( this.id() );}
                              },
                              { content: '<span class="fa fa-star fa-li "></span>',
                                select: function(){ console.log( this.data('name') );}
                              },
                              { content: 'Text',
                                select: function(){ console.log( this.position() );}
                              }
                ]});
                cy.elements().qtip
                ({
                    content: function(){ return 'this is tool tip for ' + this.id() },
                    position: { my: 'top center',at: 'bottom center'},
                    style: {classes: 'qtip-bootstrap',tip: {width: 16,height: 8}}
                });

                cy.qtip
                ({
                    content: 'tool tip about the core of the layout',
                    position: { my: 'top center', at: 'bottom center'},
                    show: { cyBgOnly: true},
                    style: {classes: 'qtip-bootstrap',tip: {width: 16,height: 8}}
                });
            }
    }); 
});

我已经经历过这些话题：

浏览器控制台中显示的错误：

TypeError: qtip.$domEle.qtip 不是函数

文件： cytoscape.js-qtip

行： 88

Col : 1

代码： qtip.$domEle.qtip( opts );

第二部分

当我尝试over here 提供的示例时，我在点击时看不到任何 qtip。

注意： 我在 Mozilla Firefox 和 Google Chrome 上都试过了。

并在浏览器控制台中遇到以下错误：

Mozilla 火狐

获取 http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.js

[HTTP/1.1 503 服务不可用 0ms]

TypeError: qtip.$domEle.qtip 不是函数

文件： cytoscape.js-qtip

行： 97

Col： 6

谷歌浏览器：

GET https://cdn.rawgit.com/cytoscape/cytoscape.js-qtip/70964f0306e770837dbe2b81197c12fdc7804e38/cytoscape-qtip.jsrunner-3.25.19.min.js:1

TypeError: Object [object Object] 没有方法'qtip'

在 HTMLDocument。 (http://null.jsbin.com/runner:27:12)

在 j (http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js:2:27244)

at Object.k.fireWith [as resolveWith] (http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js:2:28057)

at Function.m.extend.ready (http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js:2:29891)

at HTMLDocument.J (http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js:2:30257) runner-3.25.19.min.js:1

Uncaught TypeError: Object [object Object] has no method 'qtip' runner:27

（匿名函数）跑步者：27

j

k.fireWith

m.extend.ready

【问题讨论】：

你试过扩展自带的例子吗？
是的，先生。我已经尝试了 qtip 和 ctxtmenu 的示例 - 它们工作正常。事实上，当我合并这两个示例以将两个功能（即 qtip 和 ctxtmenu 结合在一起时，它工作得非常好。但是当我尝试在上面的代码上实现相同的功能时，它不起作用。如果我的问题很愚蠢，我深表歉意。我是新来的。提前感谢您。

标签： qtip2 cytoscape.js

【解决方案1】：

第一部分的答案

实际的错误在于 HTML 文件中 JavaScript 的 导入顺序。

错误：

<script src="jquery.qtip.js"></script>
<script src="jquery-2.0.3.js"></script>

更正：

<script src="jquery-2.0.3.js"></script>
<script src="jquery.qtip.js"></script>

结论：

正确的导入顺序

jquery-2.0.3.js

jquery.qtip.js

原因：

导入/加载的顺序很重要，因为jquery.qtip.js依赖于jquery-2.0.3.js。

为了更好地理解：

阅读： cytoscape.js-qtip#description

【讨论】：