JQuery.UI .tabs with Next/Previous Issue.

[jjmclaw]

Hi All,

I’m using the next/previous tabs code from this site with success.

However, I want to use this twice on the same page.

How can I achieve this please.

I am a newbie and could do with any help possible.

Code is shown below.

Thanks JJ

CODE AS FOLLOWS:

$(function() {



var $tabs = $('#tabs').tabs();



$(".ui-tabs-panel").each(function(i){



var totalSize = $(".ui-tabs-panel").size() - 1;



if (i != totalSize) {

next = i + 2;

$(this).append("");

}



if (i != 0) {

prev = i;

$(this).append("");

}



});



$('.next-tab, .prev-tab').click(function() {

$tabs.tabs('select', $(this).attr("rel"));

return false;

});





});

[noahgelman]

I had the same problem a bit ago. You have to make due because the jquery.ui.tabs can only be used once on a page.

[jjmclaw]

Ok, so I can only use this once per page…

Is there another option simular to it, that will work alongside it?

[noahgelman]

Depends on what you’re using it for. Are you switching content, divs, list-items? I know a great script that swaps lists items and can be used a bunch of times on a page.

Also, as a side note, I’m not sure why they didn’t make the jquery.ui.tabs for multiple use. If I have a free weekend I’ll take the time and convert it (or try)

[jjmclaw]

It’s for showing news items from a data base.

I’ve got it on one side for a schedule, which shows the next 4 items, using tabs.ui

So I need it to go through say 4 brief news items all from a db.

Thanks for your help noah!

[noahgelman]

Here is Pajinate, a really good pagination script.

http://th3silverlining.com/2010/04/15/pajination-a-jquery-pagination-plugin/

Here is another I just came across. I haven’t used this one myself yet but it looks really nice.

http://blog.pierrejeanparra.com/jquery-plugins/universal-paginate/demonstration/

Unfortunately both only work on unordered lists and list items. Most pagination scripts do. However if you wrap what you need to paginate in an unordered list and list items, you’re as good as good.

[platypusman]

I don’t think it’s correct that you can’t have multiple tabsets on a single page, it works fine. (Just use a class instead of an ID.)

Ex.:
http://dl.dropbox.com/u/493092/codework/jQuery/jQuery-UI/tabs_prev-next-navigation.html

(*There is an issue with the “Next” link appearing on the last tab when it should not — that’s what brings me to this forum… : )

[Author]

Posts