每个jQuery Mobile导航栏选项卡中的jqPlot图形，一个是好的，两个是空白 [英] jqPlot graphs in each jQuery Mobile navbar tab, one is good, two are blank

问题描述

将我的头靠在墙上.对于标准jQuery标签和手风琴，我已经看到了类似的问题，但对于移动设备却没有.在jQuery Mobile中，我在导航栏中实现了三个选项卡，如下所示:

Banging my head against a wall on this one. I have seen similar questions in regards to standard jQuery tabs and accordions, but not for mobile. In jQuery Mobile I have implemented three tabs in a navbar as follows

<div data-role="page" id="GraphPage">
<div data-role="tabs" id="tabs">
  <div data-role="navbar">
    <ul>
      <li><a href="#tab1" data-ajax="false" class="ui-btn-active">Tab 1</a></li>
      <li><a href="#tab2" data-ajax="false">Tab 2</a></li>
      <li><a href="#tab3" data-ajax="false">Tab 3</a></li>
    </ul>
  </div>
    <div id="tab1" style="width: 100%;"></div>
    <div id="tab2" style="width: 100%;"></div>
    <div id="tab3" style="width: 100%;"></div>
</div>
</div>

我想做的是在每个选项卡上都有一个jqPlot图.在选项卡之外，所有三个图形均呈现完美.当使用选项卡式div ID时，只有第一个选项卡将显示图形.其他两个选项卡为空白.这是我的JavaScript.任何帮助将不胜感激！在jsFiddle中- http://jsfiddle.net/tightsoundmusic/nLvqk4sp/

What I want to do is have a jqPlot graph to each tab. Outside of the tabs all three graphs render perfectly. When using the tabbed div ID's only the first tab will show a graph. The other two tabs are blank. Here is my javascript. Any help would be greatly appreciated! Here it is in jsFiddle - http://jsfiddle.net/tightsoundmusic/nLvqk4sp/

<script type="text/javascript">
$("#GraphPage").on("pageshow",function(){
    var line1=[['2014-9-1 12:00AM',2], ['2014-9-2 12:00AM',4], ['2014-9-3 12:00AM',3], ['2014-9-4 12:00AM',2], ['2014-9-5 12:00AM',3]];
    var line2=[['2014-9-1 12:00AM',3], ['2014-9-2 12:00AM',2], ['2014-9-3 12:00AM',0], ['2014-9-4 12:00AM',3], ['2014-9-5 12:00AM',2]];
    var line3=[['2014-9-1 12:00AM',2], ['2014-9-2 12:00AM',4], ['2014-9-3 12:00AM',3], ['2014-9-4 12:00AM',2], ['2014-9-5 12:00AM',3]];
    var line4=[['2014-9-1 12:00AM',3], ['2014-9-2 12:00AM',2], ['2014-9-3 12:00AM',0], ['2014-9-4 12:00AM',3], ['2014-9-5 12:00AM',2]];
    var line5=[['2014-9-1 12:00AM',2], ['2014-9-2 12:00AM',4], ['2014-9-3 12:00AM',3], ['2014-9-4 12:00AM',2], ['2014-9-5 12:00AM',3]];
    var line6=[['2014-9-1 12:00AM',3], ['2014-9-2 12:00AM',2], ['2014-9-3 12:00AM',0], ['2014-9-4 12:00AM',3], ['2014-9-5 12:00AM',2]];

    var plot1 = $.jqplot('tab1', [line1,line2], {
        animate: true,
        axes:{
            xaxis:{
                renderer:$.jqplot.DateAxisRenderer,
                tickOptions:{formatString:'%#m/%#d'}
            },
            yaxis:{
                showTicks: false, 
            }
            }, 
        series:[{lineWidth:4, markerOptions:{style:'square'}}]
         });    

    var plot2 = $.jqplot('tab2', [line3,line4], {
        animate: true,
        axes:{
            xaxis:{
                renderer:$.jqplot.DateAxisRenderer,
                tickOptions:{formatString:'%#m/%#d'}
                  },
            yaxis:{
            showTicks: false, 
            }
            }, 
        series:[{lineWidth:4, markerOptions:{style:'square'}}]
        });

    var plot3 = $.jqplot('tab3', [line5,line6], {
        animate: true,
        axes:{
            xaxis:{
                renderer:$.jqplot.DateAxisRenderer,
                tickOptions:{formatString:'%#m/%#d'}
                 },
            yaxis:{
                showTicks: false, 
                  }
            }, 
       series:[{lineWidth:4, markerOptions:{style:'square'}}]
        });
    });

</script>

推荐答案

创建 tab 小部件时，只有第一个选项卡可见，其余的则被隐藏.因此，当它们的尺寸未知时，将无法访问它们.

When tab widget is created, only the first tab is visible and the rest are hidden. Therefore, it is not possible to access them when their dimensions are unknown.

因此，唯一的选择是，每当通过监听tabsactivate事件激活 tab 时，都运行jqPlot.触发tabsactivate时，它将返回激活选项卡$(this).tabs("option", "active")的 index .此时，根据检索到的 index 运行jqPlot.

Hence, your only option is to run jqPlot whenever a tab is activated by listening to tabsactivate event. When tabsactivate fires, it returns index of activate tab $(this).tabs("option", "active"). At that point, run jqPlot based on retrieved index.

$(document).on("pagecreate", function () {
    $("#tabs").tabs({
        activate: function (e) {
            var activeTab = $(this).tabs("option", "active");
            if (activeTab == 0) {
                plot1();
            }
            if (activeTab == 1) {
                plot2();
            }
            if (activeTab == 2) {
                plot3();
            }
        }
    });
}).one("pagecontainershow", plot1); /* run it once on first tab */

演示

Demo

这篇关于每个jQuery Mobile导航栏选项卡中的jqPlot图形，一个是好的，两个是空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！