jqPlot графики във всеки раздел на навигационната лента на jQuery Mobile, една е добра, две са празни

Удрям главата си в стената на този. Виждал съм подобни въпроси по отношение на стандартните раздели и акордеони на jQuery, но не и за мобилни устройства. В jQuery Mobile внедрих три раздела в лента за навигация, както следва

<div data-role="page" id="GraphPage">
<div data-role="tabs" id="tabs">
  <div data-role="navbar">
    <ul>
      <li><a href="/bg#tab1" data-ajax="false" class="ui-btn-active">Tab 1</a></li>
      <li><a href="/bg#tab2" data-ajax="false">Tab 2</a></li>
      <li><a href="/bg#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/

<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>

jquery-mobile jqplot
person Nic Clark    schedule 10.09.2014    source източник

Отговори (1)


arrow_upward
0
arrow_downward

Когато се създаде приспособление за раздел, само първият раздел е видим, а останалите са скрити. Следователно не е възможен достъп до тях, когато размерите им са неизвестни.

Следователно единствената ви възможност е да стартирате jqPlot всеки път, когато раздел е активиран чрез слушане на tabsactivate събитие. Когато tabsactivate се задейства, той връща индекс на раздела за активиране $(this).tabs("option", "active"). В този момент изпълнете jqPlot въз основа на извлечения индекс.

$(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 */

Демо

person Omar    schedule 10.09.2014
comment
Благодаря за бързата реакция. За съжаление, когато навигирате до тази страница от друга страница, първоначалната графика не се показва. Като щракнете върху който и да е раздел, графиките се попълват правилно. Само първоначалната графика не се показва при зареждане на страницата. мисли? Мислех да използвам .on(pageshow) за инициализиране на първоначалната графика. - person Nic Clark; 10.09.2014
comment
@NicClark замени .one с .on в }).one("pagecontainershow", plot1) - person Omar; 10.09.2014