[jQuery] Re: tabs - initial tab load
I realize now that this was very specific to my project, and I got this to work. Since i am loading all the elements of my page with AJAX, I had to wait for the tabs to be fully loaded, then simply add the content for each fragment. It is a shame that there is no onClick or onShow fired for the first tab when the tabs() function is complete so that we could support lazy loading for the tab content, including the first tab. BTW, I think it would be nice if there was a function defined $.fn.selectedTab(). I would try to write it myself, but I am still a little overwhelmed by the code. - Original Message From: Ariel Jakobovits [EMAIL PROTECTED] To: jquery-en@googlegroups.com Sent: Thursday, April 5, 2007 12:54:12 AM Subject: [jQuery] tabs - initial tab load i have a handler for the tabs onShow event that loads the current tab being opened. this does not get executed for the first tab that is selected by default when the page first loads. how can i get the onShow event to be triggered for the initial tab?
[jQuery] Re: tabs - initial tab load
Ariel Jakobovits schrieb:
I realize now that this was very specific to my project, and I got this to work.
Since i am loading all the elements of my page with AJAX, I had to wait for the
tabs to be fully loaded, then simply add the content for each fragment.
It is a shame that there is no onClick or onShow fired for the first tab when
the tabs() function is complete so that we could support lazy loading for the
tab content, including the first tab.
That would be pretty easy to do, but it would also completely break
existing pages.
The reason why there is no onclick fired for the first tab is that there
is no click ;-)
That has also to do with support for back button...
Using the remote option though does result in lazy loading. So I still
have the feeling that you're using the tabs in a way I didn't design
them for. Or hacked something in that is supported elsehow (no offense
here)...
BTW, I think it would be nice if there was a function defined
$.fn.selectedTab(). I would try to write it myself, but I am still a little
overwhelmed by the code.
Here we go:
jQuery.fn.selectedTab = function() {
var selectedTabs = [];
this.each(function() {
var nav = jQuery('ul.tabs-nav' , this);
nav = nav.size() nav || jQuery('ul:eq(0)', this); //
fallback to default structure
var lis = jQuery('li', nav);
selectedTabs.push(lis.index( lis.filter('.tabs-selected')[0] )
+ 1);
});
return selectedTabs.length 1 ? selectedTabs : selectedTabs[0];
};
It returns a number if you check for one tab interface
$('#container').selectedTab(); // = 1
and an array if you check for multiple interfaces:
$('#container-1, #container-2').selectedTab(); // = [1, 1]
As usual for the plugin it is not a zero-based index. Thus you can do:
var tabs = $('#container-1');
tabs.disableTab(tabs.selectedTab());
Should I add that to the plugin?
-- Klaus
[jQuery] Re: tabs - initial tab load
Klaus Hartl schrieb:
Ariel Jakobovits schrieb:
I realize now that this was very specific to my project, and I got
this to work.
Since i am loading all the elements of my page with AJAX, I had to
wait for the tabs to be fully loaded, then simply add the content for
each fragment.
It is a shame that there is no onClick or onShow fired for the first
tab when the tabs() function is complete so that we could support lazy
loading for the tab content, including the first tab.
That would be pretty easy to do, but it would also completely break
existing pages.
The reason why there is no onclick fired for the first tab is that there
is no click ;-)
That has also to do with support for back button...
Using the remote option though does result in lazy loading. So I still
have the feeling that you're using the tabs in a way I didn't design
them for. Or hacked something in that is supported elsehow (no offense
here)...
BTW, I think it would be nice if there was a function defined
$.fn.selectedTab(). I would try to write it myself, but I am still a
little overwhelmed by the code.
Here we go:
jQuery.fn.selectedTab = function() {
var selectedTabs = [];
this.each(function() {
var nav = jQuery('ul.tabs-nav' , this);
nav = nav.size() nav || jQuery('ul:eq(0)', this); //
fallback to default structure
var lis = jQuery('li', nav);
selectedTabs.push(lis.index( lis.filter('.tabs-selected')[0] ) +
1);
});
return selectedTabs.length 1 ? selectedTabs : selectedTabs[0];
};
It returns a number if you check for one tab interface
$('#container').selectedTab(); // = 1
and an array if you check for multiple interfaces:
$('#container-1, #container-2').selectedTab(); // = [1, 1]
As usual for the plugin it is not a zero-based index. Thus you can do:
var tabs = $('#container-1');
tabs.disableTab(tabs.selectedTab());
And it re
[jQuery] Re: tabs - initial tab load
I do think the selectedIndex function should be added to the plugin.
In regards to how i am using the tabs...
What I am doing is essentially something like this:
var tabsModule = new TabsModule(); // outputs 2 tabs in the page, with no
content in either tab
tabsModule.addTabContent(1,new ContentModuleA());
tabsModule.addTabContent(2,new ContentModuleB());
tabsModule.addTabContent(2,new ContentModuleC());
What this means is that the tabs themselves do not know what is inside of them.
Thus I cannot use the remote function when I am creating the tabs.
What I am doing is, after the tabs are created, I am adding content to their
divs. The content may come from many files, not just one.
I understand that there is no CLICK event for the first tab, but there could be
a SHOW event, no? That way, i can say:
jQuery('div.tab-container',this.latestContent).tabs({
remote: false,
fxFade: true,
fxSpeed: 'fast',
onShow: function(clicked,toShow,toHide) {
window.setTabContent(toShow);
}
});
window.setTabContent = function (tabFragment)
{
if (tabFragment.innerHTML == '') {
if (tabFragment.id == 'tab1')
tabFragment.appendChild(new ContentModuleA());
else {
tabFragment.appendChild(new ContentModuleB());
tabFragment.appendChild(new ContentModuleC());
}
}
}
- Original Message
From: Klaus Hartl [EMAIL PROTECTED]
To: jquery-en@googlegroups.com
Sent: Thursday, April 5, 2007 2:42:07 AM
Subject: [jQuery] Re: tabs - initial tab load
Ariel Jakobovits schrieb:
I realize now that this was very specific to my project, and I got this to
work.
Since i am loading all the elements of my page with AJAX, I had to wait for
the tabs to be fully loaded, then simply add the content for each fragment.
It is a shame that there is no onClick or onShow fired for the first tab when
the tabs() function is complete so that we could support lazy loading for the
tab content, including the first tab.
That would be pretty easy to do, but it would also completely break
existing pages.
The reason why there is no onclick fired for the first tab is that there
is no click ;-)
That has also to do with support for back button...
Using the remote option though does result in lazy loading. So I still
have the feeling that you're using the tabs in a way I didn't design
them for. Or hacked something in that is supported elsehow (no offense
here)...
BTW, I think it would be nice if there was a function defined
$.fn.selectedTab(). I would try to write it myself, but I am still a little
overwhelmed by the code.
Here we go:
jQuery.fn.selectedTab = function() {
var selectedTabs = [];
this.each(function() {
var nav = jQuery('ul.tabs-nav' , this);
nav = nav.size() nav || jQuery('ul:eq(0)', this); //
fallback to default structure
var lis = jQuery('li', nav);
selectedTabs.push(lis.index( lis.filter('.tabs-selected')[0] )
+ 1);
});
return selectedTabs.length 1 ? selectedTabs : selectedTabs[0];
};
It returns a number if you check for one tab interface
$('#container').selectedTab(); // = 1
and an array if you check for multiple interfaces:
$('#container-1, #container-2').selectedTab(); // = [1, 1]
As usual for the plugin it is not a zero-based index. Thus you can do:
var tabs = $('#container-1');
tabs.disableTab(tabs.selectedTab());
Should I add that to the plugin?
-- Klaus
