带有“下一个”/“上一个”按钮的 jQuery UI 选项卡

选项卡区域非常棒，但是当您开始使用超过 3 或 4 个不同选项卡时，它们会变得有点拥挤，因此提供其他导航方法是有意义的。 我认为提供通用位置的“下一个”/“上一个”按钮是有意义的，这样您甚至不需要移动光标，只需单击即可浏览每个选项卡。

查看演示   下载文件

jQuery UI 使创建选项卡区域变得非常容易，因此该框架基于此。 但是，就“下一个”/“上一个”按钮而言，我们必须自己动手。 幸运的是，jQuery UI 选项卡确实具有可用于切换选项卡的函数。 我们可以将其绑定到文本链接以完成切换选项卡的操作

$('#my-text-link').click(function() { // bind click event to link
    $tabs.tabs('select', 2); // switch to third tab
    return false;
});

但是我们希望尽可能聪明地做到这一点。 所以我们想

• 将链接动态添加到每个面板。 如果添加或删除了面板，则“下一个”/“上一个”按钮会自动调整以适应新流程。 另外，链接不会在禁用 JavaScript 的情况下尴尬地出现
• 确保第一个面板上没有“上一个”按钮
• 确保最后一个面板上没有“下一个”按钮

这是我的做法

$(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("<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>");
	  }
   		
	});
	
	$('.next-tab, .prev-tab').click(function() { 
           $tabs.tabs('select', $(this).attr("rel"));
           return false;
       });
       

});