This content has been marked as final. Show 21 replies
For page I set Execute when Page Loads
and HTML Header
+<link href="#IMAGE_PREFIX#libraries/jquery-ui/1.8/themes/base/jquery.ui.tabs.css" rel="stylesheet" type="text/css" />+
For HTML region, I set Region Source
For Dept region, I set Static ID
For Emp region, I set Static ID
Edited by: hlthanh on Jul 12, 2010 4:54 PM
Edited by: hlthanh on Jul 12, 2010 4:55 PM
Here is what you have to do:
1) Create a new template of type "Region" (create one from scratch)
a) Name: jQuery Tabs
b) Template Class: Custom 1
d) Sub Regions - Header Template:
e) Sub Regions - Header Entry Template:
f) Sub Regions - Template:
2) On the page where you want to have jQuery tabs, add a new "HTML" region which acts as the container for the "tabs". Set the region template to your new "jQuery tabs" template.
3) Create as many sub regions (that are the actual tabs). It's just important that you set the "Parent Region" to your container region you just created before. As region template I would pick "No Template" or any other template you want to have.
That's it. As you can see now from the region structure it's very obvious for any developer developer what regions are part of the jQuery tabs.
I have made the following changes.
1) I have commented out the jQueryUI files in your page template so that they are not loaded twice (but that was not the problem why it didn't work)
2) Changed the template of your sub regions to "No Template" so that they look better with the tabs
3) Modified the PAM jQueryUI tabs template to use ## as they have been in my original step by step instruction. The double # was by intention and is needed by jQuery :-)
Now it's working!
It should be noted that if you used JQuery UI tabs in ApEx 3.2, and upgraded to ApEx 4.0, they will no longer work without making the changes described here, which I believe is because the tabs library is not included default. I would have liked to see this mentioned in the Release Notes.
As a workaround, I just loaded the standard jquery-ui.tabs.min.js after the apex libraries loaded. That allowed my page to work without modification (so it can be properly updated at a later date).
Hi Patrick -- this works great -- thanks so much!
Question -- I'm using one of the standard themes, and would prefer my "Form Template" sub-region (one of the tabs) still have that template (I like to coloring). But unless I switch it to "No Template", the tabset border does not encompass the sub-region -- it cuts off at the top. In other words, my "form region" has a colored box around it, but the jQuery tab border cuts "through" it, and doesn't go all the way around my region. How can I fix that?
can you put an example on apex.oracle.com so that I can see it and play around with it? Please provide the workspace, user and password and the affected application and page as well.
My Blog: http://www.inside-oracle-apex.com
APEX 4.0 Plug-Ins: http://apex.oracle.com/plugins