3

我使用 jQUery UI 选项卡动态创建多个选项卡——这些选项卡是使用foreach视图页面上的 a 创建的，如下所示（一些 codeigniter 标记）：

<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>

如上所述，标签形成良好。问题是无样式内容的好 ol' Flash。它发生在 IE、Chrome、FF 上。

我已经尝试过 jQuery 文档中的 CSS 选项，但没有成功。

有一个简单的 JS 插入一个 CSS 样式<head>，然后应用{display:none}一个特定的id- 但这使我的面板消失，等待用户交互。我需要加载时用户可以看到第一个面板，以及顶部的其他选项卡——没有该死的 FOUC。

有谁知道如何在 jQuery UI 选项卡上明确解决 FOUC？它真的看起来不太好，如果我无法解决这个问题，我可能不得不完全放弃标签。

非常感谢任何指针/路线图！

4

3 回答 3

2

在 DOM 准备好之前隐藏整个页面（<html>元素），然后在 DOM 准备好后让 html 元素再次可见：

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

这是有效的，因为在任何其他 DOM 元素（如 ）可用之前，在html中遇到此 javascript 时该元素可用。headbody

于 2012-03-22T14:23:28.327 回答
1

JQuery UI 文档建议：

...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>

不确定您是否尝试过这个，或者它是否确实相关。

于 2011-03-14T21:42:33.557 回答
0

我发现在 head 标签中准备好的文档中触发 tabs() 函数可以防止我没有样式化的标签闪烁....


$(document).ready(function() {

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

});

我用于通过 ajax 显示选项卡的另一种方法是通过 jquery.tmpl 写入选项卡的 ajax 请求。

于 2011-03-15T02:15:05.253 回答