Question

我正在使用Jquery UI TABS创建一个页面。在其中一个标签中，我想对评论进行分页。我想要这样的东西。当用户点击页面编号时，链接的页面数据将通过选项卡中的ajax加载。

这是我的代码

<script type="text/javascript">
 $(function() {
  $("#tabs").tabs();
 });



 $('#demo').tabs({
    load: function(event, ui) {
        $('a', ui.panel).click(function() {
            $(ui.panel).load(this.href);
            return false;
        });
    }
});




 </script>

如何更改此内容，以便内容中的任何链接都可以使用id“pagination”

<a href="/coments?page=12&user_id=12" id="pagination">12</a>

?? 先谢谢

I tried recently like this even  and no luck.

这是http://www.bannerite.com/jquerytest/index2.php

在这里工作

<script type="text/javascript">
    $(function() {          
        $("#tabs").tabs();
        var hijax = function(panel){
            $('a', panel).click(function() {            
                /**makes children 'a' on panel load via ajax, hence hijax*/
                $(panel).load(this.href, null, function(){
                    /**recursively apply the hijax to newly loaded panels*/
                    hijax(panel);                  
                });

                /**prevents propagation of click to document*/
                return false;
            });

            $('form', panel).css({background: 'yellow'}).ajaxForm({
                target: panel,
            });    
        };

        $('#demo ul').tabs({
            /**initialize the tabs hijax pattern*/
            load: function(tab, panel) {
                hijax(panel);
            }
        }); 
    });
</script>

HEre是Karl给出的HTML部分，但没有成功。点击Test链接时会转到另一页........ 点击

时

我想在这里发布HTML，但由于信誉较少的用户＆lt; 10无法使用我在此处发布的链接提供HTML

http://gevork.ru/2009/12/31/jquery-ui-tab-and-pagination-html/#more-58

Answer 1

它可能不起作用的一个原因是#demo在ready事件中没有被制表，而是立即。只要不使用底层脚本方法，就需要将此调用移动到传递给$的匿名函数中。

$(function() {    
    $('#tabs').tabs({
        load: function(event, ui) {
            $('a', ui.panel).click(function() {
                $(ui.panel).load(this.href);
                return false;
            });
        }
    });
});

除此之外 - 不知道实际的HTML - 我无法判断是否有其他错误。

'任何带有“pagination”的链接听起来好像有多个。在这种情况下：一个id必须是唯一的，所以它应该在这里改成一个类。

Answer 2

我认为你的代码错误，你的面板应该是ui.panel。这对我有用。

<script type="text/javascript">
    $(function() {
        var hijax = function(panel) {
            $('a.pagination', panel).click(function(){
                $(panel).load(this.href, {}, function() {
                    hijax(this);
                });
                return false;
            });
        };
        $("#tabs").tabs({
            ajaxOptions: {
                error: function(xhr, status, index, anchor) {
                    $(anchor.hash).html("Couldn't load this tab.");
                },
            },
            load: function(event, ui) {
                hijax(ui.panel);

            }
        });
    });
</script>

Answer 3

我写了一个插件来做Hijax，似乎migth帮助你。您将使用而不是Tabs插件，因此您可能必须设置选项卡以在css中正确显示（我不熟悉选项卡插件）。

您可以下载，查看文档和示例：www.yarontadmor.co.cc/hijax.php

Jquery UI的Tab内容中的分页

3 个答案: