mxgraph示例解析(-) menustyle右鍵菜單

menustyle右鍵菜單效果圖

官方示例

<style type="text/css">
body div.mxPopupMenu {
    -webkit-box-shadow: 3px 3px 6px #C0C0C0;
    -moz-box-shadow: 3px 3px 6px #C0C0C0;
    box-shadow: 3px 3px 6px #C0C0C0;
    background: white;
    position: absolute;
    border: 3px solid #e7e7e7;
    padding: 3px;
}
body table.mxPopupMenu {
    border-collapse: collapse;
    margin: 0px;
}
body tr.mxPopupMenuItem {
    color: black;
    cursor: default;
}
body td.mxPopupMenuItem {
    padding: 6px 60px 6px 30px;
    font-family: Arial;
    font-size: 10pt;
}
body td.mxPopupMenuIcon {
    background-color: white;
    padding: 0px;
}
body tr.mxPopupMenuItemHover {
    background-color: #eeeeee;
    color: black;
}
table.mxPopupMenu hr {
    border-top: solid 1px #cccccc;
}
table.mxPopupMenu tr {
    font-size: 4pt;
}
</style>

<script type="text/javascript">
// Disables built-in context menu
mxEvent.disableContextMenu(document.body);

// Changes some default colors
mxConstants.HANDLE_FILLCOLOR = '#99ccff';
mxConstants.HANDLE_STROKECOLOR = '#0088cf';
mxConstants.VERTEX_SELECTION_COLOR = '#00a8ff';

// Creates the graph inside the given container
var graph = new mxGraph(container);
graph.setTooltips(true);

// Enables rubberband selection
new mxRubberband(graph);

// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
var parent = graph.getDefaultParent();
                
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try
{
    var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
    var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
    var e1 = graph.insertEdge(parent, null, '', v1, v2);
}
finally
{
    // Updates the display
    graph.getModel().endUpdate();
}

// Creates a new overlay with an image and a tooltip and makes it "transparent" to events
var overlay = new mxCellOverlay(new mxImage('editors/images/overlays/check.png', 16, 16), 'Overlay tooltip');

var mxCellRendererInstallCellOverlayListeners = mxCellRenderer.prototype.installCellOverlayListeners;
mxCellRenderer.prototype.installCellOverlayListeners = function(state, overlay, shape)
{
    mxCellRendererInstallCellOverlayListeners.apply(this, arguments);
    var graph  = state.view.graph;

    mxEvent.addGestureListeners(shape.node,
        function (evt)
        {
            graph.fireMouseEvent(mxEvent.MOUSE_DOWN, new mxMouseEvent(evt, state));
        },
        function (evt)
        {
            graph.fireMouseEvent(mxEvent.MOUSE_MOVE, new mxMouseEvent(evt, state));
        },
        function (evt)
        {
            if (mxClient.IS_QUIRKS)
            {
                graph.fireMouseEvent(mxEvent.MOUSE_UP, new mxMouseEvent(evt, state));
            }
        });
    
    if (!mxClient.IS_TOUCH)
    {
        mxEvent.addListener(shape.node, 'mouseup', function (evt)
        {
            overlay.fireEvent(new mxEventObject(mxEvent.CLICK,
                    'event', evt, 'cell', state.cell));
        });
    }
};

// Sets the overlay for the cell in the graph
graph.addCellOverlay(v1, overlay);

// Configures automatic expand on mouseover
graph.popupMenuHandler.autoExpand = true;

// Installs context menu
graph.popupMenuHandler.factoryMethod = function(menu, cell, evt)
{
    menu.addItem('Item 1', null, function()
    {
        alert('Item 1');
    });
    
    menu.addItem('Item 2', null, function()
    {
        alert('Item 2');
    });

    menu.addSeparator();
    
    var submenu1 = menu.addItem('Submenu 1', null, null);
    
    menu.addItem('Subitem 1', null, function()
    {
        alert('Subitem 1');
    }, submenu1);
    menu.addItem('Subitem 1', null, function()
    {
        alert('Subitem 2');
    }, submenu1);
};
</script>

實現(xiàn)原理

  • 禁用右鍵菜單
mxEvent.disableContextMenu(document.body);
  • 創(chuàng)建右鍵菜單
// Configures automatic expand on mouseover
graph.popupMenuHandler.autoExpand = true;

// Installs context menu
graph.popupMenuHandler.factoryMethod = function(menu, cell, evt)
{
    menu.addItem('Item 1', null, function()
    {
        alert('Item 1');
    });
    
    menu.addItem('Item 2', null, function()
    {
        alert('Item 2');
    });

    menu.addSeparator();
    
    var submenu1 = menu.addItem('Submenu 1', null, null);
    
    menu.addItem('Subitem 1', null, function()
    {
        alert('Subitem 1');
    }, submenu1);
    menu.addItem('Subitem 1', null, function()
    {
        alert('Subitem 2');
    }, submenu1);
};

簡化示例

// Configures automatic expand on mouseover
graph.popupMenuHandler.autoExpand = true;

// Installs context menu
graph.popupMenuHandler.factoryMethod = function(menu, cell, evt)
{
    menu.addItem('Item 1', null, function()
    {
        alert('Item 1');
    });
    
    menu.addItem('Item 2', null, function()
    {
        alert('Item 2');
    });

    menu.addSeparator();
    
    var submenu1 = menu.addItem('Submenu 1', null, null);
    
    menu.addItem('Subitem 1', null, function()
    {
        alert('Subitem 1');
    }, submenu1);
    menu.addItem('Subitem 1', null, function()
    {
        alert('Subitem 2');
    }, submenu1);
};
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末妄呕,一起剝皮案震驚了整個濱河市启涯,隨后出現(xiàn)的幾起案子菜谣,更是在濱河造成了極大的恐慌扛芽,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,331評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蛹找,死亡現(xiàn)場離奇詭異哀托,居然都是意外死亡上真,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,372評論 3 398
  • 文/潘曉璐 我一進店門绢馍,熙熙樓的掌柜王于貴愁眉苦臉地迎上來向瓷,“玉大人,你說我怎么就攤上這事舰涌〔危” “怎么了?”我有些...
    開封第一講書人閱讀 167,755評論 0 360
  • 文/不壞的土叔 我叫張陵瓷耙,是天一觀的道長朱躺。 經(jīng)常有香客問我,道長哺徊,這世上最難降的妖魔是什么室琢? 我笑而不...
    開封第一講書人閱讀 59,528評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮落追,結(jié)果婚禮上盈滴,老公的妹妹穿的比我還像新娘。我一直安慰自己轿钠,他們只是感情好巢钓,可當我...
    茶點故事閱讀 68,526評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著疗垛,像睡著了一般症汹。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上贷腕,一...
    開封第一講書人閱讀 52,166評論 1 308
  • 那天背镇,我揣著相機與錄音咬展,去河邊找鬼。 笑死瞒斩,一個胖子當著我的面吹牛破婆,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播胸囱,決...
    沈念sama閱讀 40,768評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼祷舀,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了烹笔?” 一聲冷哼從身側(cè)響起裳扯,我...
    開封第一講書人閱讀 39,664評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎谤职,沒想到半個月后饰豺,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,205評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡柬帕,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,290評論 3 340
  • 正文 我和宋清朗相戀三年哟忍,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片陷寝。...
    茶點故事閱讀 40,435評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡锅很,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出凤跑,到底是詐尸還是另有隱情爆安,我是刑警寧澤,帶...
    沈念sama閱讀 36,126評論 5 349
  • 正文 年R本政府宣布仔引,位于F島的核電站扔仓,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏咖耘。R本人自食惡果不足惜翘簇,卻給世界環(huán)境...
    茶點故事閱讀 41,804評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望儿倒。 院中可真熱鬧版保,春花似錦、人聲如沸夫否。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,276評論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽凰慈。三九已至汞幢,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間微谓,已是汗流浹背森篷。 一陣腳步聲響...
    開封第一講書人閱讀 33,393評論 1 272
  • 我被黑心中介騙來泰國打工输钩, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人疾宏。 一個月前我還...
    沈念sama閱讀 48,818評論 3 376
  • 正文 我出身青樓张足,卻偏偏與公主長得像,于是被迫代替她去往敵國和親坎藐。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,442評論 2 359