FeatureSelectSelect1

1. summary Notes about improving select and select1.
2. labels Module-UI

Table of Contents Introduction Basic menus Button menus Split buttons Radial menus

Introduction

In many Ajax libraries, selection lists are often regarded as menus, with the corresponding formatting and actions. In XForms, a `select1` with hierarchical entries could also be regarded as a menu.

Basic menus

The YUI site has examples that show menus that are expanded, contracted and contain images.

Button menus

In some situations the label on a `select1` doesn't add a great deal of value. In this case authors might want to use a 'button menu', which simply shows the selected value as the button caption. YUI has an example here.

One way the YUI example might be marked up is:

The initial value of `xf:label` will be overwritten once the user makes a change, or if the value of node `x` becomes empty.

Split buttons

With a _button menu_, clicking on the button part simply invokes the 'value changer' part. With a _split button_ clicking on the button part can invoke some action, and the 'value changer' is marked out more distinctly. YUI has a number of examples here.

There are a number of ways that the first example on that page might be marked up, but one possibility is this:

This would require that the `DOMActivate` handler is observing the `xf:label`.

Radial menus

Radial menus are a useful UI feature for a number of reasons:

  * They adhere to Fitt's Law, minimising the distance to each menu item from the context point;
  * Used consistently, they become an intuitive gesture system that can improve UX;
  * They look cool. :)

We added radial menus to an XForms project called Hubbub and they're actually pretty simple to get right. An image of a coloured circle on a transparent background is used for the menu itself, then menu items can be displayed positioned equidistant according to their number.

They could be abstracted as `select1[@appearance]`.