0

このページがあります: http://www.shopdesertridge.com/events/full-calendar/

それをロードしている場合、ページのロード中に「May」タブが青色になり、ページのコンテンツがロードされた後に適切なスタイル(js メソッド) が呼び出されることにしばらく気付くでしょう。

この UI のスタイリングを早くするためのトリックを知っていますか?

asp.netプログラマーの場合：そのTABは特定の月のリピーターであるため、jsメソッドを呼び出してみましたItemDataBoundが、結果はドキュメントの準備ができているときに呼び出した場合と同じです...

タブの UI をレンダリングする js:

function tabsUi(){
    $("#tabs").tabs();
};
4

2 に答える 2

2

スタイルをより速く適用する最も効果的な方法は、必要なクラスをマークアップに直接含めることです。

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
   <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
     <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li>
     <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li>
   </ul>
   <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1">
      <p>Tab one content goes here.</p>
   </div>
    ...
</div>

このようにして、DOMReady イベントを待つのではなく、css が読み込まれるとすぐにコンテンツのスタイルが設定されます。

于 2012-04-30T20:37:41.480 に答える
1

display:noneデフォルトでtabs()試すことができます。show()

<div id="tabs" style="display:none">
    <ul>
        <li><a href="#tabs-1">1</a></li>
        <li><a href="#tabs-2">2</a></li>
        <li><a href="#tabs-3">3</a></li>
    </ul>
    <div id="tabs-1">1</div>
    <div id="tabs-2">2</div>
    <div id="tabs-3">3</div>
</div>

<script>
    $(function()
    {
        $( "#tabs" ).tabs();
        $( "#tabs" ).show();
    });
</script>​
于 2012-04-30T20:39:27.017 に答える