JavaScript - Cytoscape Web nodes add jQuery qTip plugin

之前有提到過建立基本的Cytoscape Web，而如果當我們幫node加上click Listener，並且呈現

tooltip的區塊，如此可以讓node提供額外的訊息。在此要說明的是如何搭配jQuery qTip plugin

做到較為強大且華麗的tip功能！

處理node click listener的程式碼如下：

  1. vis = new org.cytoscapeweb.Visualization(div_id, options);
  2. // callback when Cytoscape Web has finished drawing
  3. var currnode;
  4. var tooltipapi;
  5. vis.ready(function() {
  6.     vis.addListener("click", "nodes", function(evt) {
  7.         if(typeof currnode == 'undefined'){
  8.            currnode = evt.target;
  9.         }else if(currnode != evt.target){
  10.            if(!tooltipsapi.destroyed)
  11.                tooltipsapi.destroy();
  12.                tooltipsapi = undefined;
  13.                currnode = evt.target;
  14.            } 
  15.            var tooltips = $(currnode).qtip({
  16.                content: {
  17.                   text:"<font color='#668866' size=2><b>"+currnode.data.label+"</b></font>",
  18.                   title: {
  19.                       text:currnode.data.label
  20.                   }
  21.                },
  22.                position: {
  23.                   target: [currnode.x+(currnode.width/2), currnode.y+40]
  24.                },
  25.                style: {
  26.                   classes: 'qtip-light'
  27.                },
  28.                show: { 
  29.                   event:'click', 
  30.                   delay: 0 , 
  31.                   effect: function(offset) {
  32.                      $(this).slideDown(100);
  33.                   },
  34.                   solo: true,
  35.                   ready: true
  36.                },
  37.                hide: {
  38.                   event: 'unfocus',
  39.                   fixed: true
  40.                }
  41.           });
  42.           tooltipsapi = tooltips.qtip('api');
  43.      }).addListener("click", function(evt) {
  44.           if(typeof tooltipsapi != 'undefined'){
  45.               tooltipsapi.destroy();
  46.           } 
  47.      });
  48.   });
  49. });

注意！div_id, options變數主要在第一篇有講到，這邊就不帶出了。

currnode主要是針對當我點擊到的node，取其node object，這個node我們可以利用其x, y 屬性，

如此便可以設定tooltip block的position及label，而show的部分，主要是說明tip是在什麼情況下

出現，此設定為click，而時機是在$(currnode).qtip(...)這個範圍的情況下(click node)，如果您

設定為$("body").qtip(...)  那麼當您點擊body的範圍，就會出現tip。

hide的設定為event unfocus，表示當您的node為unfocus就會隱藏起來！如點擊其他node時，原

本的node旁的tip便會消失，而.addListener("click", function(evt) {...這段是針對點擊到cytoscape

的區域就會觸發的情況。

而小弟使用了這段tooltipsapi.destroy();的意義是，如果不destroy的話，就會產生很多的tip

，當tip隱藏起來，在去點擊其他的node又會產生tip div，因此如果不間斷的點擊就會產生很

多div的隱藏tip，所以在這邊就會將其destroy。

點擊node

若不destroy會出現的情況，如此qtip區塊會一直產生

基本上qTip有很多功能，細部的部分可以去官網上查詢！

http://qtip2.com/

留言

張貼留言