navigation menu

[essco]

Hello people...

First a "slam" I find the documentation woefully lacking as I am brand new to easyUI

I have looked high and low for an example of building a menu using javascript.  I would like to put out a bunch of divs and then create a menu by hooking the divs together using javascript all examples that I have found use an ellipse where there should be code.  I sure would like to know what is supposed to be in that ellipse.  If anyone can help me you will have my undying love and admiration.

Thanks for reading
Charlie Elliott
 

[stworthy]

Do not understand clearly about your question. Could you please describe your question in more detail?

[essco]

never mind...

after about 4 more hours I figured it out.  Sure would have been nice if there was an example that said here is what you want a menu to look like her is the code to do it (with no ellipses).  For example:
    |File v|        |Entry v|                                                                                             |View v|                         |About|
    |----  |------ |-----    |------------------------------------------------------------------------------   -----------------------------
           |Exit|            |Employee Entry >| |Enter Part Timers  |                                              |Logged in Users  |
           |----|            |--------------------| |Enter Short Timers|                                              |--------------------|
                               |Department Entry| |Enter Others       >  |Enter Early Retirement|          |Logged Out Users|
                               |--------------------| |---------------------| |Enter Near Retirement|           |-------------------|
                               |Position Entry      |                                |-------------------------|
                               |--------------------|

Those graphics should be prettier but I do not have the time....

Code:

[size=8pt]	<div class="easyui-panel" style="padding:5px;">
			
		<a id="MEN_mnuFile_2095" href="#" class="easyui-menubutton" data-options="menu:'#SPN_mnuFile_2095'">File</a>
		<a id="MEN_mnuEntry_2281" href="#" class="easyui-menubutton" data-options="menu:'#SPN_mnuEntry_2281'">Entry</a>
		<a id="MEN_mnuView_3304" href="#" class="easyui-menubutton" data-options="menu:'#SPN_mnuView_3304'">View</a>
		<div id="MEN_mnuAbout_37699" href="#" class="easyui-linkbutton" onclick="essMenu_Clicked('MEN_mnuAbout_3769!ABOUT!', '&About');">About</div>
     
		<div id="SPN_mnuFile_2095" style="width:150px;" >
			<div id="MEN_submnuExit_2186" onclick="essMenu_Clicked('MEN_submnuExit_2186', 'E&xit');">Exit</div>
		</div>   <!-- mnuFile {1] -->
		<div id="SPN_mnuEntry_2281" style="width:150px;" >
			<div><span>Employee&nbsp;Entry</span>
				<div style="width:150px;" >
					<div id="MEN_mnuPartTimers_2463" onclick="essMenu_Clicked('MEN_mnuPartTimers_2463', 'Enter Part Timers');">Enter&nbsp;Part&nbsp;Timers</div>
					<div id="MEN_mnuShortTimers_2556" onclick="essMenu_Clicked('MEN_mnuShortTimers_2556', 'Enter Short Timers');">Enter&nbsp;Short&nbsp;Timers</div>
					<div><span>Enter&nbsp;Others</span>
						<div style="width:150px;" >
							<div id="MEN_mnuEarly_2740" onclick="essMenu_Clicked('MEN_mnuEarly_2740', 'Enter Early Retirement');">Enter&nbsp;Early&nbsp;Retirement</div>
							<div id="MEN_mnuNear_2833" onclick="essMenu_Clicked('MEN_mnuNear_2833', 'Enter Near Retirement');">Enter&nbsp;Near&nbsp;Retirement</div>
						</div>   <!-- mnuOthers {3] -->
					</div>   <!-- mnuOthers {3] -->
				</div>   <!-- submnuEmployee {2] -->
			</div>   <!-- submnuEmployee {2] -->
			<div class="menu-sep"></div>
			<div id="MEN_submnuDepartment_3023" onclick="essMenu_Clicked('MEN_submnuDepartment_3023', 'Department Entry');">Department&nbsp;Entry</div>
			<div class="menu-sep"></div>
			<div id="MEN_submnuPosition_3209" onclick="essMenu_Clicked('MEN_submnuPosition_3209', 'Position Entry');">Position&nbsp;Entry</div>
		</div>   <!-- mnuEntry {1] -->
		<div id="SPN_mnuView_3304" style="width:150px;" >
			<div id="MEN_submnuLogIn_3395" onclick="essMenu_Clicked('MEN_submnuLogIn_3395', 'Logged In Users');">Logged&nbsp;In&nbsp;Users</div>
			<div class="menu-sep"></div>
			<div id="MEN_submnuLogOut_3581" onclick="essMenu_Clicked('MEN_submnuLogOut_3581', 'Logged Out Users');">Logged&nbsp;Out&nbsp;Users</div>
		</div>   <!-- mnuView {1] -->
	</div>
[/size]

Now a newbie has something to hang his hat on. 

I created a window in a window how does the javascript tell the parent to close the window once again I have already searched for hours and have found nothing.  What good is crating a window in a window if it can't be closed.  I am gonna open a new thread for this but I am betting it will not be answered.

Charlie

[stworthy]

The function 'createMenuBar' achieves the functionality that create a menubar using javascript.

Code:

function createMenuBar(data, container){
    $.map(data, function(btn){
        var b = $('<a href="javascript:void(0)"></a>').appendTo(container);
        if (btn.items){
            b.menubutton($.extend({}, btn, {
                menu: createMenu(btn.items)
            }));            
        } else {
            b.linkbutton($.extend({}, btn, {
                plain: true
            }));
        }
    });
    function createMenu(items){
        var m = $('<div></div>').appendTo('body').menu();
        _create(items);
        return m;

        function _create(items, p){
            $.map(items, function(item){
                m.menu('appendItem', $.extend({}, item, {
                    parent: (p?p.target:null)
                }));
                if (item.items){
                    var p1 = m.menu('findItem', item.text);
                    _create(item.items, p1);
                }
            });
        }
    }
}

Usage example:

Code:

<div id="cc"></div>
<script>
var data = [{
        text: 'File',
        items: [{
            text: 'Exit'
        }]
    },{
        text: 'Entry',
        items: [{
            text: 'Employee Entry',
            items: [{
                text: 'Enter Part Timers'
            },{
                text: 'Enter Short Timers'
            },{
                text: 'Enter Others',
                items: [{
                    text: 'Enter Early Retirement'
                },{
                    text: 'Enter Near Retirement'
                }]
            }]
        },{
            text: 'Department Entry'
        },{
            text: 'Position Entry'
        }]
    },{
        text: 'View',
        items: [{
            text: 'Logged in Users'
        },{
            text: 'Logged out Users'
        }]
    },{
        text: 'About'
    }];

    createMenuBar(data, '#cc');
</script>

[essco]

Thank you for your reply...

It appears to work....

It would have been nice if this was in the documentation somewhere...

I am now trying to put a picture in the window (panel?) After perusing the documentation it appears the icon must be 16X16 and that it must reside in the icons.css.  Please don't answer that here as I have not finished looking through the forum.  I will start a new thread...

Thank you
Charlie

p.s. From my point of view this is closed, is there a way I should be marking these as solved?