Jquery UI Tabs - Next and Previous Buttons

I'm looking at Chris Coyier's tutorial for creating dynamic Next and Previous buttons for Jquery UI tabs. The buttons show/hide themselves according to if they are pointing at the first or last tab. It works perfectly on his example, which is from 2009. Fastforward to 2011, the navs unfortunately does not work with new versions of jquery (specifically, jquery-1.6.4).

For reference, the original tutorial: http://css-tricks.com/2361-jquery-ui-tabs-with-nextprevious/

The Coyier script correctly appends the Next / Previous buttons into the ui-tabs-panel. However, the links either: 1) do not click through to anything, 2) the first "Next" link goes right to the last tab, and the Previous link does not work, or 3) the Next / Previous links go only to the first and last tabs, skipping everything in between.

What I need is a way show and hide the next or previous buttons, depending on whether a viewer is looking at the first or last tab.

The code I have so far is...

$j = jQuery.noConflict();
$j(function() {

    var jQuery$tabs = $j('#tabs').tabs();
    $j(".events-navnext, .events-navprev").hide();

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

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

        if (i != totalSize) {
        next = i + 2;
            $j(".events-navnext").show();
        }
        if (i != 0) {
        prev = i;
            $j(".events-navprev").show();
        }
    });
    $j('.events-navnext').click(function(){ 
        var $tabs = $j('#tabs').tabs();
        var selected = $tabs.tabs('option', 'selected');
        $tabs.tabs('select', selected+1);
        return false;
    });
    $j('.events-navprev').click(function(){ 
        var $tabs = $j('#tabs').tabs();
        var selected = $tabs.tabs('option', 'selected');
        $tabs.tabs('select', selected-1);
        return false;
    });

});

The buttons work perfectly to navigate through my tabs. BUT, I'm in desperate need to properly show and hide the first and last buttons.

I've tried using the jquery-custom script that Coyier used,开发者_如何学编程 which still did not work. Thus I assume it's the modern version of Jquery that's causing the problems with the original tutorial. I'm also a jquery newb. Any protips or pointers are most appreciated. Thank you!

(Notes: These tabs are being used in a password-protected dev environment, so I'm unable to provide the working example. In this instance the jQuery.noConflict mode is required and can't be removed.)

---

In the Coyier's example, he is appending the next and previous links to each panel based on the current panel and the totalSize. This is why the prev doesn't show up in panel 1 and next doesn't show up in the last panel. Your code is calling .show() all elements with a class name of 'events-navprev'.

Have you tried using his code?:

      if (i != totalSize) {
          next = i + 2;
              $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>");
      }


      if (i != 0) {
          prev = i;
              $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>");
      }

Another option, change your .show to only show the link for the current panel:

$j(this).find(".events-navnext").show();

and

$j(this).find(".events-navprev").show();

EDIT:

Here's a fiddle of Coyier's code straight from the tutorial and it works fine: http://jsfiddle.net/fehays/apRrq/

I would suggest starting with that and then figuring out what you did differently.

---

I think you can solve this problem by converting the index to an int using parseInt as shown below

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

The function expects an int not a string, also the next and back index is not correct, see the revised code below

var $tabs = $('#tabs').tabs();
$(".ui-tabs-panel").each(function(i) {
        var totalSize = $(".ui-tabs-panel").size() - 1;

        if (i != totalSize) {
            var next = i + 1;
            $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>");
        }

        if (i != 0) {
            var prev = i-1;
            $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>");
        }

    });

    $('.next-tab, .prev-tab').click(function() {
       $tabs.tabs('select', parseInt($(this).attr("rel")));
       return false;
   });

---

test that it's need a little fix

 $(document).ready(function () {
    var $tabs = $('#tabs').tabs();

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

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

        if (i != totalSize) {
            next = i + 1;
            $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>");
        }

        if (i != 0) {
            prev = i-1;
            $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>");
        }

    });

    $('.next-tab, .prev-tab').click(function () {
        var cc = $(this).attr("rel");

        $('#tabs').tabs({ active: parseInt(cc) });
        //  $('#tabs').tabs({active:1})
        return false;
    });
});