jQuery UI选项卡-下一个和上一个按钮

Question

我正在看Chris Coyier的教程，该教程为Jquery UI选项卡创建动态的Next和Previous按钮。 这些按钮根据是指向第一个还是最后一个选项卡来显示/隐藏它们自己。 它在他的示例（从2009年开始）中可以很好地工作。快进到2011年，不幸的是，导航不适用于新版本的jquery（特别是jquery-1.6.4）。

供参考，原始教程： http : //css-tricks.com/2361-jquery-ui-tabs-with-nextprevious/

Coyier脚本正确地将“下一个/上一个”按钮附加到ui-tabs-panel中。 但是，这些链接可能是：1）不要单击任何内容，2）第一个“下一个”链接直接转到最后一个选项卡，并且上一个链接不起作用，或者3）下一个/上一个链接仅转到第一个和最后一个标签，跳过这两个标签之间的所有内容。

我需要的是一种显示和隐藏下一个或上一个按钮的方式，具体取决于查看者正在查看第一个还是最后一个选项卡。

到目前为止，我的代码是...

$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;
    });

});

这些按钮可以完美地浏览我的标签。 但是，我迫切需要正确显示和隐藏第一个和最后一个按钮。

我尝试使用Coyier使用的jquery-custom脚本，该脚本仍然无法正常工作。 因此，我认为是Jquery的现代版本导致了原始教程的问题。 我也是jquery newb。 任何提示或指示，将不胜感激。 谢谢！

（注意：这些选项卡在受密码保护的开发环境中使用，因此我无法提供有效的示例。在这种情况下，jQuery.noConflict模式是必需的，不能删除。）

Answer 1

测试是否需要一点修复

 $(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;
    });
});

Answer 2

在Coyier的示例中，他基于当前面板和totalSize将下一个和上一个链接附加到每个面板。 这就是为什么prev没有显示在面板1中，而next没有显示在最后一个面板中的原因。 您的代码正在调用.show（）所有类名为'events-navprev'的元素。

您是否尝试过使用他的代码？：

      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>");
      }

另一个选项，将您的.show更改为仅显示当前面板的链接：

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

和

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

编辑：

这是直接来自本教程的Coyier代码的小提琴，它可以正常工作： http : //jsfiddle.net/fehays/apRrq/

我建议从此开始，然后弄清楚您所做的不同。

Answer 3

我认为您可以通过使用parseInt将索引转换为int来解决此问题，如下所示

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

该函数期望一个int值不是一个字符串，并且next和back索引不正确，请参见下面的修改后的代码

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;
   });