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>

...您的FLOT图将正确显示，并且选择“相关”选项卡！

于 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(...)
  }
})

where'#tabs-container'和'tab-1'替换为适当的 ID。'tabsshow'是要绑定的事件的名称。

唯一的缺点是每次显示选项卡时都会再次绘制图表。对我来说，这不是一个大问题，并且可以通过例如使用一些标志变量来仅调用一次 $.plot() 来规避它。

(1): jQuery-ui docs中的第二个技巧

于 2010-01-02T13:30:38.103 回答
-1

您需要记住的主要事情是将标签 js 放在 body 标记的末尾之前。

于 2010-05-18T22:03:44.397 回答