Графики 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="#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 с вкладками только первая вкладка будет отображать график. Две другие вкладки пусты. Вот мой джаваскрипт. Любая помощь будет принята с благодарностью! Вот он в 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