Documentation
Talk:UI/Tabs
From jQuery JavaScript Library
2 sets of tabs with different container sizes?
Hi Im trying to set up 2 sets of tabs on the same page- I have the 1st set working fine using an altered jquery.tabs.css file. The problem is Ive set the tabs-container to 646px; in this file. I want the 2nd tab-contaner to be 100px;. Ive tried specifying alternate jquery.tabs2.css file and adding it but it seems the 1st css file overides it. when I remove the link to the initial css file the 2nd set of tabs look fine, so I presume it picks up the 2nd css file ok. But this messes up the other tabs. Im sure there is an easier way to do this? Im new to all this. Basically what I want is 2 sets of tabs on the same page that use different css file to specify tabs-container values and span widths any help appreciated Thanks
Different background images for on/off states
Our tabs have to have one image when selected, one image when unselected. Originally, we thought to have .tab1class have the background-image set to the off-image, and .ui-tabs-selected .tab1class have it's background-image set to the on-image. The problem is when we have a <li><a></a></li> or <li><a><span></span></a></li>, no matter what we set as "width:", the tab is of zero width. What is the appropriate way to have an on image and off image for each specific tab? Thanks.
Differences between Tabs 2 and UI Tabs
- AFAIK, in Tabs 2, you used to apply the .tabs() plug-in to the element (usually a "div") wrapping both the tabs-nav and the tabs-container(s). The Tabs 2 plug-in will "auto-discovery" the HTML structure and apply the classes ("tabs-nav" and "tabs-container") or will respect the classes if they were hard-coded in the HTML.
- In UI Tabs, you apply the .tabs() plug-in to the "tabs-nav" (unordered list) element. That's a big change, I think, because if you apply the .tabs() to the wrapping element, the plug-in will add the "tabs-nav" to that element and not to the "ul" element, so the whole thing won't work as expected.
Consequently, if you want the tabs ul to be wrapped in a div called "tabholder", you have to use the following syntax in UI Tabs: $('#tabholder > ul').tabs();. Otherwise, you'll get an unwanted result.
problem incorporating tabs
Hi.
To cut it short: I have a page (index.html) with two div elements: "navigator" and "content". Whenever a link pointing to a page is clicked that page is loaded via $.ajax into the "content" div. When I tried to use the sample code from this article (in a form of a page which I load into the "content" div) I figured out that tab's script won't work. When the page is viewed standalone it does work perfectly as is expected.
I guess there is something wrong with loading pages into divs via $.ajax, but I fail to figure it out.
PS: The index.html page contains all the scripts that I use throughout the site - this is just the central place for scripts and styles.
Please, help me solve this. I am just feeling bad I cannot resolve my bug myself. :-(
With best wishes, Dmitry.
Tabs > Degrading when no JS
I turned JS off and then loaded the demo page. The contents of the tabs doesnt' show up. Are there any plans to implement a graceful degradation?
Tab Events
Can you document what objects the events receive when they're called?
Location of the loading graphic
Hello,
Excuse my ignorance if I am asking for something that already exists, but I am not much of a programmer and have a hard time navigating through JS code. My problem is I do not want the loading graphic to appear in tabs themselves, but rather in the target DIV. Is there a setting that could be easily changed to indicate the element to show the graphic in?
Problem with Tabs + Tablesorter
I have a page working perfectly with Tabs...but as soon as I include the Tablesorter plugin ( http://tablesorter.com/docs/ ) the Tabs stops working. I don't even need to actually *use* the Tablesorter plugin...just including the file in the head breaks Tabs. If I remove Tabs, then Tablesorter works fine.
Any idea what the incompatibility might be, and how to fix it?
UPDATE: turns out it's not the tablesorter.js file, but the accompanying metadata.js file that comes with the tablesorter plugin. I removed each file one by one, and it's metadata.js that's causing the problem.
effects doesn't work after first time around
Hi,
I've got a problem with the tabs: when I use (click) the tabs for the first time, my alert-message (see code below) is shown. clicking subsequently doesn't acivate my alert-message and even worse: it is not applying the fade-in/out effect anymore? When i do remove the code for showing the active tab ($('#container-1').tabs().data('selected.tabs')) then it keeps working OK.
What do I miss (I'm fairly new to JQ). my code:
$(document).ready(function() {
$(function() {
var $tabs = $('#container-1').tabs();
// activate first tab
$tabs.tabs('select', '#fragment-1');
$('#container-1 > ul').tabs({
fx: { opacity: 'toggle', duration: 'fast' },
show: function(ui) {
alert("i'm here"+[[$('#container-1').tabs().data('selected.tabs')]] );
} });
});
});
Back button and bookmarking of tabs
I am trying to make it work, unsuccessfully. Without it this UI/Tabs plugin is quite useless...
Label of selected tab
Working on a dynamic page means you might need to know what the tabs called. If you want the text of it, use this:
var label = $('.ui-tabs-selected > a > span').html();
I found it handy. I also believe there should be a function to find this info, it would help a bit.
Same problem with event handlers
I have experienced the same problem as noted below concerning event handlers. If you try the following:
function getActiveTab() {
var tabs = $('#animation_tabs > ul').tabs();
val = tabs.data('selected.tabs'); alert("getActiveTab() is"); return val; } $('#my_tabs > ul').tabs({select: function(ui) {getActiveTab();}});
You will find that getActiveTab shows the alert message once then fails to work on further tab switches.
Apparently something happens when you try to retrieve the current tab that removes the tab event handler. Consequently I have not been able to get event handlers to work for tabs at all. Tested and experienced on Firefox 3, IE 7 and Opera 9.5.
How do i activate a jquery script in a remote page after loading ?
I am trying to use ui.tabs with Ajax mode.
But cannot find which code to use to start a jquery script on the remote page.
in the remote page I tried
$(document).ready(function(){ alert('ready'); })
$(document).load(function(){ alert('load'); })
without success, the alert does not show up...
All i want is, being able to hide or show an element in a form after loading a tabs.
Say I have a tabmenu of 5 tabs, but want the first and last tabs to act as regular rollover links that link to another page instead of acting like a "real" tab. I.e. I'm using ui tabs as a main navigation menu that for some tabs, shows submenus, but not all the main menu links have submenus. How would I accomplish this so that some act as regular links?
Right now if I click on the first tab, it simply loads the href into the content area for the submenus.
I hope I made this clear enough. Thanks.
Can't get the example working
Hi all, i am playing around with the main example. how do i use the codes in the main example? i just wanted to add an extra tab, i tried:
Added next function in the script part inside the header:
function extraTab(){ $("#example").tabs("add", '#fragment-4', 'Four'); }
and added the next link at the bottom of the body part:
<a href="javascript:extraTab()">Extra tab</a>
Clicking on this link, should add an extra tab, but apparently i am doing it the wrong way?
memory
I use sieve to watch memory consumption. When you click between the ajax tabs, the DOM usage only ever increases.
Eventually a navigation based on ajax tabs will cease to function. How can we get it to reduce DOM between tab choices? Thanks