jQuery UI Ajax选项卡-重新加载选项卡，还是更改选项卡位置？

Question

我在一个站点上有一个选项卡布局，其中显示项目日志。 这些项目是“分页的”。

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

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

所以我想我的问题是如何用新的URL加载选项卡？

Answer 1

上面的答案将无法在JQuery 1.9+中用作此处的描述器。 要使用jQuery ui tabs 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);
        }
    });
};

Answer 2

编辑2

如果您使用Jquery 1.9，请参阅Zahid Riaz的回答

重新加载标签（#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 );
        }
    });
};

-编辑-

我在jquery-ui主页中找到了此代码示例。 您可以输入以下内容：

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

...更改要加载的URL。