Instructions for use
That is, only the attachment of the JS file and CSS file references to the Web page, such as:
Copy Code code as follows:
<script type= "Text/javascript" src= "Divmenu.js" ></script>
<link href= "Divmenu.css" rel= "stylesheet" type= "Text/css"/>
Online Demo http://img.jb51.net/online/DivMenu/DivMenu.htm
Download Source Package Http://img.jb51.net/online/DivMenu/DivMenu.zip
Where Divmenu.js is a compact version of Javascript compressor compression, which is actually used by the build. Divmenu_develop.js is a development version with detailed annotations for study and research. When used, you can refer to annotations in the Divmenu.css file and modify the style definition yourself.
JavaScript programs have been implemented without interruption (unobtrusive), that is, HTML files referencing this JS file need no other adjustments. But not fully anonymous (anonymous), meaning that the program still creates global variables and several web nodes, and has done as little as possible to increase the number of global variables and nodes, but still note variable naming conflicts when used. This program adds only one global variable "Divmenu", adds more web nodes, adds two nodes to each select node that is replaced, the name of the Select node plus the "_a" suffix and the "_div" suffix, for example, the name of the original select node is " menu, the new two node names are "Menu_a" and "Menu_div".
Function description
The multiple-selection menu does not convert, the prompt text in the multiple-selection menu can only be implemented with disabled= "disabled". To select more than one, please click the CTRL key to select more than 1 selected 2 more than 3 optional 4 + 5 put a multiple selection menu, to demonstrate that the multiple-selection menu will not be replaced, and in the IE6 floating layer can be normal display in other SELECT above.
The above is a practical example, a few groups of classic select menu, the first is complex with grouping, hint text with disabled= "disabled" the first option implementation, the latter is simple, prompt text with no value attribute of the option. The practice found that FF can normally handle disabled= "disabled" or only disabled option, so that it can be an optional state, while IE ignores any disabled= "disabled" and disabled, so it is estimated that the usual IE dishes If you want to use prompt text, you will use the option with no value attribute or value= "". can see its source code is the original SELECT, do not need any changes.
The basic idea is to convert the original document of the SELECT menu into a hidden input form items, with A element to do the menu cue text and options, with the DIV layer to do the menu, the options are also used as A element to replace, click on the value to the hidden input table items.
Major features or limitations include:
All use habits follow the traditional SELECT menu.
Only the Select menu of the radio is replaced, and the multiple-selection menu remains the same, because often the multiple-selection menu is not replaced with a floating-layer menu.
Supports the attributes of various SELECT elements, such as disabled or no value option as the cue text bar, and the option to group with Optgroup will also be grouped in the new menu. and specifically for IE 6 SELECT blocking DIV layer BUG was amended.
Supports the default selection.
Almost all features of the normal menu, but do not support the additional interactive features, such as JavaScript real-time creation of option options, linkage options, such as the choice of a city district will be corresponding changes in the function of this type is not supported.
All styles are defined with CSS, the font size used relative size, no need to change to adapt to most Web pages.
The menu location and size are set to be flexible and can be adapted to any page layout and layouts. When you do, consider that you can put the widest option text in the alternative a element, so you don't get the width of the original SELECT box directly. Therefore, the menu size may be wider than the original select, please be aware when using.
Welcome to the trial, and put forward suggestions, shared discussion and improvement.
