caphContextMenu

caph-context-menu plugin is used to provide users with an easy hierarchical menu.

There are some templates for decorating each item. (caph-context-menu-item-template, caph-context-menu-arrow-up-template, caph-context-menu-arrow-down-template)

Options

This plugin's init function need option object to define behavior. It's properties can be defined like below.

items

Context-menu needs a specific format to work with JSON. It is array type of the object and each item has two required fields: id & content. Each menu-item of the sub-menu is represented by an object. So all objects should be arranged by you want to show.

• id (required) : identifier of each menu-item. It is used as parameter of 'on-select-item' callback function.
• content (required) : string or tags, it is served as the menu-item content.
• parent : If the menu-item is child of any other one, 'parent' property should be set to parent's id.
• disabled : If the menu-item should be not selectable, this should be set to true.

  [
    {
        id          : "string", // required
        content     : "string", // required
        parent      : "string", // parent's id
        disabled     : boolean
    },
    ...
  ]

  If you need any other properties, define it on each object. Then you can use it on item template.

menuOption

Menu's option for each depth that is start from 0. it can contain the property like below.

• style : Used to decorate each sub-menu.
• offset (only for sub-menu) : Used to define position of sub-menu.
• class : Used to set class name for sub-menu.
• visibleItemCount : Used to limit menu-item count to view. If this value is set and item count is bigger than it, arrow buttons will be show on each menu.

position

absolute coordinate of context menu. If you don't set this value, menu's position will depend on css style.

focusableDepth

Initial number of depth for focusable element. Focusable depth of each sub-menu will increase from this value. So it's important to avoid possible duplication.

onSelectItem

the callback function of the select event on each item. This function can have parameters as '$itemId' and '$event'. '$itemId' is the item's id user select. '$event' is event object of jQuery.

onFocusItem

the callback function of the focus event on each item. This function can have parameters as '$event' that is event object of jQuery.

onBlurItem

the callback function of the blur event on each item. This function can have parameters as '$event' that is event object of jQuery.

Templates

item template

'caph-context-menu' can contain 'caph-context-menu-item-template' element for decorating each menu-item.

'caph-context-menu-item-template' is a template element of each menu item. it can contain html in the tag. So user can use properties of each menu item and decorate text or add image or another html elements. If you add more property to item, you can use this property in 'caph-context-menu-item-template'

 [item]
 {id: 'korea', content: 'Korea, KR', textColor: 'white'}

 [template]
 <div class="caph-context-menu-item-template"><span style="color:{{textColor}}">{{content}} ({{name}})</span></div>

When you use this template, you can see dom structure like below

 <div class="caph-context-menu">
     <ul>
         <li>
             <span style="color:white;">Korea, KR (KR)</span>
         </li>
     </ul>
 </div>

arrow-up / arrow-down button templates

'caph-context-menu-arrow-up-template' and 'caph-context-menu-arrow-down-template' also provide templates for arrow buttons. If visibleItemCount option is set, each sub-menu have arrow buttons for scrolling. You can define these elements for decorating arrow buttons.

 <div class="caph-context-menu-arrow-up-template">▲</div>
 <div class="caph-context-menu-arrow-down-template">▼</div>

Example

js

 var menu0 = $('#contextMenu0').caphContextMenu({
     items : [
         {id: 'korea', content: 'Korea, KR'},
         {id: 'usa', content: 'United State, US'},
         {id: 'la', content: 'LA', parent: 'usa'},
         {id: 'ny', content: 'Newyork', parent: 'usa'},
         {id: 'te', content: 'Texas', parent: 'usa'},
         {id: '1', content: 'One', parent: 'te'},
         {id: '2', content: 'Twe', parent: 'te'},
         {id: '3', content: 'Three', parent: 'te'},
         {id: 'china', content: 'China, CN'},
         {id: 'japan', content: 'Japan, JP'},
         {id: 'tiwan', content: 'TIWAN, TW'}
     ],
     menuOption: {
         0: {
             style: {
                 width: '300px'
             }
         },
         1: {
             offset: {x: -50, y:0}
         }
     },
     position: {x: 200, y: 140},
     focusableDepth: 2000,
     onSelectItem: function($itemId, $event){
         console.log($itemId + ' is selected. +++++++++++++++++++++++++++++++++++++++++++++++++++');
         menu0.caphContextMenu('close');
     },
     onFocusItem: function($event){
         console.log('focusItem');
     },
     onBlurItem: function($event){
         console.log('blurItem');
     }
 });
 $('#btnContextMenu0').on('selected', function(){
     menu0.caphContextMenu('open');
 });

html

 <div id="btnContextMenu0" class="sample-button" focusable data-focusable-depth="0" data-focusable-initial-focus="true">
     <div class="button-text">Sample</div>
 </div>

 <div id="contextMenu0">
     <div class="caph-context-menu-item-template">${content}</div>
     <div class="caph-context-menu-arrow-up-template">▲</div>
     <div class="caph-context-menu-arrow-down-template">▼</div>
 </div>