Jquery UI选项卡 - Next和Previous按钮

我在查看Chris Coyier的教程，为Jquery UI选项卡创建动态Next和Previous按钮。这些按钮根据是否指向第一个或最后一个选项卡来显示/隐藏自己。它的工作原理完全在他的例子中，从2009年开始。到2011年为止，不幸的是navs不支持jquery的新版本（特别是jquery-1.6.4）。Jquery UI选项卡 - Next和Previous按钮

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

的Coyier脚本正确追加/下一按钮到用户界面的选项卡面板。然而，链接要么：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自定义脚本，它仍然没有工作。因此，我认为这是Jquery的现代版本，它会导致原始教程的问题。我也是一个jQuery新手。任何protip或指针是最赞赏。谢谢！

（注意：这些选项卡正在被密码保护的开发环境中使用，所以我无法提供工作示例，在这种情况下，jQuery.noConflict模式是必需的，无法删除。）

来源

2011-09-28 quiet0ne

在Coyier的例子中，他基于当前面板和totalSize将每个面板的下一个和上一个链接附加到其中。这就是为什么prev不显示在面板1中，而接下来不显示在最后面板中的原因。您的代码正在调用.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/

我会建议从那开始，然后搞清楚你做了什么不同。

来源

2011-09-28 17:52:03 fehays

是的，我试着直接从盒子里使用Coyier的代码。链接显示可以，但它们并不真正起作用。这就是为什么我要去frankencode路线！我尝试了你添加的脚本作为其他选项，这使我获得了与我发布的内容相同的结果。谢谢你！ – quiet0ne

你可以发布一些html吗？由于您在所有链接上调用.show（），因此您正在执行此操作的方式不起作用。也许你在每个面板里都没有next/prev链接？ – fehays

看我的编辑。我发布了一个小提琴，它使用css-tricks中的代码很好地工作 – fehays

我想你可以通过索引转换为使用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; 
    });

来源

2012-02-10 11:02:46 sawe

测试修改后的代码，它需要一点点修复

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

来源

2013-04-20 17:14:11 Seeker

Jquery UI选项卡 - Next和Previous按钮

回答

相关问题