Introduction
This is the demo of the use of AT JsMenu. AT JsMenu is DHTML Widget of Pull-down menu can be embedded on the web page which is programmed using JavaScript. This DHTML Widget is designed to simulate Java Swing Menu components. The main steps to create the menu components will look similar between AT JsMenu and Java Swing Menu. AT JsMenu supports icon, sub menu, menu item whose checkbox or radio button and menu separator. The CSS can be customized independently, so you can create your own theme. AT JsMenu has also a feature to store the state of checkboxes and radio buttons on menu in cookie. This is useful to set persistent state of those checkboxes and radio buttons (remember, the web is stateless).Supported Browsers
AT JsMenu supports the following browsers:- Internet Explorer 6+
- Good Gecko Browser, that is Netscape 7+ or Mozilla 1.0.1+ (you must check the build number)
- Opera 7+
Using Keyboard To Select and Navigate Menu
Since version 1.1, AT JsMenu has already been able to handle keyboard. It's interesting feature.
And it becomes more complete in version 1.2.
Some keys explained below can be used. You must ensure the HTML document gets the focus
in order for the keyboard handling will run. The browser window has focus doesn't mean
the HTML document has focus. Another component on window, such as location bar, may have
the focus.
The keys are:
- Use Ctrl+Alt or Shift+Alt key to highlight the first menu on menu bar
(press Ctrl/Shift key and hold then press Alt key and then release it. After Alt key is released,
the first menu on menu bar will be highlighted). Sometimes, Firefox doesn't respond Ctrl+Alt.
Try another combination.
- To move the highlighted menu on menu bar, press left/right arrow.
- To open the child menu list of the highlighted menu on menu bar, press up/down
arrow or Enter.
- To navigate the menu item inside the menu list, use up/down arrow.
- To open the child menu list of a sub menu, press Enter or right arrow.
To close it, use left arrow.
- To select a menu item, use Enter. It will do an action assigned to this menu item
and close all opened menu lists.
- Escape key can be used to close the last opened menu list.
- A menu item can also be selected (or opened if it has a child menu list) by pressing
its mnemonic key (underlined char). To select the top menu, use Ctrl+Alt+Mnemonic
or Shift+Alt+Mnemonic. For the other menus, just press its mnemonic if the menu list
containing it becomes the last opened menu.
- Each menu item can also have shortcut (combination) keys that is displayed
on the right side of it. By pressing its shortcut is the same as selecting this menu
whithout opening/navigating menu list.
Independent popup menu can also handle keyboard. When the popup menu appear, it gets the focus.
XML Dataset
Since version 1.3, AT JsMenu supports XML dataset to define the menu components. In this release, Opera doesn't support it and the XML dataset is still embedded in document HTML. Yet, if you don't to write a lot of script then it's very useful. See the manual.Revolutionary Change Logs
This widget has some changes up to be like current condition. There are some revolution to make this widget become mature (may be not yet). Ok, we'll be talking about the revolutionary changes. To tell what have happened which are (so) revolutionary, the author of this widget, he is AT Mulyana, will speak directly. Here is his speech:Ok, it seems to be likely better if I tell the story for each period.
- 2001-2002. In 2001 I started learning the new technology (for me), that is DHTML, and straight forward against a big challenge, that was to create pull-down menu widget. I used this widget on my personal site that has gone. Indeed, I was not the first one who created this kind of widget. But, not like the other one, I tried to emulate as many behavior as owned by pull-down menu on desktop application. My wigdet has supported sub menu, icon, separator and this one, I don't know whether it's checkbox or radio button but there has been a feature like that. Note, you must click on a menu bar item to reveal the menu list, not just move the mouse cursor on it. Also, click anywhere to close it. It's like dekstop widget. Upon these achievements but in that time I got the common disease of a novice. I could make it reached good functionality and good appearance but I built it on the terribly messy construction, bad script design and messy HTML structure. Many ones talk to me in direct or indirect meaning: "Which user who cares about how messy our software construction, they only know their needs are satisfied, good functionality and friendly user interface". It's just mentality, not stupidity. And solemnly I realize, I'm not the best one. Oh, forget to tell, this pull-down menu can run on Internet Explorer 4+, Gecko browsers (from the first version Gecko, Netscape 6) and Netscape Navigator 4.x (with many limitation, you know what it is).
- In 2003, I created what I called "AT's Web Page Menu Builder". To tidy script in the previous version but reducing the good behaviors existing before, to make easy to accomodate more browser families: Gecko browsers, Internet Explorer 4+, Netscape Navigator 4.x, Opera 5.x - 6.x and Opera 7+. It's too crazy, the old browsers have been left. You must not have got this library because I didn't try to deploy it.
- In 2004, I redesigned this widget based on both of previous
versions, neater construction and took back the good behaviors. It's designed to
collaborate with the stacked
IFRAME
, so it's targeted on browser Internet Explorer 6+ (actually 5.5+ can) and Gecko from Netscape 7+. It was planned to be used in an application which has never been released :D - In 2005, this widget comes with new soul with OOP design
simulating Java Swing Menu components and renamed become 'AT JsMenu'. You have heard
what features that AT JsMenu currently has. There will be some enhancements in future.
Compared with its predecessors, AT JsMenu has somewhat new features, those are menu
item whose checkbox and radio button. Accompanying these, there is a stuff to save the
checkboxes and radio buttons' state in a cookie and then retrieving them on the next
page. So it will be like persistent. You may still decide to use stacked
IFRAME
or xmlHttpRequest (and I think it's preferred) but a cookie will still be one of your choices.
Still dedicated for you. Just pray for me :)