Вкладки пользовательского интерфейса jQuery + содержимое AJAX Flash (не FOUC) - PullRequest
Новая
       22

Вкладки пользовательского интерфейса jQuery + содержимое AJAX Flash (не FOUC)

1 голос
/ 02 апреля 2012

Я использую вкладки jQuery UI для комбинации меню + DIV ниже. Первый «DIV» (tc0) в настоящее время имеет статический контент, однако последние 3 имеют динамический контент (или AJAX), которые загружаются из 3 файлов PHP. 

<div id="tabs"><!--Tabs-->

<ul class="grid_12 alpha" id="hmenu"> 
    <li><a href="#tc0">Link 1</a></li>
    <li><a href="example1.php">Link PHP 1</a></li>
    <li><a href="example2.php">Link PHP 2</a></li>
    <li><a href="example3.php">Link PHP 3</a></li>
</ul>

<div class="grid_12 alpha tcon" id="tc0">
    <h2 class="grid_12">Dashboard</h2>
</div>

</div><!--/Close Tabs-->

Все файлы PHP имеют ту же структуру, что и div с id = "tc0". Я просто опустил список их всех. Класс "tcon" имеет обычную стилизацию, которая не влияет на непрозрачность или отображение. Сетка_12 и альфа являются частью 960.gs.

Мой jQuery выглядит следующим образом: 

<script type="text/javascript"><!--//TABS-->
    $(document).ready(function(){
        $("#tabs").tabs({ fx: { opacity: 'toggle' } })
    });
</script><!--//END TABS-->

Проблема заключается в следующем:

  • При переходе с одной вкладки на другую перед отображением содержимого новой вкладки содержимое текущей вкладки мигает, а затем выполняется прозрачность.

  • Раньше, когда все мои вкладки имели «статическое» содержимое, прозрачность работала нормально, содержимое вкладок не мигало. Теперь, с содержанием "php", есть эта вспышка.

Я не верю, что это FOUC (Flash из Unstyled Content), так как мой контент мигает в стиле. Проблема в том, что текущая вкладка / содержимое обновляется перед переходом на следующую вкладку.

Если я уберу комбинацию "fx: opacity", она будет работать нормально.

Любые идеи приветствуются.

...