Basic Enterprise Application Realm

Basic Enterprise Application Realm Documentation
  • 1 PHP Reference
    • 1.1 Introduction
    • 1.2 shared_lib.php
    • 1.3 ac_tables.php
    • 1.4 ac_email.php
  • 2 Javascript Reference
    • 2.1 Introduction
    • 2.2 ac_ajax
    • 2.3 ac_event
    • 2.4 ac_filter
    • 2.5 ac_menu
    • 2.6 ac_panel
    • 2.7 ac_select
    • 2.8 ac_toc
  • 3 Forms
    • 3.1 Introduction
    • 3.2 How It Works
    • 3.3 AJAX
    • 3.4 form_processor_v2
    • 3.5 form_processor

2.5 ac_menu

March 25th, 2025

Provides several features for creating menu bars with rollover and down states. Drop down menus are also supported for creating menus that behave like the menu bar in desktop applications including sub menus. Use of this class requires additional adherence to CSS naming conventions.

Current version: 2
Dependencies: ac_event_v2.js

2.5.1 Public Properties

Version Type Default Purpose
$menuTimout 2 integer 6500 This is the amount of time in microseconds that a popped up drop down menu will remain visible without the user moving the mouse over the menu items. The default is 6.5 seconds.
$menuTimein 2 integer 350 This is the amount of time in microseconds that a drop down menu will wait to appear after being triggered by an event such as a mouse click or rollover. This prevents random rapid user actions from triggering the drop down. The default is 0.35 seconds.
$rotateInterval 2 integer 10000 The amount of time in microseconds that a rotating tabbed panel should pause on each tab before activating the next one in the sequence. The default is 10 seconds.

2.5.2 Public Methods

Version Arguments Purpose
createMenu 2 button IDs (array)[, active tab ID (string), rotate (boolean) ] Registers a logical group of HTML elements to behave as a single menu group. Events on a menu element within a menu group can affect all the other items in the same group but not other groups. The details of the menu group behaviour are defined by proprietary HTML attributes. If an ID is passed to the optional active tab ID, then it is assumed that a tabbed panel is being created and this is the name of the default selected tab on page load. Each of the HTML elements referenced by the button IDs supports the full set of attributes used by the ac_event class in addition to an additional ac:menu attribute. If your buttons use images for over and active states, you can use the ac_event class file's ac_preloadImgs() function to force the browser to preload required images before they are required for a smoother user experience.

2.5.3 HTML Attributes

Version Type Mandatory [Y/N] Purpose
ac:action 2 enumeration N When this exists, it indicates a specific action to be triggered. Valid values are: link = triggers a URL link; submit = triggers a form submission; layer = triggers the display of a hidden layer. Linking a generally trivial with HTML. This functionality is for creating complex links from HTML elements that generally cannot be used with <a> tags.
ac:link 2 string N When ac:action exists and is set to "link", this attributes contains the URL to be opened on click.
ac:open 2 string N Contains the ID of a layer that is hidden (CSS style is "hidden") which will be made visible on click.
ac:close 2 string N Contains the ID of a layer that is (or will be) visible (CSS style is blank) which will be hidden (CSS style changed to "hidden").
ac:form 2 string N When ac:action exists and is set to "submit", this attribute contains the ID of the HTML form to submit on click.
ac:layer 2 string N When ac:action exists and is set to "layer", this attribute contains the ID of a layer that is hidden (CSS style is "hidden") which will be made visible on click. This differs from the simpler use of ac:open in that this is used to create tabbed dropdown menus.
ac:value 2 string N When ac:action exists and is set to "submit", this optional attribute may contain an alternative string to replace the <form> tag's action attribute. This is useful for creating forms with multiple submit buttons that should perform different actions on the same set of user input data.
ac:menu 2 string N Contains the ID of layer that is hidden (CSS style is "hidden") and should be made visible as a drop down menu on this item's click or rollover while at least one item in the menu is already in the clicked state. This is similar to a desktop application where a drop down is opened from the menu bar and the other items like File, Edit, and View etc. are rolled over causing each drop down to appear and the other drop downs to hide.
  • Items are mutually exclusive. At least one of these must be used.

2.5.4 Usage Example

Create a simple menu bar of links (no dropdowns)

Javascript

var $a=['button1','button2','button3']; ac_menu.createMenu($a);

HTML

<style>

.menu { color: #000000 } .menu_hover { color: #C3C3C3 } .menu_active { color: #333333 }

</style> <span id="button1" class="menu" ac:open="add_box">Add</span> <span id="button2" class="menu" ac:open="edit_box">Edit</span> <span id="button3" class="menu" ac:open="delete_box">Delete</span>

In most cases, this specific scenario can be achieved using standard HTML and CSS without Javascript.

Create a tool bar with drop down menus (with a submenu)

Javascript

var $a=['button1','button2']; ac_menu.createMenu($a);

HTML

<style>

.menu { color: #000000 } .menu_hover { color: #C3C3C3 } .menu_active { color: #333333 } .dropdown{ background-color: #EEEEEE; } .dropdown:link { background-color: #EEEEEE; } .dropdown:hover { background-color: #CCCCCC; } .dropdown:active { color: #EEEEEE; background-color: #000000; } .dropdown:visited { background-color: #EEEEEE; } #add_box { position: absolute; left: 10px; top: 20px; width: 200px; height: 40px; background-color: #EEEEEE; } #edit_box { position: absolute; left: 222px; top: 20px; width: 200px; height: 40px; background-color: #EEEEEE; } #another_box { position: absolute; left: 400px; top: 40px; width: 200px; height: 40px; background-color: #EEEEEE; }

</style> <span id="button1" class="menu" ac:menu="add_box">Add</span> <span id="button2" class="menu" ac:menu="edit_box">Edit</span> <div id="add_box" class="hidden"> <table cellspacing="0" cellpadding="3" border="0" witdh="100%"> <tr ac:action="link" ac:link="new_file.acx" class="dropdown"> <td>New File</td> </tr> <tr ac:link="link" ac:link="new_folder.acx" class="dropdown"> <td>New Folder</td> </tr> <tr class="static"> <td>SOME GREYED OUT ITEM</td> </tr> </table> </div> <div id="edit_box" class="hidden"> <table cellspacing="0" cellpadding="3" border="0" witdh="100%"> <tr ac:action="link" ac:link="edit_file.acx" class="dropdown"> <td>Edit File</td> </tr> <tr ac:link="link" ac:link="edit_folder.acx" class="dropdown"> <td>Edit Folder</td> </tr> <tr ac:menu="another_box" class="dropdown"> <td>Edit Folder</td> </tr> </table> </div> <div id="another_box" class="hidden"> <table cellspacing="0" cellpadding="3" border="0" witdh="100%"> <tr ac:action="link" ac:link="another_file.acx" class="dropdown"> <td>Edit File</td> </tr> <tr ac:link="link" ac:link="another_folder.acx" class="dropdown"> <td>Edit Folder</td> </tr> </table> </div>

Create a 3 tabbed panel with the first tab selected by default

Javascrip

var $a=['tab1','tab2','tab3']; ac_menu.createMenu($a,'tab1');

HTML

<span class="tab" id="tab1" name="tab1" ac:menu="some_tab1">Tab 1</span> <span class="tab" id="tab2" name="tab2" ac:menu="some_tab2">Tab 2</span> <span class="tab" id="tab3" name="tab3" ac:menu="some_tab2">Tab 3</span> <div id="some_tab1" class="hidden">Contents of tab 1</div> <div id="some_tab2" class="hidden">Contents of tab 2</div> <div id="some_tab3" class="hidden">Contents of tab 3</div>

Create a 3 tabbed panel that automatically cycles through the tabs

Javascript

var $a=['tab1','tab2','tab3']; ac_menu.createMenu($a,'tab1',true);

HTML

<span class="tab" id="tab1" name="tab1" ac:menu="some_tab1">Tab 1</span> <span class="tab" id="tab2" name="tab2" ac:menu="some_tab2">Tab 2</span> <span class="tab" id="tab3" name="tab3" ac:menu="some_tab2">Tab 3</span> <div id="some_tab1" class="hidden">Contents of tab 1</div> <div id="some_tab2" class="hidden">Contents of tab 2</div> <div id="some_tab3" class="hidden">Contents of tab 3</div>

Note that this basically looks identical to the previous tabbed panel example, except for the additional true flag set in the createMenu() call. This is commonly used on the top page of websites where a series of product displays cycle through states.

Settings CSS transitions linked to the indexes of the panels can create effects such as panels fading or swiping into view.

previous: ac_filter next: ac_panel