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 :) :) :) :)
Hello Nandini,
ReplyDeleteWhere or how did you create the Sub menu entries?
"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 "
Thanks
FJ
You need to create a List in Shared Components
Delete2) Create a list entry in the application shared components exactly matching the strings used as the label in the tabs .
DeleteExample :- 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 .
Hi,
ReplyDeleteWhat is the plugin called and what site?
Thanks for this..excited to give it a try.
jquery.menu Is the Plugin name :) Happy Learning
DeleteHi Nandini,
ReplyDeleteCan you please give the site from where jquery.menu plug-in will able to download.
Thanks in advance...... :)
--Lalit
Hi All,
ReplyDeleteI got the link from where you can download jquery Menu plug-in
http://www.apex-plugin.com/oracle-apex-plugins/region-plugin/jquery-menu_82.html
Thanks,
Lalit
Can we do it without that Pulgin???
ReplyDeleteYou can do it without plugin too . But that would be very tough and complex as that would require changing the core Theme and creating the whole logic from scratch . Plugin is preferred.
DeleteHi Nandini,
ReplyDeleteI have implemented succesfully this plugin but I do have an issue.
I have 6 parent tabs. All of them with some child tabs. The issue is that I can't navigate in all the childtabs, I can only navigate on the child tabs of the parent tab that I am right now... For Example: I click the parent tab 1 and it shows me the page that it's associated, then I click again that parent tab and I can see its childtabs. The issue is when I want to click the parent tab 2, being on the page associated to parent tab 1 (It does not show me its child tabs) So Like I said, I click it and it load the page that it's associated to that tab and in that moment I can see its child tabs... Am I Clear? I hope you can help me. Thanks.
Hi Bernardo,
DeleteCan you share me the application on cloud instance , such that ic an look into this issue.
Regards,
Nandini Thakur
Hi Nandini,
DeleteThank you for answer :)
I preferred to record a video with the issue that I'm facing. See here: https://www.dropbox.com/s/tl4g3qoydenyd7l/tabs%20issue.avi
Thanks, Bernardo.
Hi Nandini, did you see the video?
DeleteHi Bernardo ,
DeleteI didnt get the chance to look @ it , if u can share the screen shots or apex link i may help you . As i m gng thru hectic schedule so will not be abel to open that link .
Regards,
Nandini Thakur
This comment has been removed by the author.
ReplyDeleteIf I put screenshot you wont see what I want you to see. Is there any possibility to give me developer credentials to see how all was made??
DeleteAnother thing that I want to do ... it's to hover the mouse on the parent tab and it shows me the childs parents without clicking it, How can I do that? Thank you Bernardo... I can give you my email if you want to give the user and password to see how all was made. I will really appreciate it. tsunix@gmail.com
Hi Bernardo ,
DeleteKindly! mail me on thakurdurgeshnandini@gmail.com , Kindly! specify which version of Oracle APEX are you using and whats the applicaiton template you are using .
Regards,
Nandini Thakur
Nandini,
ReplyDeleteHow can you make the selection based on hover and not click?
thank you.
Scott