Apply to
Menu, SlideMenu, TabStrip
Overview
An EO.Web navigation control is made up of a hierarchy of items represented by
BaseMenuItem object, which controls an item's appearance and behavior.
Menu and SlideMenu use MenuItem object,
TabStrip uses TabItem object. Both are
inherited from BaseMenuItem object.
BaseMenuItem is highly customizable. The following table shows three types of
commonly used BaseMenuItem:
|
Content |
Remarks |
| LeftIcon,
Text, RightIcon |
This kind of item displays an icon on the left, text in the middle, and an icon
on the right.
Note that any of these parts are optional. For example, most items do not have a
right icon.
|
|
LeftIcon,
CustomItem, RightIcon |
Instead of displaying Text in the middle, a CustomItem is displayed in the
middle. CustomItem can host any ASP.NET controls as its content.
|
| Image-only item
|
This type of item displays a set of images specified by
BaseMenuItem.Image property as the whole content of the item. When
specified, LeftIcon,
Text CustomItem,
RightIcon are all ignored.
|
EO.Web Navigation controls provide a set of client side JavaScript API to
access the control. See client side script interface
for API reference.
This section covers the following topics:
An item with LeftIcon, Text and RightIcon
Most items are made up of LeftIcon, Text and
sometimes RightIcon. Here is a sample of an item with a left
icon, text and right icon:
An item has the following states: Normal, Hover, Expanded,
Selected, SelectedHover, SelectedExpanded
and Disabled. See item states topic
for detail.
You can specify different left icons and right icons for each state. For
example, you can use one icon for the "Normal" state, another icon for the
"Hover" state.
You can also specify different styles for each state. For example,
NormalStyle, HoverStyle,
SelectedStyle. It's not neccessary to provide styles settings
for every states. For example, if ExpandedStyle is not
specified, HoverStyle is used.
Tip: Always try to
use look item to specify
styles.
An item with LeftIcon, CustomItem and
RightIcon
CustomItem is used to host one or more ASP.NET web controls, such as CheckBox,
Calendar and ColorPicker. You can put HTML tags inside a CustomItem
tag. To associate a CustomItem with an item, specify the item's
CustomItemID property to the ID of the CustomItem. The content of the
CustomItem is displayed as the content of the item.
Here is a sample of an item with LeftIcon, CustomItem (a checkbox) and
RightIcon: 
You can also bind data source to a CustomItem and include the
custom item as part of the template
item that is used to generate data binding items. See
Data Binding for details.
Note: When CustomItem
is used, Text property
is ignored but LeftIcon
and RightIcon are
still rendered.
For details on how to use CustomItem, please refer to Custom
Item Overview topic.
An item with image as the whole content
Image can be displayed as the whole content of an item.
Here is an example of an image-based Menu:
Use item's Image property to
define a set of Urls for images in different states. See item
states for details on item states.
When BaseMenuItem's Image property is specified, LeftIcon,
Text, CustomItem, CustomItemID
and RightIcon properties are all ignored.