Вкладки Jquery, неформатированный список вспыхивает после перезагрузки jQuery HTML в Firefox

Question

Я использую последние вкладки jQuery, и все мои вкладки (и другое содержимое над ними) находятся внутри содержащего элемента Div. На одной из вкладок есть форма, и когда форма отправляется, она обрабатывается с помощью AJAX, а затем возвращаемый HTML заменяет весь содержащий Div. Этот возвращаемый HTML снова включает вкладки.

После замены HTML я перепривязываю функциональность jQuery к списку:

$('#tabs').tabs( { fx: { opacity: 'toggle' } } );

Прочитав другие вопросы, я использую class="ui-tabs" на UL и class="ui-tabs-hide" на LI, чтобы скрыть все до того, как он отформатирован.

В IE8 и Chrome это работает нормально. Однако в Firefox неформатированный список кратко отображается между обновлением HTML и форматируемыми вкладками (он также очень кратко работает при первой загрузке).

Есть идеи, как этого избежать, пожалуйста?

Answer 1

Из jQueryUI документы :

... предотвратить FOUC (Flash из неустановленного содержимого) до инициализации вкладок

Добавьте необходимые классы, чтобы сразу скрыть неактивную панель вкладок в HTML - обратите внимание, что> это не будет ухудшаться из-за отключенного JavaScript:

<div id="example" class="ui-tabs">

<div id="a-tab-panel" class="ui-tabs-hide"> </div>

</div>

class="ui-tabs-hide" должно идти на каждой панели, а не на элементах списка вкладок.

Это не обязательно исправит список, не имеющий стиля; Если вы реализуете вышеизложенное правильно и по-прежнему получаете FOUC, вам следует скрывать родительский элемент списка, пока вы не загрузите новый контент и не добавите в список табификацию. Для этого можно использовать методы $ (). Hide () и .show ().

Answer 2

У меня только что была похожая проблема, другое решение, которое я нашел, которое работало для навигации по вкладкам, это добавление класса "ui-tabs-nav" к тегу <ul> на вкладке nav (т.е. <ul class = "ui-tabs-nav">) который выглядит следующим образом:

<div id="tabs" class="ui-tabs">

<ul class = "ui-tabs-nav">
    <li><a href="x.html" title="ajax_content">Menu item A </a></li>
    <li><a href="x.html" title="ajax_content">Menu item B.</a></li>
    <li><a href="x.html" title="ajax_content">Menu item C</a></li>
    <li><a href="x.html" title="ajax_content">Menu item D</a></li>  

</ul>

Сценарий вкладки Jquery добавляет класс "ui-tabs-nav" к <ul> автоматически при запуске сценария, но, если вы поместите его в html вручную, будет вставлен соответствующий css для вашего меню вкладки, даже при задержке загрузки скрипта вкладки. Надеюсь это поможет!

Answer 3

Вариант использования HeyPops свойства visibility, но в вашей таблице стилей CSS: используйте классы, которые добавляются после инициализации .tabs(), такие как класс .ui-tabs. Пример CSS:

.tab-this { visibility: hidden; }
.tab-this.ui-tabs { visibility: visible; }

А затем просто добавьте этот класс (tab-this) в div, который вы вкладываете, и любой другой контент с вкладками на вашем сайте.

Answer 4

Этот обходной путь работает намного чище, чем я вижу, поскольку он также предотвращает появление UL. Добавьте style = "visibility: hidden" в DIV, который содержит UL и все панели вкладок, например:

<div id="tabs" style="visibility:hidden">
  <ul>
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>
  <div>
    <div id="#tab1"></div>
    <div id="#tab2"></div>
    <div id="#tab3"></div>
  </div>
</div>

затем, когда вы вкладываете DIV, сделайте его видимым после того, как отформатировано, например:

$('#tabs').tabs({ options }).css('visibility','visible');

Использование видимость: скрытый вместо display: none означает, что все элементы внутри вкладки DIV будут иметь размер и положение, что не имеет место для display: none .

Answer 5

Это, кажется, не работает все время. Я рекомендую использовать ответ Kelso.b, а не решение jQuery docs. Вот пример.

/* to hide flash styles on tabs pages - in this example customtabs is the parent element */
.customtabs {
  display: none;
}

Затем в закладках jQuery добавьте метод show.

$(function() {
  $( "#tabs" ).tabs({

  });
  $( ".customtabs" ).css("display","inline");
});