Блог

У меня работает вращающееся колесо, когда я нажимаю на ссылку во вкладках пользовательского интерфейса jQuery. Однако колесо появляется рядом со ссылкой. Я хочу, чтобы оно отображалось в верхней части div контейнера на вкладках.

Мой 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>amp;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 во время загрузки второй вкладки. Как я могу это сделать?

Вы могли бы попробовать добавить 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">'