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

所以我想我的问题是如何使用新网址加载标签？

Answer 1

以上答案在JQuery 1.9+中不适用于描述符here。要使用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

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

...更改要加载的网址。

jquery ui ajax tab - 重新加载标签，还是更改标签位置？

2 个答案: