загрузка флоат-чарта на вкладке jquery обходной путь не полностью решает проблему

существует известная проблема с загрузкой флоат-диаграммы на вкладке jquery, которая не является начальной видимой вкладкой здесь:

это было задано здесь: http://osdir.com/ml/jQuery/2009-06/msg02284.html

и ответил с этим решением:

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

есть еще некоторые проблемы с этим решением.

Допустим, имя вкладки, на которой находится флот-диаграмма, называется #tab-1. Вкладки jquery помещают это в строку URL-адреса, поэтому это будет работать изначально при загрузке, но если вы попытаетесь отправить кому-то URL-адрес с #tab-1 (или любое имя вкладки в URL-адресе) в ссылке, диаграмма не будет видимый. кто-нибудь видел решение, которое всегда работает, включая случай, когда вкладка может быть и в URL-адресе.


jquery asp.net-mvc flot jquery-ui-tabs
person leora    schedule 29.12.2009    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Для меня диаграмма работала при доступе к определенной вкладке напрямую с URL-адресом #tab-1, но не тогда, когда вкладка диаграммы изначально не была активной.

Я решил проблему, обернув вызов генерации диаграммы в активацию вкладки (1):

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

где '#tabs-container' и 'tab-1' заменены соответствующими идентификаторами. 'tabsshow' — это имя события для привязки.

Единственным недостатком этого является то, что диаграмма рисуется снова каждый раз, когда отображается вкладка. Для меня это не большая проблема, и ее можно обойти, например. использование некоторых переменных флагов для вызова $.plot() только один раз.

(1): второй совет в документы jQuery-UI

person Jawa    schedule 02.01.2010
comment
Кроме того, кажется, что если вы не используете плагин истории (который меня действительно не волнует), у вас нет этой проблемы. - person leora; 04.01.2010

arrow_upward
2
arrow_downward

В качестве альтернативы измените 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>

... ваши графики флота будут отображаться правильно и при выборе соответствующей вкладки!

person Anna banana    schedule 18.07.2012
comment
Спасибо, потратив больше времени на другое, наконец, понял. еще раз спасибо сэкономил много времени - person Rakesh Sharma; 02.10.2013

arrow_upward
-1
arrow_downward

Главное, что вам нужно помнить, это размещать вкладки js прямо перед концом тега body.

person man2xxl    schedule 18.05.2010