jquery ui ajax选项卡 - 重新加载选项卡，或更改选项卡的位置？

问题描述：

我在其中一个站点上显示了一个选项卡布局，显示项目日志。这些项目是“分页”的。jquery ui ajax选项卡 - 重新加载选项卡，或更改选项卡的位置？

该选项卡最初加载这样...

<li><a href="/im/price_change_log/${item_id}">Price Log</a></li>

在该选项卡，我有一些图标，代表未来和前一页。点击后，我想在此选项卡中加载结果的下一页或上一页。

我该怎么办？我需要更改标签的网址，然后强制重新加载。 URL可能是...

/im/price_change_log/<item_id>/<page>

JS的寻呼机部分看起来像......

function bind_ui(){ 
     $(".prev_page").click(function(){ 
      var page = current_page; 
      console.log("Previous Page - current_page("+page+")"); 
     }); 
     $(".next_page").click(function(){ 
      var page = current_page; 
      console.log("Next Page - current_page("+page+")"); 
     }); 
    };

，所以我想我的问题是如何加载标签与新的网址是什么？

答

-edit 2-

如果您使用jQuery 1.9，请参阅扎希德·里亚兹的答案

重装标签（#tabs被标签容器）：

function reloadCurrentTab(){ 
    var $tabs = $('#tabs').tabs(); 
    var selected = $tabs.tabs('option', 'selected'); 
    $("#tabs").tabs('load',selected); 
}

改变标签：

$tabs.tabs('select',[INDEX OF THE TAB]);

获得实际标签索引：

$tabs.tabs('option', 'selected'); // => 0

与您的代码....这将是这样的：

function bind_ui(){ 
    $(".prev_page").click(function(){ 
     var $tabs = $('#tabs').tabs(); 
     var selected = $tabs.tabs('option', 'selected'); 
     if(selected != 0){ 
      $tabs.tabs("url" , selected-1, newUrl) 
      $tabs.tabs('select',selected - 1); 
     } 
    }); 
    $(".next_page").click(function(){ 
     var $tabs = $('#tabs').tabs(); 
     var selected = $tabs.tabs('option', 'selected'); 
     if(selected < $('#tabs').length){ 
      $tabs.tabs("url" , selected+1, newUrl) 
      $tabs.tabs('select',selected + 1); 
     } 
    }); 
};

CNC中

我发现在jQuery的UI网页此代码示例。你可以把这样的东西：

$("#tabs").tabs("url" , indexOfTheTab , newUrl);

...更改URL加载。

这将重新加载的标签工作，但它只会与有当前的URL重新加载它。我需要更改网址（以便我可以将页面作为参数传递） – Ominus 2012-03-21 13:36:02

哦，okok。现在看看编辑是否回答你的问题;） – Nullpo 2012-03-21 14:05:42

答

以上答案在描述符here的JQuery 1.9+中不起作用。要使用jQuery UI的标签的工作1.9+你必须做这样的事情

function bind_ui(){ 
    $(".prev_page").click(function(){ 
     var $tabs = $('#tabs').tabs(); 
     var selected = $tabs.tabs('option', 'active'); 
     if(selected != 0){ 
      $($tabs.data('uiTabs').tabs[selected - 1]).find('.ui-tabs-anchor').attr('href', newUrl); 
      $tabs.tabs('active', selected - 1); 
      $tabs.tabs("load", selected - 1); 
     } 
    }); 
    $(".next_page").click(function(){ 
     var $tabs = $('#tabs').tabs(); 
     var selected = $tabs.tabs('option', 'active'); 
     if(selected < $tabs.data('uiTabs').tabs.length){ 
      $($tabs.data('uiTabs').tabs[selected + 1]).find('.ui-tabs-anchor').attr('href', newUrl); 
      $tabs.tabs('active', selected + 1); 
      $tabs.tabs("load", selected + 1); 
     } 
    }); 
};

jquery ui ajax选项卡 - 重新加载选项卡，或更改选项卡的位置？

相关推荐