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。任何protips或指针都是最受欢迎的。谢谢！

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

Answer 1

在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 2

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

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

该函数期望int不是字符串，也是下一个和后退索引不正确，请参阅下面的修订代码

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

Answer 3

测试它需要一点修复

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

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

3 个答案: