Recent Posts by beefymanus

Subscribe to Recent Posts by beefymanus 1 post found

Dec 15, 2007
Avatar beefymanus 1 post

Topic: Context Menu / Sample code?

All you need was to add the desktop theme css (I also added the mac shadow) and give the ContextMenu a classname of menu desktop. You can also use others like mac themes or vista, I forget the exact class names for those. Heres your modified code.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>Test URL Content</title>
    <script src="../lib/prototype.js" type="text/javascript"></script>
      <script src="../lib/effects.js" type="text/javascript"></script>  
      <script src="../dist/prototype-ui.js" type="text/javascript"></script>

  <link href="../themes/contextmenu/contextmenu.css" rel="stylesheet" type="text/css">
  <link href="../themes/carousel/prototype-ui.css" rel="stylesheet" type="text/css">
  <link href="../themes/shadow/mac_shadow.css" rel="stylesheet" type="text/css">
  <link href="../themes/contextmenu/desktop.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id='aDiv' style="width:100px; height:100px; background-color:#CCCCCC; border:solid #000000 1px;">This is aDiv</div>

<script language="javascript" type="text/javascript">
var contextLinks = [
{
    name: 'Save',
    className: 'add',
    callback: Document.save
}, 
{
    name: 'Save as...',submenu: [
                                {name: 'Excel (.xls)',className: 'add',callback: Document.saveAsXls}, 
                                {name: 'Word (.doc)',className: 'add',callback: Document.saveAsDoc}, 
                                {name: 'Acrobat Reader',className: 'add',callback: Document.saveAsPdf}
                                ]
}
];

new UI.ContextMenu({ 
    selector: '#aDiv', // element to attach right click event to
      showEffect: false, // indicates whether Effect.Appear is used when menu is shown
      className: 'menu desktop',
       menuItems: contextLinks // array of links to be used when building menu
});
</script>

</body>
</html>