Sonntag, Juni 03, 2007

A simple menubar

By using the hover effect it is possible to realize a simple menubar that will be used by an upcoming control that allows rich text editing. Here I focus on the implementation of the menubar that is implemented as a separate control and can also be used with small changes for other purposes.

Building the html code for the menubar

The html code for building a menubar is implemented by using an outer <div> element with a classname "VEMenuBar". This element is used as the wrapper for all parts of the menubar and is displayed in the background.

The inner elements and menu items can be implemented using <img> images or <span> elements with text content.

The third type of an inner element is a vertical line or separator that can be used to group elements.

Here is a small sample:  

<div class="VEMenuBar">
  <span class="VEMenu" tabindex="1" onclick="datasource.search();">Search</span>
  <img class="VEMenuSeparator" alt="" src="../controls/images/white.gif" />
  <img class="VEMenu" alt="show first record" tabindex="1" src="../controls/images/first.gif" /> 
</div>

The hover effect

When positioning the mouse over any enabled item of the menubar the individual item for starting a specific command is highlighted. For implementing this effect the already known hover behavior is reused. All that we need to implement it is to include the hover.js include file in the head of the page and setting the hover attribute on every element.

<script type="text/javascript" src="../controls/Hover.js"></script>

The menubar behavior (MenubarBehavior)

This behavior implements all the basic functionality for menubars. When bound to a html element it also loops through all the children of the outer element an sets the hover attribute to true for those elements that have a classname "VEMenu". This allows to enable the hover effect without implementing the hover attribute for every menu item.

If you set the tabindex property on menu items another functionality is enabled. By setting tabindex to a value greater then 0 the element can get the focus. When pressing the space bar while the focus is on a specific menuitem the onclick method of the menuitem will be called. This allows you to use the keyboard instead of clicking with the mouse.

The HTML elements that build the menubar 

First of all the outermost element of the menubar that will get attached the behavior is a div element with a classname "VEMenuBar". This element is used as the wrapper for all parts of the menubar and is displayed in the background.

The icons or other images are placed in the menu by using <img> elements as children inside the VEMenuBar element

and will have a classname "VEMenu". They will automatically get an attribute hover="true" to enable the hover effect.

CSS definitions 

Some classnames need to be defined:

.VEMenuBar { background-color:#eeeeee;padding:2px 8px 2px 8px;height:20px;overflow:hidden;}

This defines the background color of the menubar. The padding definition will keep the inner icons away from the border.

.VEMenuBar * { vertical-align:top;}

All elements will be vertically aligned by the top.

.VEMenuBar span {display:-moz-inline-box;display:inline-block;}

<span> elements inside the menubar can be used to create buttons with a text caption. This rule is used to position span elements by using the padding.
The IE will use the inline-block rule and Mozilla/Firefox will use the -moz-inline-box rule. They both don't understand the other syntax and will just ignore it.

.VEMenu { border:0px;padding:2px}

This rule is used for the state of a icon that is not hovered or pushed. In my layout it has no border and is padding the graphic by using 2 pixels on every side.

.VEMenuHover { border-style:solid;border-width:1px;border-color: #acc1e4 #203050 #203050 #acc1e4;padding:1px}
This is the state of a icon when the mouse is over it but is not pushed. In my layout I use 1 pixel of border on every side with some colors that makes the icon look like being raised a little bit. I reduce the padding to 1 px to avoid the shifting and flickering of the graphic.

.VEMenuPushed { border-style:solid;border-width:1px;border-color: #203050 #acc1e4 #acc1e4 #203050;padding:1px}
This is the state of a icon when the icon is pushed down. In my layout I use 1 pixel of border on every side but with different colors and I reduce the padding to 1 px to avoid the shifting and flickering of the graphic.

.VEMenuSeparator { display:inline-block;height:20px;width:1px;border-left:solid 1px #203050;}

Separators between groups of symbols are included by using a 1x1 white pixel image with a classname "VEMenuSeparator" that is displayed with a darker border on the left side.

Attaching functionality

The MenubarBehavior implementation has no special implementation for the onclick event on VEMenu items. The functionality of the menubar item should attached by using the onclick events directly.

 

You can find the state of the current implementation here:

http://www.mathertel.de/AJAXEngine/S04_VisualEffects/InlineEditDemo.aspx

(see the page source by using the view link in the upper right corner)

 

Download the current version under development

I've added another downloadable archive file to the site : Ajax_new.zip.

This Zip-File contains the current version of the ASP.NET 2.0 web project that builds this side.
The complete AJAX Engine and all samples and also unfinished samples and componente are included.
Use this download If you want to experiment with the Engine or if you want to have a look for the newest additions and features.

Keine Kommentare: