【问题标题】:jQuery UI Tabs: Load link in tab / Reload entire pagejQuery UI 选项卡:在选项卡中加载链接/重新加载整个页面
【发布时间】:2013-11-20 01:04:21
【问题描述】:

我正在为我的页面使用 jQuery UI (1.10.2) 选项卡。我使用此代码加载当前选项卡内的所有链接。

<script type="text/javascript">
$(function() {
    $("#assetinfo_tabs").tabs({
        ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html("Error reading content. :(" );
            }
        },
        spinner: "<em>Loading</em> <img src='images/ajax-loader.gif'>",
        load: function(event, ui) {
        $(ui.panel).delegate('a', 'click', function(event) {
            $(ui.panel).load(this.href);
                    event.preventDefault();
            });
        }
    });
});
</script>

现在我希望能够添加一些方法来“标记”链接,并且它们会在单击时重新加载整个页面,而不仅仅是在选项卡内加载。我认为应该可以通过向链接添加一个类,并且只需使用上面的加载段来忽略该类的所有链接,但我无法让它工作。

<script type="text/javascript">
$(function() {
    $("#assetinfo_tabs").tabs({
        ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html("Error reading content. :(" );
            }
        },
        spinner: "<em>Loading</em> <img src='images/ajax-loader.gif'>",
        load: function(event, ui) {
            $(ui.panel).delegate('a', 'click', function(event) {
                if (!$(this).hasClass('reload')) {
                    $(ui.panel).load(this.href);
                        event.preventDefault();
                }
            });
        }
    });
});    
</script>

【问题讨论】:

    标签: javascript jquery jquery-ui tabs


    【解决方案1】:

    我想通了!我没有触发“单击”,而是将其更改为“.tablink 单击”,这样我就可以将此类添加到要在选项卡中打开的链接中。

    这与我想要的相反,但我会接受它:)

    <script type="text/javascript">
    $(function() {
        $("#assetinfo_tabs").tabs({
            ajaxOptions: {
                error: function( xhr, status, index, anchor ) {
                    $( anchor.hash ).html("Error reading content. :(" );
                }
            },
            spinner: "<em>Loading</em> <img src='images/ajax-loader.gif'>",
            load: function(event, ui) {
                $(ui.panel).delegate('.tablink', 'click', function(event) {
                    $(ui.panel).load(this.href);
                        event.preventDefault();
                });
            }
        });
    });
    </script>
    

    【讨论】:

      【解决方案2】:

      我会说它不起作用,因为$(this) 实际上是指事件,而不是选项卡。尝试使用 ui.index 获取单击选项卡的索引,抓取该对象并检查它是否具有相关类。

      【讨论】:

      • 既然事件是一个被点击的链接,而“this”是用来获取href的,难道不应该也能获取该链接/事件的类吗?另外,我不知道我们说的是不是同一件事?如果我想重新加载整个页面,我看不到 tab-index 的相关性?
      猜你喜欢
      • 2012-09-27
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多