如何避免对动态生成的jQuery UI选项卡

问题描述：

FOUC

我动态创建使用jquery UI选项卡多个标签 - 突片的图页上使用foreach创建如下（一些笨标记）：如何避免对动态生成的jQuery UI选项卡

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

如上所述，标签形成良好。问题是“无风格内容的闪光”。它发生在IE，Chrome，FF上。

我试过jQuery文档上的CSS选项，没有工作。

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

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

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

您是否有在线演示向我们展示？ – 2011-03-14 08:38:21

看到我的答案是一个伟大的方式来做到这一点。 – Stefan 2012-04-04 15:36:04

答

我发现，发射准备在头标记文档内的卡口（）函数防止标签对我来说那无样式闪存....


$(document).ready(function() { 

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

});

一种不同的方法我用于获取选项卡通过ajax显示，是一个通过jquery.tmpl写入标签的ajax请求。

有趣的是，使事情变得更糟，闪存实际上需要更长的时间与document.ready指令 - 这发生在将

你还在加载什么条款或脚本？ – Peter 2011-03-16 09:56:33

我只是使用jQuery的Ajax请求... jquery模板写入标签，然后我发射标签...这都是jquery ... – Peter 2011-03-16 09:59:24

答

JQuery UI docs提示：如果

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

不知道你已经尝试过这一点，或者如果它确实是相关的。

谢谢，但我试过了，它没有什么区别 - 我想知道是否有一种方法通过ajax按需加载其他标签 - 任何想法？ – pepe 2011-03-14 22:27:58

答

隐藏整个页面（在<html>元素）前DOM就绪，那么一旦DOM准备好您做出再次可见的HTML元素：

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

这工作，因为html元素可用在head中遇到此JavaScript时，在任何其他DOM元素（如body）可用之前。

当其他方法没有时，这对我有用。 – valdetero 2012-08-16 18:46:42

如何避免对动态生成的jQuery UI选项卡

相关推荐