Friday, November 16, 2012

Mutli Level ( N level ) Tabs in Oracle APEX 4.1 or 4.2






Click Here for demo



 Here is the Multi Level Jquery Tabs in Oracle APEX .

1.Its is Easy to implement .

2.Enhances Look and Feel of the Application .

3.Light Weight.



Steps to be followed :-

1)Create a Application with one level tab , add 4-5 pages

Note the tab Labels should not contain spaces  , in case u want to add spaces use  


2) Create a list entry in the application shared components exactly matching the strings used as the label in the tabs .

Example :- Tabs :- Home , Tab1 ,Tab2 ,Tab3 ,Tab4 points to pages 1,2,3,4,5 correspondingly .

Now create the Sub menu entries like i used in this application

Home > Home child

Tab 1 > Child 1 > Grand Child 1 > Great Grand Child 2 .  soo ooon . 


You need to create the List entry for exactly same with same Label , In case you are including the   in the label , you need to reuse that too here .


 Ex:-  My Home .


3)  Download the Jquery Plugin from the APEX plugin site and upload it into your appliation .

4) Create the Page Zero , Create the Plugin Region with Region Template as
 ( Blank Region or No template ).

Specify the Source as


Note as this is the only list entry i have in my application , I took liberty to  use this query else you need to filter it depending on your List Name as an application can contain N Lists . 



5) Now its time to Edit the theme which you have chosen for you application .
       a) Theme can be either Div based.
       b)It can be List based .

You can get to know what is your theme category by clicking on the One Level Template link on any page of your application   .

Got the Standard Attributes Region .




Now change the Code to the corresponding  Values


Once done Just Run the Application and just Try to click or hover on the main tabs  , you will observe the Jquery Menus on the Tabs as follows .





 

Do let me know your comments if this helps you out :)   Happy Learning :) :) :) :)