个人中心
gpt4 book ai didi

php - 如何在动态生成的 jQuery UI 选项卡上避免 FOUC

转载 作者：搜寻专家 更新时间：2023-10-31 20:53:19 26 4
gpt4 key购买 nike

我使用 jQUery UI 选项卡动态创建多个选项卡——这些选项卡是使用 foreach 创建的在 View 页面上如下(一些 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 Of Unstyled Content。它发生在 IE、Chrome、FF 上。

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

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

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

非常感谢任何指示/路线图!

最佳答案

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

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

这是有效的，因为 html在 head 中遇到此 javascript 时元素可用，在任何其他 DOM 元素(如 body)可用之前。

关于php - 如何在动态生成的 jQuery UI 选项卡上避免 FOUC，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5294267/

26 4 0
文章推荐： php - Zend Php/Zend 服务器和简单的 php/Wamp 服务器之间的区别
文章推荐： php - 检查垃圾邮件蜜 jar 的电子邮件地址
文章推荐： php - 如果 Apache2 上每秒有太多请求，则阻止 IP
文章推荐： apache - php.ini 与 .htaccess 中的 suPHP
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com