[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