可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试):
问题:
I've previously used jquery-ui tabs
extension to load page fragments via ajax
, and to conceal or reveal hidden div
s within a page. Both of these methods are well documented, and I've had no problems there.
Now, however, I want to do something different with tabs. When the user selects a tab, it should reload the page entirely - the reason for this is that the contents of each tabbed section are somewhat expensive to render, so I don't want to just send them all at once and use the normal method of toggling 'display:none' to reveal them.
My plan is to intercept the tabs' select
event, and have that function reload the page with by manipulating document.location.
How, in the select
handler, can I get the newly selected tab index and the html LI object it corresponds to?
$('#edit_tabs').tabs( {
selected: 2, // which tab to start on when page loads
select: function(e, ui) {
var t = $(e.target);
// alert("data is " + t.data('load.tabs')); // undef
// alert("data is " + ui.data('load.tabs')); // undef
// This gives a numeric index...
alert( "selected is " + t.data('selected.tabs') )
// ... but it's the index of the PREVIOUSLY selected tab, not the
// one the user is now choosing.
return true;
// eventual goal is:
// ... document.location= extract-url-from(something); return false;
}
});
Is there an attribute of the event or ui object that I can read that will give the index, id, or object of the newly selected tab or the anchor tag within it?
Or is there a better way altogether to use tabs to reload the entire page?
回答1:
I would take a look at the events for Tabs. The following is taken from the jQuery docs:
$('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
ui.options // options used to intialize this widget
ui.tab // anchor element of the selected (clicked) tab
ui.panel // element, that contains the contents of the selected (clicked) tab
ui.index // zero-based index of the selected (clicked) tab
});
Looks like ui.tab is the way to go.
回答2:
in jQuery UI - v1.9.2
ui.newTab.index()
to get a base 0 index of active tab
回答3:
select: function(e, ui){var index=ui.index;}
works well for me. see: http://api.jqueryui.com/tabs/#events
回答4:
thanks, jobscry - the 'ui.tab' you pointed out gave me the clicked anchor tag, from which I can extract its class, id, href, etc... I choose to use the id to encode my url. My final tabs() call looks like this:
$(document).ready(function() {
$('#edit_tabs').tabs( {
selected: [% page.selected_tab ? page.selected_tab : 0 %],
select: function(e, ui) {
// ui.tab is an 'a' object
// it has an id of "link_foo_bar"
// transform it into http://....something&cmd=foo-bar
var url = idToTabURL(ui.tab.id);
document.location = url;
return false;
}
}).show();
});
回答5:
Or another option I have used for my website is this. Its a basic UL/Div Tab Navigation System. The key to firing the correct tab upon clicking a link to another page with a hash mark attached, is by simply filtering through your UL for the #example that matches whats being passed through the browser. Its like so.
Here is the example HTML :
<div id="tabNav">
<ul class="tabs">
<li><a href="#message">Send a message</a></li>
<li><a href="#shareFile">Share a file</a></li>
<li><a href="#arrange">Arrange a meetup</a></li>
</ul>
</div>
<div id="tabCont">
<div id="message">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div id="shareFile">
<p>Sed do eiusmod tempor incididunt.</p>
</div>
<div id="arrange">
<p>Ut enim ad minim veniam</p>
</div>
</div>
And the Jquery to make it happen :
$(document).ready(function() {
$(function () {
var tabs = [];
var tabContainers = [];
$('ul.tabs a').each(function () {
// note that this only compares the pathname, not the entire url
// which actually may be required for a more terse solution.
if (this.pathname == window.location.pathname) {
tabs.push(this);
tabContainers.push($(this.hash).get(0));
}
});
$(tabs).click(function () {
// hide all tabs
$(tabContainers).hide().filter(this.hash).show();
// set up the selected class
$(tabs).removeClass('active');
$(this).addClass('active');
return false;
});
$(tabs).filter(window.location.hash ? '[hash=' + window.location.hash + ']' : ':first').click();
});
});
That should take care of it for you. I knwo this isn't the cleanest code, but it'll get ya there.
回答6:
in my implementation it works like:
$(document).ready(function() {
$('#edit_tabs').tabs( {
selected: [% page.selected_tab ? page.selected_tab : 0 %],
select: function(e, ui) {
// ui.tab is an 'a' object
var url = ui.tab.href;
document.location = url;
return false;
}
}).show();
});
回答7:
I did find out two ways to to accomplish this requirement, as it's tough for me to put code here, you can have a look at it on http://ektaraval.blogspot.com/2011/09/calling-javascript-when-jquery-ui-tab.html
Hope that helps someone..
回答8:
A quick look into the documentation gives us the solution:
$('#edit_tabs').tabs({ selected: 2 });
The above statement will activate the third tab.