Tab menu

A region plug-in for Oracle application express.

Table of contents
Intro.............................................................................................................................................3 Main features...............................................................................................................................3 Demo...........................................................................................................................................3 Installation...................................................................................................................................3 Configuration..............................................................................................................................3 Plugin settings........................................................................................................................4 Component settings................................................................................................................4 FAQ.............................................................................................................................................4 License........................................................................................................................................5 Legal disclaimer..........................................................................................................................5

Intro
The way two level tabs are displayed in Apex is limited. For instance only the standard tabs belonging to the current parent tab are rendered. This plug-in does not only render the standard tabs for the current parent tab but for the other parent tabs as well. So it becomes possible to display the tabs as a drop down menu.

Main features
Using templates for the HTML of the tabs. You have complete control over the HTML that is rendered. CSS can be used to change how the tabs are displayed making not only horizontal but also vertical sub menus possible At your own Javascript for even more special effects and control. Default jQuery hover is used to show the standard tabs at hovering over the parent tab.

Demo
http://apex.oracle.com/pls/apex/f?p=VANBAREN_PLUGINS:TABSUBMENU:0

Installation
With this installation package there is a plug-in installation file named: region_type_plugin_net_vanbaren_apex_tab_menu_v1.01.sql Navigate to Shared Components > Plug-ins and click <Import >. From there you can follow the menu to upload and install the plug-in using the file above. After the plug-in has been installed successfully you will be redirected to the plug-in edit screen.

Configuration
The plug-in uses the (parent) tab setting of the page template as a template for the menu. To position the tabs within the parent tab use the #TABS# substitution string. The other tab substitution strings are also available. CSS or your own Javascript turns this region in every type of menu you want. Included in the download is a theme with the page templates used in the demo application. You can find the theme export file in the examples folder. If there is no onload code defined there will be a hover effect attached to the parent tabs to show the children. The authorization, build options and conditions you have defined for the (parent)tabs are working like normal.

Plugin settings

Theme number:
Component settings

Number of the theme where the used template(s) belong to. If left empty the current theme is used.

Template:

Name of the template to be used for the generation of the tabs. The template has to be a page template belonging to the same theme as defined by the plug-in settings. Note that the name has to be exactly the same. HTML placed before the first parent tab. HTML placed after the last parent tab. Selector used to select the submenu, the standard tabs. The hoover event will be attached to the parent of this selector. Name of the tab set where parents tabs belong to. If checked and there is only one child tab the parent will hold the link of the child. The class that is only applied to the first parent. The class should be in the template and is removed for all parent tabs that are not the first one. Same as the above setting only applied to the last parent. Same as the Class firs/ last parent settings. Used for rounded corners fro example. Location of the Javascript en CSS files named in the settings of the component. If left empty the file prefix on the application level is used. A colon delimited list of file names which hold the code necessary for the correct display of your Menu. Style the menu as you want. The CSS file should be at the location named at the File prefix setting. Javascript code that will be executed at the jQuery ready event. For example $('#mymenu).menu_widget;

Before html: After html: jQuery submenu selector: Tab set: Include single subtab Class first parent

Class last parent Class first child Class last child File prefix

Javascript libraries CSS file Onload code

FAQ
Where do I find out what the Tab set of my parent tabs is? You can find the Tab set in the "Parent Tab Set" attribute of the parent tabs. Go to Shared components > Tabs > Manage tabs > Edit a parent tab. Normally the Tab set is main. Where to place the #TABS# substitutionstring? Short answer in the parent tab templates. Long answer. For the rendering of the HTML the parent and standard tab template attributes of a page template are used. To render the standard tabs at the right place inside the parent tabs HTML the #TABS# is used. For example:
<li class="parent-tab"> <a href="#TAB_LINK#"> #TAB_LABEL#</a> <ul class="submenu"> #TABS# </ul> </li>

The menu works but doesn't look good. It is now time to look at the CSS. Use your favorite browser developer tools to check if the CSS is applied to your menu. If your are using your own CSS file check if it is loaded in the browser. If you still have trouble set up an example at apex.oracle.com. Since your problem is with how it looks any body trying to help you needs to see what your problem is. My files are uploaded as plugin files how do I reference them. Leave the File prefix setting empty at the component level. And set the plugin attribute File prefix to #PLUGIN_PREFIX#.

Change.log
Version 1.01 Resoved bug B001 #PLUGIN_PREFIX# as file prefix link not possible.

License
The Tab menu plug-in is currently available for use in all personal or commercial projects under the ICS license.

Legal disclaimer
The plug-in(s) and/or file(s) are supplied as is. The author disclaims all warranties, expressed or implied, including, without limitation, the warranties of merchantability and of fitness for any purpose. The author assumes no liability for damages, direct or consequential, which may result from the use of these plug-in(s) and/or file(s).