Question

当我点击jQuery UI标签中的链接时，我有一个旋转轮工作。但是轮子出现在链接旁边。我希望它显示在选项卡中div容器的顶部。

我在application.js中的jQuery：

$(function() {
    $( "#tabs" ).tabs({
        ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html(
                    "There was an error loading this tab. Please try again." );
            }
        },
        spinner: '<img src="../images/spin2.gif">'
    });
});

在我的show.html.erb：

中

<div id="tabs">
  <ul id="infoContainer">
    <li><a href="#tabs-1">About</a></li>
    <li><%= link_to '/profiles/profile_messages/', :id => 'qs', :remote => true do %>Messages<span>&nbsp;</span><% end %></li>
  </ul>
  <div id="tabs-1">
  </div>
</div>

我的profile_messsages布局：

<div id="tabs-2">
#where I'd like the spinner to load
<% for message in @user.messages %>
<% end %>
</div>

目前，微调框在链接中的<span>标记内加载。我希望在第二个标签加载时，轮子显示在div容器内。我怎么能这样做？

Answer 1

您可以尝试将position: relative添加到标签<li>元素，然后将微调框绝对放在标签下方。

要启动一些CSS：

#infoContainer li {
    position: relative;
}
.tabSpinner {
    position: absolute;
    left: 0;
    bottom: -50px; /* Or whatever pushes your spinner down low enough */
}

然后你的微调器：

spinner: '<img src="../images/spin2.gif" class="tabSpinner">'

改变jQuery纺车的位置

1 个答案: