Customize jQuery UI tabs by using real tab images

The jQuery tabbed panel is extremely easy to be integrated in Oracle Apex. The thing that I don't like it the most, however, is that it uses CSS3 to style the tabs - instead of using the tab image(s). This makes it look very inconsistent with the page design. I tried my best but still couldn't figure how to use background image(s) in the following stylesheet for jQuery UI tabs. I am sure there must be some ways to customize the following stylesheet, but I am just not sophisticated in CSS. Can anyone help? Urgent...
Here is the way I like the tabs to be rendered:
http://www.globalone.com/jquery.tabs/tabs.html#fragment-10
Thanks.
Andy
<pre>
/* Tabs
.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { display: block; border: 0; padding: 1em 1.4em; background: none; }
.ui-tabs .ui-tabs-hide { display: none !important; }
</pre>

I found the following javascript tabber (5 KB only to reference the tabber-minimized.js file) by which you can have any tab style you want. You can also use a cookie to remember which tab was selected. No need to find out how to customize the jQuery UI tabs if my only goal is to render DIV blocks in a tab panel!
http://www.barelyfitz.com/projects/tabber/
Thanks.
Andy

Similar Messages

Tabs without using panel tabbed

i have to create a page with multiple tabs on top of the page without using panel tabbed, since multiple users cannot work in panel tabbed.
i have created fragments for indivudual tabs.
included fragments in a bounded task flow. connected all fragments to wildcard control flow.
used a jsff with command menu items in top of the page in a pgl.
below this, i dropped task flow as region where i would like jsff to be displayed depending on command menu item selected on top.
specified command menu item action property as name of control flow case connecting wild card to individual jsffs used in page.
Navigation is not working from one to another jsff on clicking command menu item on top.
what is wrong with this approach.
jdev 11.1.1.5

it would be easier for multiple people to work on different page fragments as with panel tabbed it would be single jspx.
i m focusing on how to achieve navigation using fragments in a region and command menu items or command navigation items at the top.

In Firefox 6 Beta i can only switch 2-3 tabs by using ctrl + tab ... this is rly annoying! Is this only a bug in FF6B?

11 tabs are open. 1 Youtube and the rest are non-flash based.
There is no really a solution by me to switching tabs permanently.
In Firefox 8 Nightly i can switching tabs without any problems. :S

Hi - yes I can! I hadn't noticed that little arrow before, thanks.
However I would really like to stop it hiding the first tab all the time.... Even when I navigate to the first tab using that "list all tabs" arrow, it still remains 'hidden' (i.e. I can't see a tab up the top, even when that tab is active. And when I navigate away from it to another tab, it is invisible again).
Any ideas?
Thanks

I can't switch tabs; clicking on other open tabs or using Ctrl-Tab does nothing.

After upgrading to FF4, sometimes (I haven't been able to identify a pattern yet) I can no longer move between tabs. I can still open new tabs, and can move between those without any problems, but am locked out of any tab that was opened before this issue began. These tabs will still auto-refresh, but clicking on them doesn't switch to them, and Ctrl-Tab just switches between the tabs that were opened after the freeze began. Any ideas on how to fix this? Thanks....
(Using Windows XP, FYI)

That's what I was experiencing. I had to disable all add-ons (via the safe mode method above) and add them back in one by one. After adding each one back in, I tried to recreate the conditions that seemed to be causing the problem in the first place, which, for me, was customizing the toolbar. Eventually found the add-on that locked up the tabs. Hope this works for you, too.

Jquery menu plugin integrated in Tab's (using a custom theme )

Hi,
I'm trying to use the jquery menu plugin and use it combined with tab's. I would like to get the effect which is also in the APEX IDE ( TAB's with submenu's expanding below the TAB ).
So far I have my tab's and also my menu's which are show as a button on the page which expand when you click on them. But I would like to have the menu attached to the tab.
I found somewhere (http://www.theapexfreelancer.com/apex/f?p=APEXFREELANCER:JQUERY_MENU_PLUGIN:0) that I should name the TAB and the LIST's on which the menu's are build exactly the same to achieve this, but so far no luck.
Does anyone know of a cookbook describing how to achieve this or has any ideas what to check ?
Regards,
Bas
b.t.w. Have a great 2012!

The steps can be detailed as follows (I will make it specific to my theme -Application Builder- and you can replace what you want)
0) a) My Page template name is WithNicolettePlugin.
b) Put the Nicolette (Thanks alot for him) plugin on #REGION_POSITION_08# in Page Zero (Global page)
c) the settings of the plugin as follows:
- Template : WithNicolettePlugin
- Before HTML : <ul class="dhtmlMenuLG2"> - After HTML : </ul> - jQuery selector submenu : .dhtmlSubMenu2
- Tab set : main
- Include single subtab : yes
- Class first parent : ui-corner-left
- Class last parent : ui-corner-right
- File Prefix : #IMAGE_PREFIX#
the others are empty
1) link the following CSS's into the Header section of the Page Template of (Bluejay-22)
<link rel="stylesheet" href="/i/css/apex_builder.min.css?v=4.2.0.00.27" type="text/css" />
<link rel="stylesheet" href="/i/css/apex_ui.min.css?v=4.2.0.00.27" type="text/css" />
<link rel="stylesheet" href="/i/css/apex_ui_builder_home.css" type="text/css" />2) link the following Scripts into the Header section of the Page Template
<script type="text/javascript">
var apex_img_dir = "/i/", htmldb_Img_Dir = apex_img_dir;
</script>
<script src="/i/libraries/apex/minified/desktop_all.min.js?v=4.2.0.00.27" type="text/javascript"></script>
<script src="/i/libraries/apex/minified/legacy.min.js?v=4.2.0.00.27" type="text/javascript"></script>
<style> html {visibility:hidden;} </style>
<script type="text/javascript">
apex.security.framebreaker("D");
</script>
<script src="/i/libraries/apex/minified/widget.textarea.min.js?v=4.2.0.00.27" type="text/javascript"></script>
<script src="/i/libraries/apex/minified/builder.min.js?v=4.2.0.00.27" type="text/javascript"></script>3) Re-write the Body section to be as the following
<div id="page-header">
.... LOGO AND WELCOME HERE ......
   <div class="apex-top-bar-end">
       <div class="apex-top-bar">
            <div id="tabs" class="dhtmlMenuLG">
              #REGION_POSITION_08#   
            </div>
       </div>
   </div>
</div>
<div id="topbar">#REGION_POSITION_01##REGION_POSITION_04#</div>
<div id="messages">#SUCCESS_MESSAGE##NOTIFICATION_MESSAGE##GLOBAL_NOTIFICATION#</div>
<div id="body">
    <table class="tbl-body" cellspacing="0" cellpadding="0" border="0" summary="">
    <tbody>
      <tr>
        <td class="tbl-main" width="100%">#REGION_POSITION_02##BOX_BODY#</td>
        <td class="tbl-sidebar">#REGION_POSITION_03#</td>
      </tr>
    </tbody>
    </table>
</div>4- Update the section of Standard Tab Attributes to have Current Tab as the following *(PLEASE, REMOVE THE MINUS BEFORE onmouseover)*
<li class="dhtmlSubMenuN" -onmouseover = "dhtml_CloseAllSubMenusL(this)" >
<a href="#TAB_LINK#" class="dhtmlSubMenuN"
     title="#TAB_LABEL#">
     "#TAB_LABEL#
</a>
</li>
{code}
and Non Current Standard Tab as the following
{code}
<li class="dhtmlSubMenuN" -onmouseover = "dhtml_CloseAllSubMenusL(this)" >
<a href="#TAB_LINK#" class="dhtmlSubMenuN"
      title="#TAB_LABEL#">
      "#TAB_LABEL#
</a>
</li>5- Update the section of Parent Tab Attributes to have Current Parent Tab as the following
<div id="#TAB_ID#" class="current">
    <a href="#TAB_LINK#" title="#TAB_LABEL#" class="link_text">#TAB_LABEL#</a>
    <a href="#" class="link_icon">
      <img src="/i/apex/builder/down_dark_12x12.gif" width="12" height="12"
           class="dhtmlMenu" alt="#TAB_LABEL# Drill Down"/>
   </a>
   <ul id="#TAB_NAME#" htmldb:listlevel="1" class="aTabs dhtmlSubMenu pulldown-tabs" style="display:none;">
       #TABS#
       <li class="last" dir="RTL"><span></span></li>
    </ul>
</div>and Non Current Parent Tab as the following
<div id="#TAB_ID#" class="non-current">
    <a href="#TAB_LINK#" title="#TAB_LABEL#" class="link_text">#TAB_LABEL#</a>
    <a href="#" class="link_icon">
      <img src="/i/apex/builder/down_dark_12x12.gif" width="12" height="12"
           class="dhtmlMenu" alt="#TAB_LABEL# Drill Down"/>
   </a>
   <ul id="#TAB_NAME#" htmldb:listlevel="1" class="aTabs dhtmlSubMenu pulldown-tabs" style="display:none;">
       #TABS#
       <li class="last" dir="RTL"><span></span></li>
    </ul>
</div>6- You will find a sample here in
Workspace : ralab
User : nicolette
Password : abc123
Application 33791 - TestDropDownAppBuilderTabs
If the post completes your solution mark it as correct and the question as answered, otherwise, mark it as helpful.
Best Regards
Mahmoud

Tab key used as the shortcut key when using a text entry box

When I use the Tab key as my shortcut key for a text entry box, it works fine in preview mode but does not work in the web browser preview mode. I have tried to understand how I can take an existing project that is built for web browser application and make the tab key work. The only thing I have been able to make my text feild entry take me to the next slide is to have the user click Enter instead of Tab and that is not the typical way we move between fields in the real application. So....simulations is not accurate. Can you give me step-by-step instructions on how to correct this problem in an already existing project?

I think that you need to disable "Seamless Tabbing" in your file for it to work when published.
You need to edit the HTML file that launches your course manually.
Open your HTML file in notepad or equivalent
Between the <object> </object> tags add:
<param name="SeamlessTabbing" value="false">
Save the HTML file again
/Michael
Click here to visit the www.captivate4.com blog

Tab to change component focus not "real tab" in jtextarea

Hi,
Assume you have four text field in one panel. The first text field get focus. Then you press tab, the focus will change to next text field... and so on..... If you put one text area in that panel..... the story begins....
When you press tab in text area, it will do "real tab" in that text area....
How do I disable that? I want it so that when you press tab in text area, it will change the focus to next element not do "real tab"...
Thank you.

Feel free to remove parts of the code that you feel
are not required. The code was only posted as a
suggestion. If there are some lines of code that you
don't want then please remove then. You are under no
obligation to use the code as posted. To make the
code shorter you could try shortening the method
names. I used "tabForward" and "tabBackward". You
could use "f" and 'b" to shorten the names.Hehe, nice to have you back.

How to use H1, h3, h4 etc when using Spry Tabbed Panels?

Hi folks,
I am using Spry Tabbed Panels 2 on my site as it's the only way I know to direct visitors to particular tabs with links.
Unfortunately I can't use any of my header tags because H2 is dedicated to the Spry tabs, and for some reason has also taken "ownership" o all H tags.
Is there another way to mark my headings accordingly without having them turn into tabs?
My site is at www.qtnz.co.nz/activities
Thanks in advance for advice,
Jo

To help you on your way, have a look at the following. Just copy and paste into a new document and view in your favourite browser.
<!DOCTYPE html>
<html>
<head>

<base href="http://ajax.googleapis.com/" />

<link href="/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css"
        type="text/css" rel="Stylesheet" />

<script src="/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
      // See the jQuery UI Tabs documentation for
      // more information about how this works.
      $('#tabs').tabs();
</script>
</head>
<body>
<div id="tabs">
    <ul>
      <li><a href="#tab-1">Tab 1</a></li>
      <li><a href="#tab-2">Tab 2</a></li>
      <li><a href="#tab-3">Tab 3</a></li>
    </ul>
    <div id="tab-1">
      <p>These tabs were created with JavaScript, CSS, and
        images hosted on Google's AJAX APIs CDN.</p>
      <p>Thanks, Google!</p>
    </div>
    <div id="tab-2">
      <h1>YEAH!</h1>
      <p>My header!</p>
    </div>
    <div id="tab-3">
      
    </div>
</div>
</body>
</html>

Switching browser using IE tab plus - the Norton Identity Safe does not work

Using Firefox 4.0.1 and Norton 360 5.1.0.29 - which has recently been "fixed" to work together (by Norton).
When using IE Tab Plus to switch rendering engines (Firefox to IE) the Norton Identity Safe does not work by not pre filling user names and passwords to sites that are registered in the Norton Safe and also for any new sites does not offer the option to add a new site to the Norton safe . . . . . is this a Norton or Firefox or IE Tab issue? And has anyone else had this problem?

Symantec need to update their Firefox add-ons so that they are compatible with Firefox 4. They have indicated that for Norton 360 they plan to release an update to Norton 360 to support Firefox 4 in early May - http://us.norton.com/support/kb/web_view.jsp?wv_type=public_web&docurl=20100720113635EN&ln=en_US
I do not know about the time scale for updates for other Norton products. Pending the update by Symantec, if you want to use the Norton add-ons you will need to downgrade to Firefox 3.6.
To downgrade to Firefox 3.6 first uninstall Firefox 4, but do not select the option to "Remove my Firefox personal data". If you select that option it will delete your bookmarks, passwords and other user data.
You can then install the latest version of Firefox 3.6 available from http://www.mozilla.com/en-US/firefox/all-older.html - it will automatically use your current bookmarks, passwords etc.
To avoid possible problems with downgrading, I recommend going to your profile folder and deleting the following files if they exist - extensions.cache, extensions.rdf, extensions.ini, extensions.sqlite and localstore.rdf. Deleting these files will force Firefox to rebuild the list of installed extensions, checking their compatibility, and reset toolbar customizations.
For details of how to find your profile folder see https://support.mozilla.com/kb/Profiles

How do I use Panorama / Tab Groups with the keyboard?

Yes I know that CTRL-SHIFT-E opens the panorama window, and then I can use the mouse to organize my tabs into groups.
But how do I do this with the keyboard?
I've [http://lifehacker.com/#!5719596/switch-between-tab-groups-in-firefox-with-a-keyboard-shortcut read] [http://ubuntuforums.org/showthread.php?t=1705714 that] Ctrl-`should move me through tab groups. That doesn't work for me on my Danish keyboard. (Where the ' and ` chars are weird. But is how they are on a valid standard Danish keyboard) I've tried changing the keyboard to USA and then moving through tab groups works fine.
In short: Pretend I don't have a mouse. How do I use Panorama / Tab Groups?

Sorry. These are both known bugs:
[https://bugzilla.mozilla.org/show_bug.cgi?id=587010 Bug 587010] - Add keyboard UI for manipulated groups and tabs in Tab Candy
and
[https://bugzilla.mozilla.org/show_bug.cgi?id=626594 Bug 626594] - shortcut for switching tab groups is badly accessible on many non-US keyboard layouts

How do I use a Tab key to maximize a frame?

How can I use a Tab key (vk_tab) pressed on the focused frame to actually maximize the frame... what action should it have attached to it?
thanks!

tab is the focus traversal key, so will be consumed before getting to your listener
try this instead
    KeyboardFocusManager.getCurrentKeyboardFocusManager()
     .addKeyEventDispatcher(new KeyEventDispatcher(){
        public boolean dispatchKeyEvent(KeyEvent e){
          if(e.getID() == KeyEvent.KEY_PRESSED)
            if(e.getKeyCode() == KeyEvent.VK_TAB ) f.setExtendedState(JFrame.MAXIMIZED_BOTH);
          return false;
    });

Xml report output in excel format without using options tab in EBS

How to get xml publisher report output in excel format without using options tab in EBS?
I am getting XML Publisher report output in excel format by using options tab while submitting the concurrent request .
But i want to get excel output automatically.
Can anyone give idea to get XML publisher Report output in excel without selecting options tab.
Thanks in advance
Sandeep V

Hey Sandeep,
I am working on a similar format for a report and if possible can you please give me some guidelines. I have initially created reports using XML Publisher, but for those , the output preview format was PDF. So, if I select the preview format as EXCEL will it give me output in Excel and for this to happen, how do I define the rtf template. I believe the working will be same as for PDF, create a rdf report, get output in XML and apply the template to get the data in Excel or there is something different to this.
Thanks,
Sunil

How can I navigate through tabs without using the mouse?

I want to know how to navigate through tabs without using a mouse... just like you can navigate through multiple windows by using <alt><tab> ... because it's extremely annoying when I'm working on something to have to take my hands off the keyboard and go to the mouse.

You can also use Ctrl + Page Up and Ctrl + Page Down to go to the next and previous tab. I prefer those because it doesn't require the Shift key (Shift + Ctrl+ Tab) to go to the previous tab.
See also [[Tabbed browsing]]

I cannot use multiple tabs for Hotties For Sale. I was able to do this until yesterday but now the same tab is duplicated each time. How can I fix this?

I play an app called Hotties for Sale. Until yesterday I was able to operate several accounts on the game simultaneously by using separate tabs for each account. Now I can only open one account at a time with a single tab. When I open a second tab I just get a duplicate of the previous one. How can I fix this please?

Final Cut is a separate, higher end video editor. The pro version of iMovie.
Give iPhoto a look at for creating the slideshow. It's easy to assemble the photos in an album in iPhoto, put them in the order you want and then make a slideshow of them. You can select from various themes and transitions between slides and add music from your iTunes library.
When you have the slidshow as you want use the Export button at the bottom of the iPhoto window and export with Size = Medium or Large.
Save the resulting Quicktime movie file in your Movies folder.
Next, open iDVD, choose your theme and drag the QT movie file into the menu window being careful to avoid any drop zones.
Then follow this workflow to help assure the best qualty video DVD:
Once you have the project as you want it save it as a disk image via the File ➙ Save as Disk Image menu option. This will separate the encoding process from the burn process.
To check the encoding mount the disk image, launch DVD Player and play it. If it plays OK with DVD Player the encoding is good.
Then burn to disk with Disk Utility or Toast at the slowest speed available (2x-4x) to assure the best burn quality. Always use top quality media: Verbatim, Maxell or Taiyo Yuden DVD-R are the most recommended in these forums.
The reason I suggest iPhoto is that I find it much easier to use than iMovie (except for the older iMovie 6 HD version). Personal preferences showing here.

HT4689 Is there a way to view and use two tabs at once?

Is there a way to view and use two tabs using mission control?

dandjr wrote:
i also can touch every email and hit delete, what i wanted to do is "select all" then delete, to cut out a step of touching each email...
I see now that you can do that. Too bad you can't do the same with messages...one at a time.
I'd rather have a "delete all" in messages and VVM if I had a choice. Those tend to pile up and before you know it, you have a hundred to delete!

Customize jQuery UI tabs by using real tab images

Similar Messages

Maybe you are looking for