Slide Menu control

Unofficial Content

Download here

Control Description

The slide menu control is a XP style menu that you can stack on the your page to categorize your links. If the user has cookies enabled the script will use it to remember the last state of the menu upon his return. The fade effect is optional, and can be turned off. The sample was taken from http://www.jswitch.com.

User control SwitchMenu1

User control SwitchMenu 2

Using the control

The control basically loads a SDT which contains the menu items. Consequently you will have to create a SideMenuData SDT based variable which must be assigned to the control´s SlideMenuData property. The SlideMenuData sdt is composed simply by 3 fields:

  • Id: character. Useful for event handling
  • Name: the name of the menu item
  • Link: the url of the menu item

When a link IS NOT specified and the user clicks a menu item a server event will be raised. Otherwise the link will be executed and no event is raised. That event can be handled as follows:

Event SlideMenu1.ItemClicked
    textBlock1.Caption = &selectedItem.Name
EndEvent

Example

&slideMenuDataItem.Id = "Java"
&slideMenuDataItem.Name = "Java"  &slideMenuDataItem.Link = "http://java.sun.com"   &slideMenuData.Add(&slideMenuDataItem)    &slideMenuDataItem = new()  &slideMenuDataItem.Id = "Microsoft"
&slideMenuDataItem.Name = "Microsoft"  &slideMenuDataItem.Link = "http://www.microsoft.com"   &slideMenuData.Add(&slideMenuDataItem)    &slideMenuDataItem = new()  &slideMenuDataItem.Id = "GeneXus"
&slideMenuDataItem.Name = "GeneXus"  &slideMenuDataItem.Link = "http://www.genexus.com"   &slideMenuData.Add(&slideMenuDataItem)    &slideMenuDataItem = new()  &slideMenuDataItem.Id = "GXTechnical"
&slideMenuDataItem.Name = "GXTechnical"  &slideMenuDataItem.Link = "http://www.gxtechnical.com/"   &slideMenuData.Add(&slideMenuDataItem)

...using a Data Provider:

Data
{
   Id = "Microsoft"
   Name = "Microsoft"
   Link = "http://www.microsoft.com"
}
Data
{
   Id = "GeneXus"
   Name = "GeneXus"
   Link = "http://www.genexus.com"
}
Data
{
   Id = "GXTech
   Name = "GXTehcnical"
   Link = "http://www.gxtechnical.com"
}

The sample shown above will create the following Slide Menu:

User control SwitchMenu3

In adition the control offers a set of properties to customize its behavior.

Control Properties

  • Width
  • Heigth
  • Title
  • Slide Delay: sets the amount of time the menu takes to open and collapse
  • Do Fading: sets wheter or not the menu should make the fade effect

Control Events

  • ItemClicked: raised when the user clicks a menu item.

To DO

  • Add properties to handle the control appearance

To Install It

Please visit: Default Installation Instructions for User Controls.

Contact information

Please send feedback to: ncardeli@artech.com.uy