
817
DEVELOPING
COLDFUSION 9 APPLICATIONS
Requesting and Presenting Information
Las
t
upda
te
d 8/5/2010
The following example shows a simple horizontal menu with submenus that uses JavaScript to change the display
contents. When the user selects an end item in a menu, the text in the
div
block below the menu shows the path to the
selected menu.
<html>
<head>
</head>
<body>
<!--- The selected function changes the text in the selectedItemLabel div block to show the
selected item. --->
<script type="text/javascript">
function selected(item) {
var el = document.getElementById("selectedItemLabel");
el.innerHTML = "You selected: " + item;
}
</script>
<!--- A horizontal menu with nested submenus. Clicking an end item calls the selected
function. --->
<cfmenu name="hmenu" bgcolor="##9999ff" selectedfontcolor="##0000dd"
selecteditemcolor="##ddddff">
<cfmenuitem display="Home" href="javascript:selected('Home');" />
<cfmenuitem display="File">
<cfmenuitem display="Open...">
<cfmenuitem display="Template" href="javascript:selected('File >
Open... > Template');" />
<cfmenuitem divider="true" />
<cfmenuitem display="CSS" href="javascript:selected('File > Open... >
CSS');" />
</cfmenuitem>
<cfmenuitem display="Close" href="javascript:selected('File > Close');" />
</cfmenuitem>
<cfmenuitem display="Help">
<cfmenuitem display="About" href="javascript:selected('Help > About');" />
</cfmenuitem>
</cfmenu>
<!--- A div with initial text.
The selected function changes the text by resetting the innerHTML. --->
<div style=" margin-top: 100; margin-left: 10;"><span id="selectedItemLabel">
Please select an item!</span></div>
</body>
</html>
Styling menus
The cfmenu and cfmenuitem tags have several attributes that let you easily control the menu appearance. These
attributes consist of two types: basic and CSS style. Basic attributes, such as the
cfmenu
tag
fontColor
attribute,
control individual menu characteristics. CSS style attributes let you specify a CSS style specification for a whole menu
or part of a menu. The following information describes how the CSS style specifications interact and affect the menu
style. For descriptions of all style-related attributes, see the cfmenu and cfmenuitem descriptions in the
CFML
Reference
.
Содержание COLDFUSION 9
Страница 1: ...Developing Applications ADOBE COLDFUSION 9...