DHTML Menu

Document created by resplin Employee on Jun 6, 2015Last modified by alfresco-archivist on Aug 31, 2016
Version 3Show Document
  • View in full screen mode

Obsolete Pages{{Obsolete}}

The official documentation is at: http://docs.alfresco.com



JSF Component
Back to Component Library


Menu


General Description


The menu component displays a pop-up DHTML menu containing multiple ActionLink components. A simple link and/or image is displayed to the user, which when clicked will pop-up a menu of items. Each item is an ActionLink component with the image part rendered as the icon for the menu item. Evaluators can be used to wrap ActionLink components or simply use the rendered attribute directly to hide/show items as needed.


Tag details


<string>' MANDATORY
  rendered='<boolean>'
  tooltip='<string>'
  styleClass='<string>'
  style='<string>'
  menuStyleClass='<string>'
  menuStyle='<string>'
  itemSpacing='<int>'
  label='<string>'
  image='<string>'
/>

Custom tag attributes


menuStyleClass - CSS class to apply to the element surrounding the menu items.

menuStyle - CSS style to apply to the element surrounding the menu items.

itemSpacing - spacing around and between the menu items.

label - label to display as clickable link to drop-down or hide the menu.

image - image to display as clickable item to drop-down or hide the menu.

Note that both image and label are optional but at least one should be specified.


Example


Simple menu with 4 child ActionLink items, the fourth item is hidden from the user:

  <a:menu id='menu1' itemSpacing='4' label='More...' tooltip='Menu tooltip'
        menuStyle='background-color:#FFFFFF; border:thin solid #AAAAAA;'>
     <a:actionLink value='Item 001' actionListener='#{bean.clickaction}' />
     <a:actionLink value='Item 002' actionListener='#{bean.clickaction}' />
     <a:actionLink value='Item 003' actionListener='#{bean.clickaction}' />
     <a:actionLink value='Should not see this' rendered='false' />
  </a:menu>

Menu with ActionLink items using icon images and evaluators:

  <a:menu id='menu2' itemSpacing='2' label='Actions' image='/images/arrow_expanded.gif'
        styleClass='header' menuStyle='background-color:#EEEEEE; border:thin solid #999999;'>
     <a:actionLink value='Menu Item' image='/images/icons/BlueArrow.gif' />
     <a:actionLink value='Click Me' image='/images/icons/link_small.gif' />
     <a:actionLink value='No Image here' action='success' styleClass='header' />
  </a:menu>

Screenshots


Simple menu component:

Menu_1.gif

Menu with icons and styles:

Menu_2.gif

Attachments

Outcomes