NRasch
12 post(s)
|
Kangax:
Hello. :)
I have attempted to begin testing of the contect menu this evening. I am having issues getting an example to work.
In IE7 nothing happens, and in Firefox and Safari the options show up, but below my div element.
Would you mind putting up a simple example?
Or, as an alternative, here is the simple code I was testing with (which is pretty much a cut-and-paste of the example you provide in the documentation):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Context Menu Test</title>
<link type="text/css" href="/themes/contextmenu/contextmenu.css" media="all" />
<script src="/javascripts/prototype.js"></script>
<script src="/javascripts/prototype-ui.js"></script>
<script src="/javascripts/scriptaculous.js"></script>
</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: 'back',
callback: Document.save},
{name: 'Save as...',submenu:
[{name: 'Excel (.xls)',className: 'xls',callback: Document.saveAsXls},
{name: 'Word (.doc)',className: 'doc',callback: Document.saveAsDoc},
{name: 'Acrobat Reader',className: 'pdf',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
menuItems: contextLinks // array of links to be used when building menu
});
</script>
</body>
</html>
Many thanks!
Nathan
|
beefymanus
1 post
|
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>
|
2 post(s),
2 voice(s)