CSI-jMenu Wiki

Javascript Lib jMenu

Brought to you by: carlos_celso

USAGE

Return HOME

Data Sequence Initialization Preferences:

The data sequence initialization consist that the sequence to assign attribute values.

- data -> cell_event -> cell -> defaults
- line -> defaults
- menu -> defaults

USAGE:

new jMenu( [itemid], { [config_options] } );

- itemid: The name of Menu
- config_options: options in JSON format

HTML TAG:

<html>
    <meta>
            <script type='text/javascript' src='jMenu.js'></script>
    </meta>
    <body>
            <span id='myid'></span>
     </body>
    <script>
            const myObj = new jMenu( 'myid', { config_options } );
     </script>
</html>

config_options:

 {
     type: 'list|linear|dynamic|line',
     data: [data_info],
     menu: [menu_info],
     line: [line_info],
     cell: [cell_info]
 }

type of menu:

 list(1):   list of items (vertical) with same cell size

     dataset support: 1D or 2D

     format:
         <table>                                                     <- menu_info
             <tr>                                                    <- line_info
                 <td>cell1_line1</td> ... <td>cell1_lineX</td>       <- cell_info
             </tr> 
             ...
         </table>

 linear(2): line of items (horizontal) with same cell size

     dataset support: 1D or 2D

     format:
         <table>                                                     <- menu_info
             <tr>                                                    <- line_info
                 <td>cell1_line1</td> ... <td>cellX_line1</td>       <- cell_info
             </tr>
             ...
         </table>

 dynamic(3): cell with different location in the 'body'.

     dataset support: 1D

     format: <span>cell1</span> ... <span>cellX</span>               <- cell_info only

 line(4): line of items (horizontal)

     dataset support: 1D

     format:
         <span>                                                      <- menu_info
             <span>cell1</span> ... <span>cellX</span>               <- cell_info
         </span>

data_info:

 dataset single (table 1D):

     data =
     [
         {dataset1},
         {dataset2}, ...,
     ]

 dataset multiple (table 2D):

     data:
     [
         [ {dataset1.1}, {dataset1.2}, ... ],
         [ {dataset2.1}, {dataset2.2}, ... ], ...
     ]

dataset_info:

 args: 'string',
 id: 'string',
 blinker: 'value',
 event:
 {
     initialData|initialEmpty:
     {
         [cell_info]
     },
     click|clickmiddle|clickright|mousedown|mouseleave|mouseover|mouseout|mouseup:
     {
         action: 'function' | '#top-of-body' | '#bottom-of-body' | '#menu' | '#submit' | 'http[s]://...',
         useDefaults: true|false,
         [cell_info]
         [sync_info]
     },
 }, 
 label: [label_info],
 useDefaults: true|false,
 [cell_info]
 [sync_info]

label_info:

 Single Label:

    label: 'string_info'

 Multilabels:

    label:
    [
        'string_info1',
        ...
        'string_infoX',
    ]

string_info:

 'text'
 or
 '#image:[image-href-name]'       <- <img src=xxxxx> tag

menu_info:

 CSSProperties: true|false,         (default: true, full support for CSSProperties)
 display: true|false,               (default: true)
 disableRightButton: true|false,    (default: false, if event=clickright inuse the default is true)
 disableWarnings: true|false,       (default: false, disable Warnings library messages)
 moveOn: true|false,                (default: false, enable menu moveable)
 moveResponsive: true|false,        (default: true)
 replaceInnerHTML: true|false,      (default: true, replace default innerHTML DOMelement)
 useUsersEvents: true|false,        (default: false, reset Users Events on DOMelement Item)
 [CSS_Properties]

line_info:

 dataset single (table 1D):

     line =
     {
        [CSS_Properties]
     }

 dataset multiple (table 2D):

     line:                      (distinct CSS Properties per line)
     [
        [CSS_Properties],
        [CSS_Properties],
     ]
     or
     line:                      (unique CSS Properties for all lines)
     {
        [CSS_Properties]
     }

cell_info:

 event:
 {
     initialData|initialEmpty:
     {
         [CSS_Properties]
     },
     click|clickmiddle|clickright|mousedown|mouseleave|mouseover|mouseout|mouseup:
     {
         display: 'none|hidden|[null]'
         menuCloseAfterDone: true|false,
         shadow: true|false,
         useDefaults: true|false,
         [CSS_Properties]
         [sync_data]
     }, 
 },
 display: 'none|hidden|[null]'      (default: null, cell will be displayed)
 menuCloseAfterDone: true|false,    (default: false)
 shadow: true|false,                (default: false, enable boxShadow property)
 size: 'value',                     (default: # of cells in the dataset)
 useDefaults: true|false,           (default: true)
 [CSS_Properties]
 [sync_data]

CSS_Properties:

 CSSProperties: true                (This is defaults)

    The 'display property' is not supported.

 CSSProperties: false               (Supported Properties)

    menu:

        align, backgroundColor, borderRadius, borderWidth, boxShadow, className, 
        color, cellPadding, cellSpacing, valign, width

    line:

        align, backgroundColor, borderRadius, borderWidth, boxShadow, className, 
        color, padding, spacing, valign, width

    cell:

        backgroundColor, borderRadius, borderWidth, boxShadow, color, cursor, float, 
        fontWeight, opacity, padding, spacing, textAlign, width

sync_data:

 syncMenu: 'itemid',
 syncItem: 'id',
 syncRun: 'after|before|none'
 syncDisabled: true|false,

ENDED