更改jQuery旋轉輪的位置

當我單擊jQuery UI選項卡中的鏈接時，我有一個旋轉輪工作。然而輪子出現在鏈接旁邊。我希望它出現在選項卡中div容器的頂部。更改jQuery旋轉輪的位置

我的jQuery在application.js：

$(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容器內。我怎樣才能做到這一點？

來源

2011-10-09 tvalent2

您可以嘗試將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">'

來源

2011-10-09 06:23:42

很好，謝謝！只是好奇：有什麼辦法可以觸發微調，而不必包含''和一個額外的空間？ – tvalent2

@ tvalent2：文檔說你需要''，所以你需要它。但是，你應該能夠設置它的樣式，以便你不會注意到它，也許'display：inline-block;寬度：1px'，然後將該邊上的填充放下1px。 –

更改jQuery旋轉輪的位置

回答

相關問題