Vertical menu and image menu : Menu 2 « GUI Components


 



<html>

<head>

<title>DynAPI Examples - HTML Menu with Images</title>

<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>

<script language="Javascript">

dynapi.library.setPath('./dynapisrc/');

dynapi.library.include('dynapi.api');

dynapi.library.include('HTMLMenu');

dynapi.library.include('Image');



</script>

<script language="Javascript">



// Write Style to browser

HTMLComponent.writeStyle({

  MNUItm:     'border: 1px solid #E0E0E0',

  MNUItmText:  'cursor: default; text-decoration: none; color: #000000; font: 12px Arial, Helvetica;'

});



var  p ={align:"top"}

var i1 = dynapi.functions.getImage('./dynapiexamples/images/btn_new.gif',16,16,p);

var i2 = dynapi.functions.getImage('./dynapiexamples/images/btn_save.gif',16,16,p);

var i3 = dynapi.functions.getImage('./dynapiexamples/images/eicon3.gif',32,32,p);

var i4 = dynapi.functions.getImage('./dynapiexamples/images/eicon2.gif',32,32,p);

var i5 = dynapi.functions.getImage('./dynapiexamples/images/eicon1.gif',32,32,p);

var px = dynapi.functions.getImage('./dynapiexamples/images/pixel.gif',16,16,p);



var mnu = dynapi.document.addChild(new HTMLMenu(),'mnu');

mnu.backCol = "#EFEBD7"

mnu.selBgCol = '#C1D2EE';

mnu.cssMenu = 'MNU';

mnu.cssMenuText = 'MNUItmText';

mnu.cssMenuItem = 'MNUItm';



var mbar;

// Main Menu

mbar= mnu.createMenuBar('main',40,20);

mbar.addItem(null,'File','file');

mbar.addItem(null,'Edit','edit');

mbar.addItem(null,'View','view');

  //File menu

  mbar = mnu.createMenuBar('file',130);

  mbar.addItem(null,{image:i1,text:' New'});

  mbar.addItem(null,{image:px,text:' Open'},null,'alert("Open files")');

  mbar.addItem(null,{image:i2,text:' Save'});

  mbar.addItem(null,'Save As ...');

  mbar.addItem(null,'Recent Files','recent');

  mbar.addItem(null,'Exit');

    //Recent menu

    mbar = mnu.createMenuBar('recent',120);

    mbar.addItem(null,'Dynapi.js');

    mbar.addItem(null,'Quickref.html');

    mbar.addItem(null,'Changelog.html');

    mbar.addItem(null,'Index.html');

  //edit menu

  mbar = mnu.createMenuBar('edit',120);

  mbar.addItem(null,'Undo');

  mbar.addItem(null,'Cut');

  mbar.addItem(null,'Copy');

  mbar.addItem(null,'Paste');

  //view menu

  mbar = mnu.createMenuBar('view',130);

  mbar.addItem(null,{image:px,text:'Icon #1'},'eicon1');

  mbar.addItem(null,{image:px,text:'Icon #2'},'eicon2');

  mbar.addItem(null,{image:px,text:'Icon #3'},'eicon3');

    mbar = mnu.createMenuBar('eicon1',40,36);

    mbar.addItem(null,i3.getHTML());

    mbar = mnu.createMenuBar('eicon2',40,36);

    mbar.addItem(null,i4.getHTML());

    mbar = mnu.createMenuBar('eicon3',40,36);

    mbar.addItem(null,i5.getHTML());



// Vertical Menu

var mnu2 = dynapi.document.addChild(new HTMLMenu(null,'vert'),'mnu2');

mbar= mnu2.createMenuBar('main',90,20);

mbar.addItem(null,'Products','prods');

mbar.addItem(null,'Services','edit');

mbar.addItem(null,'Contacts','file');

  //File menu

  mbar = mnu2.createMenuBar('file',130);

  mbar.addItem(null,{image:i1,text:' New'});

  mbar.addItem(null,{image:px,text:'Open'},null,'alert("Open files")');

  mbar.addItem(null,{image:i2,text:' Save'});

  mbar.addItem(null,'Save As ...');

  mbar.addItem(null,'Recent Files','recent');

  mbar.addItem(null,'Exit');

    //Recent menu

    mbar = mnu2.createMenuBar('recent',120);

    mbar.addItem(null,'Dynapi.js');

    mbar.addItem(null,'Quickref.html');

    mbar.addItem(null,'Changelog.html');

    mbar.addItem(null,'Index.html');

  //edit menu

  mbar = mnu2.createMenuBar('edit',120);

  mbar.addItem(null,'Undo');

  mbar.addItem(null,'Cut');

  mbar.addItem(null,'Copy');

  mbar.addItem(null,'Paste');

  //view menu

  mbar = mnu2.createMenuBar('prods',130);

  mbar.addItem(null,{image:px,text:'Icon #1'},'eicon1');

  mbar.addItem(null,{image:px,text:'Icon #2'},'eicon2');

  mbar.addItem(null,{image:px,text:'Icon #3'},'eicon3');

    mbar = mnu2.createMenuBar('eicon1',40,36);

    mbar.addItem(null,i3.getHTML());

    mbar = mnu2.createMenuBar('eicon2',40,36);

    mbar.addItem(null,i4.getHTML());

    mbar = mnu2.createMenuBar('eicon3',40,36);

    mbar.addItem(null,i5.getHTML());



</script>

</head>

<body>

<h1>The Image Menu</h1>

<script>

  dynapi.document.insertChild(mnu);

</script>

<p>This is a great way to start your web page</p>

<p>&nbsp;</p>

<h2>A Vertical Way to start your day</h2>

<script>

  dynapi.document.insertChild(mnu2);

</script>

</body>

</html>
Vertical menu and image menu : Menu 2 « GUI Components « JavaScript DHTML
