3

ここで最初に表示されるタブではないjqueryタブにフロットチャートをロードする際の既知の問題があります。

これはここで尋ねられました：http： //osdir.com/ml/jQuery/2009-06/msg02284.html

そしてこの解決策で答えました：

 .tabs-hide {
 /*display: none;*/
  position: absolute;
 left: -10000px;
 }

このソリューションにはまだいくつかの問題があります。

フローチャートが表示されているタブ名が＃tab-1と呼ばれているとします。jqueryタブはこれをURL文字列に入れるので、これはロード時に最初に機能しますが、リンクに＃tab-1（またはURL内の任意のタブ名）を含むURLを誰かに送信しようとすると、グラフは見える。タブがURLにある場合も含めて、常に機能する解決策を見た人はいますか。

4

3 に答える 3

2

または、タブコンテンツクラスのcssを...に変更します。

.tab_content {
 display:block;
    visibility:hidden;
}

...そして次の追加行（// HACK !!! ...の下）をjscript.jsファイルに追加します。

    $(document).ready(function() {
        //  When user clicks on tab, this code will be executed
        $("#tabs li").click(function() {
            //  First remove class "active" from currently active tab
        $("#tabs li").removeClass('active');

        //HACK!!! As the tabs_content HAS to initially be set to display:block in order for the flot graphs to be plotted correctly,
        // we need to manually change the visibility attribute for the tabs_content each time another tab is selected as active.
        //This assigns a variable to the tab_content of the currently active tab and changes the css visibility attribute to hidden.
            var old_tab = $("#tabs li").find("a").attr("href");
            $(old_tab).css('visibility', 'hidden');

            //  Now add class "active" to the selected/clicked tab
            $(this).addClass("active");

            //  Hide all tab content
            $(".tab_content").hide();

            //  Here we get the href value of the selected tab
            var selected_tab = $(this).find("a").attr("href");
//HACK!!! Change the css visibility attribute of the newly selected tab to visible
            $(selected_tab).css('visibility', 'visible');

            $(selected_tab).fadeIn();

            return false;
        });


});

...そしてあなたのaspxを提供することは次のようになります...

    <div id="tabs" >
                        <ul id="Ul1" >
                                <li class="active"><a href="#tab1">Main</a></li>
                                <li><a href="#tab2">tab2</a></li>
                                <li><a href="#tab3">tab3</a></li>
                                <li><a href="#tab4">tab4</a></li>
                                <li><a href="#tab5">tab5</a></li>
                            </ul>
         </div>

         <div style="width:100%;float:left;">     
                  <div id="tabs_content_container">

                           <div id="tab1" class="tab_content" style="visibility:visible">
                           content for tab 1
                            </div>
                            <div id="tab2" class="tab_content"  >
                             </div>
                  </div>
         </div>

...フロットグラフは正しく表示され、関連するタブが選択されたときに表示されます。

于 2012-07-18T09:28:30.670 に答える
1

私の場合、チャートは＃tab-1 URLを使用して特定のタブに直接アクセスしたときに機能しましたが、チャートタブが最初にアクティブでなかったときは機能しませんでした。

チャート生成呼び出しをタブアクティベーションにラップすることで問題を解決しました（1）：

$('#tabs_container').bind('tabsshow', function(event, ui) {
  if (ui.panel.id == "tab-1") {
    $.plot(...)
  }
})

ここで'#tabs-container'、および'tab-1'は適切なIDに置き換えられます。'tabsshow'バインドするイベントの名前です。

これの唯一の欠点は、タブが表示されるたびにグラフが再び描画されることです。私にとっては大きな問題ではなく、たとえばいくつかのフラグ変数を使用して$ .plot（）を1回だけ呼び出すことで回避できる可能性があります。

（1）： jQuery-uiドキュメントの2番目のヒント

于 2010-01-02T13:30:38.103 に答える
-1

覚えておく必要がある主なことは、bodyタグの終わりの直前にタブjsを配置することです。

于 2010-05-18T22:03:44.397 に答える