3

jQUery UIタブを使用して複数のタブを動的に作成します。タブはforeach、次のようにビューページでを使用して作成されます（一部の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>

上記のように、タブは細かく形成されています。問題は、スタイルのないコンテンツの古き良きフラッシュです。IE、Chrome、FFで発生します。

jQueryドキュメントでCSSオプションを試しましたが、機能しませんでした。

CSSスタイルをに挿入してから特定のに<head>を適用する単純なJSがありますが、これによりパネルが非表示になり、ユーザーの操作を待機します。最初のパネルは、ロード時にユーザーに表示され、上部にある他のタブと一緒に表示される必要があります。{display:none}id

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

ヘッドタグで準備ができているドキュメント内でtabs（）関数を起動すると、スタイルが設定されていないタブのフラッシュが防止されることがわかりました。


$(document).ready(function() {

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

});

タブをajax経由で表示するために使用した別のアプローチは、jquery.tmpl経由でタブを書き込むajaxリクエストです。

于 2011-03-15T02:15:05.253 に答える