Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

ContextMenu View (gallery-contextmenu-view) on cdn

Last Updated: 01/29/13

+ 0 -

Todd Smith

YUI Contributor

See 13 more by this user.

Created: 09/5/12
Last CDN Push: 01/23/13
Build Tag: gallery-2013.01.23-21-59
Project: YUI 3
License: YUI BSD
YUI Version: 3.8.1
Free for use.

This module includes a Y.View class extension that attaches to an existing "trigger" Node and uses event delegation to listen for "contextmenu" requests (i.e. right-click). When the context menu is invoked, a Y.Overlay object is rendered and displayed that includes user-defined menu items that are related to the context where the menu was invoked. This view utilizes several attributes and fires several events that users can listen to in order to take specific actions based on the "trigger target" node.

A natural application for this ContextMenu View is for a DataTable.

This image shows a DataTable which uses two Y.ContextMenuView's, one is attached to the TBODY as the "trigger" node, with the "target" as the individual TR's. The other view is attached to the DT's THEAD as the "trigger" node, with the "target" being the TH nodes.

A few CSS classes are used to track the context menu overlay and each individual menu item in the menu.

Another example of this contextmenu usage for a non-DataTable usage is at
http://jsbin.com/emobaq/1/edit.

Please see the docs and examples for much more detailed usage instructions.

Code Sample

<script src="http://yui.yahooapis.com/3.8.1/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2013.01.23-21-59'
}).use('datatable', 'gallery-contextmenu-view', function(Y) {
//
//  Define a simple DataTable ...
//
   var dt = new Y.DataTable({
       data:  [ .... ],
       columns: [ ....]
   });
 
//
//  Create the ContextMenuView 
//    - in a new container 
//    - with nested DIV's as the menu item template
//    - define the menu items
//    - configure the menu to fire on the DataTable's <table>, 
//         with specific "target" as the TR node 
//
   var cmenu = new Y.ContextMenuView({
    container: Y.Node.create('<div id="cmenuView" class="cmenu"></div>'),
    menuItemTemplate: '<div class="yui3-contextmenu-menuitem" data-cmenu="{menuIndex}">{menuContent}</div>',
    menuItems: [
       {label:"Edit", value:"e"},
       {label:"Update", value:"u"},
       {label:"Insert Before", value:"i"},
       {label:"Insert After", value:"a"},
       {label:"<hr/>", value:null},
       {label:"Delete Record", value:"d"},
       {label:"Destroy Cmenu", value:"dc"}
    ],
    trigger: {
       node:    dt.get('srcNode').one('table .yui3-datatable-data'),
       target:  'tr'
    }
  });
 
//
//  Set a listener on the ContextMenuView's "selectedMenu" attribute when it changes ...
//
   cmenu.after('selectedMenuChange',  function(e) {
       var tr = this.get('contextTarget'),
           mindx = +(e.newVal.menuIndex);
 
       Y.log("For targeted TR of;");
       Y.log(tr);
 
       Y.log("Selected menu choice was menu index " + mindx);
       Y.log("with menu object as;");
       Y.log(e.newVal.menuItem);
    });
 
 
});

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2013.01.23-21-59'
}).use('datatable', 'gallery-contextmenu-view', function(Y) {
//
//  Define a simple DataTable ...
//
   var dt = new Y.DataTable({
       data:  [ .... ],
       columns: [ ....]
   });

//
//  Create the ContextMenuView 
//    - in a new container 
//    - with nested DIV's as the menu item template
//    - define the menu items
//    - configure the menu to fire on the DataTable's <table>, 
//         with specific "target" as the TR node 
//
   var cmenu = new Y.ContextMenuView({
    container: Y.Node.create('<div id="cmenuView" class="cmenu"></div>'),
    menuItemTemplate: '<div class="yui3-contextmenu-menuitem" data-cmenu="{menuIndex}">{menuContent}</div>',
    menuItems: [
       {label:"Edit", value:"e"},
       {label:"Update", value:"u"},
       {label:"Insert Before", value:"i"},
       {label:"Insert After", value:"a"},
       {label:"<hr/>", value:null},
       {label:"Delete Record", value:"d"},
       {label:"Destroy Cmenu", value:"dc"}
    ],
    trigger: {
       node:    dt.get('srcNode').one('table .yui3-datatable-data'),
       target:  'tr'
    }
  });

//
//  Set a listener on the ContextMenuView's "selectedMenu" attribute when it changes ...
//
   cmenu.after('selectedMenuChange',  function(e) {
       var tr = this.get('contextTarget'),
           mindx = +(e.newVal.menuIndex);

Y.log("For targeted TR of;");
       Y.log(tr);

Y.log("Selected menu choice was menu index " + mindx);
       Y.log("with menu object as;");
       Y.log(e.newVal.menuItem);
    });

});