-- 作者:SCYANGYU
-- 发布时间:2/27/2005 11:12:00 AM
-- [转帖]Customizing the Adobe SVG Viewer Context Menu
Customizing the Adobe SVG Viewer Context Menu Starting with version 3.0 of the Adobe SVG Viewer, SVG authors are allowed to modify the menu that pops up when the user right-clicks on the SVG. Before you do this, however, you would do well to keep in mind some common-sense guidelines (as posted by MichaelBierman and others on the SVG-Developers list): Don't hide the Help item Don't hide the About ASV item (Adobe and the people who created ASV deserve credit, and you might be violating the ASV EULA; also, the menu may not work) Don't rearrange the existing menu items (users should be able to depend on them being in the same order, etc.) Do turn off items that don't make sense (i.e. there is no need to Zoom or Pan on some content--it will just "break"); however, keep in mind that visually impaired users may need to zoom in to see your content Tips: Disabling, rather than removing, items provides a consistant interface without allowing users to perform unwanted actions, such as zooming or saving the SVG Customizing the Menu* First, you declare a <def> to define the new menu: <defs> <menu id='NewMenu' xmlns='http://foo' onload='GetPosition( evt )'> <header>Custom Menu</header> <item action='ZoomIn'>Zoom &In</item> <item action='ZoomOut'>Zoom &Out</item> <item action='OriginalView'>&Original View</item> <separator /> <item onactivate='MyFunction()'>&My Function</item> <menu> <header>Submenu</header> <item onactivate="alert('Item1')">Item1</item> <item onactivate="alert('Item2')">Item2</item> <item onactivate="alert('Item3')">Item3</item> </menu> <separator /> <item xmlns='http://www.w3.org/1999/xlink' xlink:href='inserted_link.html' target='resource window'>Menu Link...</item> <separator /> <item action='Quality'>Higher &Quality</item> <item action='Pause'>&Pause</item> <item action='Mute'>&Mute</item> <separator /> <item action='Find'>&Find...</item> <item action='FindAgain'>Find &Again</item> <separator /> <item action='CopySVG'>&Copy SVG</item> <item action='ViewSVG'>&View SVG...</item> <item action='ViewSource'>View Sourc&e...</item> <item action='SaveAs'>&Save SVG As...</item> <item action='SaveSnapshotAs'>Sa&ve Current State...</item> <separator /> <item action='Help'>&Help...</item> <item action='About'>About SVG Viewer...</item> </menu> </defs> Several key points should be noted from the code above: Each entry on the menu is marked by an <item> tag. The <separator /> tag creates a separator bar on the menu. Nested <menu> tags create sub-menus; the header for these sub-menus is not selectable To access the built-in functions of the SVG Viewer, you include an 'action' property To access author-defined functions, you include an 'onactivate' property In order to insert a link on the menu, you must resolve the XML NameSpace for XLink and preface the link with 'xlink:' xmlns='http://www.w3.org/1999/xlink' xlink:href='inserted_link.html' In addition, each <item /> can have one or more of the following properties: checked='yes|no' --this indicated whether a particular option is active, as on the 'Higher Quality' option enabled='yes|no' --if this property is set to "no," the option will be visible, but grayed-oout, and can't be selected display='none|inline' --if this property is set to "none," the option will be not be visible -------------------------------------------------------------------------------- Next, in order to use this menu, you must overwrite the original Context Menu with the new definition, in the script section of your SVG: <script> <![CDATA[ var newMenuRoot = parseXML( printNode( document.getElementById( 'NewMenu' ) ), contextMenu ); contextMenu.replaceChild( newMenuRoot, contextMenu.firstChild ); ]]> </script>
|