Как избежать FOUC на динамически генерируемых вкладках пользовательского интерфейса jQuery - PullRequest
Новая
       43

Как избежать FOUC на динамически генерируемых вкладках пользовательского интерфейса jQuery

3 голосов
/ 14 марта 2011

Я динамически создаю несколько вкладок, используя вкладки jQUery UI - вкладки создаются с помощью foreach на странице просмотра следующим образом (некоторая разметка кодового обозначения): 

<script type="text/javascript"> 
$(function($) {
   $('#plants').tabs('paging', { follow: true } );
});
</script>

<div id="plants">
    <ul>
    <?php foreach ($plants as $row):
      echo '<li><a href="#tabs-'.$row->plant_id.'">'.$row->plant_name.'</a></li>';
      endforeach; ?>
    </ul>
    <?php if (!empty($plants)):
          foreach ($plants as $row): ?>
        <div class="block" id="tabs-<?php echo $row->pet_id; ?>">
             <div class="grid_6">
                            <p>
                <?php echo '<h1>'.$row->pet_name.'</h1>'; ?>
                                etc...
                </p>
                     </div>
                 </div>
               <?php
               endforeach;
               else:
               endif; ?>
</div>

Как и выше, вкладки формируются нормально. Проблема в том, что это хороший Flash-контент. Это происходит на IE, Chrome, FF.

Я попробовал вариант CSS в документации по jQuery, не работал.

Есть простой JS, который вставляет стиль CSS в <head>, а затем применяет {display:none} к определенному id - но это заставляет мои панели исчезать, ожидая взаимодействия с пользователем. Мне нужно, чтобы первая панель была видна пользователю при загрузке, а также другие вкладки сверху - без чертова FOUC.

Кто-нибудь знает, как определенно разрешить FOUC на вкладках jQuery UI? Это действительно не очень хорошо выглядит, и мне, возможно, придется вообще отказаться от вкладок, если я не смогу решить эту проблему.

Любые указатели / дорожные карты очень ценятся!

Ответы [ 3 ]

2 голосов
/ 22 марта 2012

Скрыть всю страницу (элемент <html>) до , когда DOM готов, затем, когда DOM готов, вы делаете элемент html видимым снова: 

$('html').css('visibility','hidden');
$(function() {
    $('html').css('visibility','visible');
    $('#tabs').tabs();
});

Это работает, потому что элемент html доступен ко времени, когда этот javascript встречается в head, до того, как станут доступны любые другие элементы DOM (например, body).

1 голос
/ 15 марта 2011

Документация по пользовательскому интерфейсу JQuery предлагает: 

...prevent a FOUC (Flash of Unstyled Content) before tabs are initialized

Add the necessary classes to hide an inactive tab panel to the HTML right away - note that this will not degrade gracefully with JavaScript being disabled:

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

Не уверен, пытались ли вы это сделать или действительно ли это уместно.

0 голосов
/ 15 марта 2011

Я обнаружил, что использование функции tabs () внутри документа, готового в теге head, предотвратило для меня неустановленную вспышку вкладок .... 


$(document).ready(function() {

    //fire off the tabs
    $(function() {
        $( "#tabs" ).tabs();
    });

});

Другой подход, который я использовал для получения вкладокдля отображения через ajax, это запрос ajax, который записывает вкладки через jquery.tmpl.

...