Веб-приложение, использующее сортировку jquery ui, перетаскивание, анимация работает в Firefox, но не в других браузерах - PullRequest
Новая
       29

Веб-приложение, использующее сортировку jquery ui, перетаскивание, анимация работает в Firefox, но не в других браузерах

0 голосов
/ 28 января 2011

У меня есть веб-приложение, которое я использую, чтобы выбрать свой график работы. В основном я пытаюсь подражать itunes. Каждый рабочий график представляет собой элемент списка, который можно сортировать. Элементы списка ajax загружаются в отдельные неупорядоченные списки. Слева находится боковая панель с неупорядоченным списком, который действует как список воспроизведения. Вы можете перетаскивать рабочие графики вверх и вниз, чтобы изменить их порядок или более на разные списки. И когда вы нажимаете на список слева, отображаются только элементы списка в этом списке. В Firefox все отлично работает. Но при использовании других браузеров он становится невероятно медленным после того, как вы щелкнете по списку строк в левой боковой панели. По мере увеличения количества элементов списка скорость замедляется.

Мой код jquery находится в заголовке документа Вот HTML-код для тестовой страницы. 

<body>
<div id='sideBar'> 
 <p class='listTitle'>LIBRARY</p>
 <ul class='lineList'>

  <li id='all_lines' class='list'>All Lines<span class='listTotal'>5</span></li>
    </ul>
 <p class='listTitle'>Line Lists<span class="addList ui-icon ui-icon-circle-plus">h</span></p>
 <ol id="userLists" class='lineList'>
   <li id='top_picks' class='list' >Top picks<span class='listTotal'>5</span> </li>
   <li id='one_day'   class='list' >One day<span class='listTotal'>5</span></li>
   <li id='two_day'   class='list' >Two day<span class='listTotal'>5</span></li>
   <li id='three_day' class='list' >Three day<span class='listTotal'>5</span></li>
   <li id='four_day'  class='list' >Four Day<span class='listTotal'>5</span></li>
   <li id='mixed'   class='list' >Mixed<span class='listTotal'>5</span></li>
   <li id='reserve' class='list' >Reserve<span class='listTotal'>5</span></li>
   <li id='deleted' class='list' >Deleted<span class='listTotal'>5</span></li> 
 </ol>

</div> <!-- end of Sidebar div div (holds all the line lists on the right side) -->

<div id='linecontainer' class='ui-widget'> 
  <!-- each ul could have 0 to as many as 300 list items -->
 <ul id="TOP_PICKS" class='ui-widget-content'>
   <li>lots of line html</li>
   <li>many many list items </li>
   <li>repeat for each list below</li>
 </ul>
 <ul id="ONE_DAY"   class='ui-widget-content'></ul>
 <ul id="TWO_DAY"   class='ui-widget-content'> </ul>
 <ul id="THREE_DAY" class='ui-widget-content'> </ul>
 <ul id="FOUR_DAY"  class='ui-widget-content'> </ul>
 <ul id="MIXED"     class='ui-widget-content'> </ul>
 <ul id="RESERVE"   class='ui-widget-content'> </ul>
 <ul id="DELETED"   class='ui-widget-content'> </ul>


</div> <!-- End linecontainer div -->

 <div id='sequence' title=""> </div>
 <div id='loading' class='ui-widget-content'> <p>Loading...<span class="ui-progressbar-value">.</span></p></div>

А функция, которая отображает строки в зависимости от того, по какому списку строк вы щелкнули, это: 

// LINE LIST CLICK EVENT
// Want user to be able to add list so made this live()

  $(".list").live( 'click', function () {
   // when user clicks on list, we only want to show lines in that list, hide all the others

    var $listTarget = $(this); 
    $("#sideBar li").removeClass('ui-state-active');// remove last line highlight
    $listTarget.addClass('ui-state-active');//add style to current list

    //var allLines = $('li.line'); // find all lines 
    // decided better way is to target smaller amount of UL's to show or hide
    var allLists = $('#linecontainer ul');// get all the UL's that the lines are inside

    var thelistName = $listTarget.attr("id");
    if(thelistName == "all_lines") {
      //users wants to see all lines at once
      allLists.show();
    }
    else {
     //user wants only to see one list of lines
     //build the selector that finds the ul list

     //list id matches ul id but in Uppercase so both are unique
     var TargetedList = '#' + thelistName.toUpperCase();

     allLists.hide();

     $(TargetedList).show();
    }
});

Я подумал, что использование идентификатора дважды, один раз в верхнем регистре и один раз в нижнем регистре было проблемой, поэтому я попытался иметь идентификатор элемента списка боковой панели как «top_picks» и связанный список контейнеров как «top_picks-list», но все же была такая же проблема.

Я ценю ваш вклад!

UPDATE Я думаю, что мой заголовок не совсем правильно сформулирован. У меня проблема с анимацией jquery. У меня есть большое количество элементов списка (до 300 в некоторых случаях), загруженных ajax, в 8 различных списков внутри linecontainer div. Пользователь может перетащить элемент списка на боковую панель, чтобы изменить, к какому элементу списка принадлежит.

JavaScript, который я здесь показываю, позволяет определить, по какому списку щелкнул пользователь, а затем скрыть все элементы списка, а затем показать только те элементы списка, которые принадлежат нужному списку.

Я думал, что было бы быстрее нацелить 8 неупорядоченных списков на странице и анимировать их вместо того, чтобы найти все 300 элементов списка на странице и анимировать их. Опять же Firefox делает это быстро, но Chrome, Safari слишком медленные. Это должно быть связано с тем, как браузеры находят элементы DOM.

1 Ответ

0 голосов
/ 30 января 2011

Мне удалось свести проблему к гораздо более простому примеру в другом вопросе. Кажется, ошибка может быть в Chrome. Вот ссылка на другой вопрос .

...