jQuery: Как я могу воспроизвести эффект выдвижения аккордеона без jQuery UI? - PullRequest
Новая
       9

jQuery: Как я могу воспроизвести эффект выдвижения аккордеона без jQuery UI?

1 голос
/ 16 декабря 2009

Я только изучаю jQuery, выясняю, что возможно, и пробираюсь вокруг.

Я бы хотел, чтобы div выскользнул как гармошка, но я не хочу оплачивать стоимость загрузки jQuery UI, а также хочу, чтобы несколько div открывались одновременно ,

Как это работает? Как достигается эффект выдвижения аккордеона внутри jquery.ui.accordion.js? Можно ли позвонить на .animate(), чтобы переместить div с display:none на display:block? (Я читал, что animate работает только с числовыми свойствами.)

Ответы [ 4 ]

1 голос
/ 16 декабря 2009

Вы можете сделать это для одного элемента. 

var accordion = function(toggleEl, accEl) {
    toggleEl.click(function() {
        accEl.slideToggle(function() { });
        return false;
    });
}

Использование slideToggle

http://docs.jquery.com/Effects/slideToggle

Но если вы хотите сделать несколько уровней, вам также нужно добавить функцию, чтобы пройти все элементы и сдвинуть их вверх или спрятать их до срабатывания слайд-тумблера, если вы хотите, чтобы только один элемент открывался одновременно. Это где jquery аккордеон может помочь. Они подключены во многих вариантах, как это.

0 голосов
/ 16 декабря 2009

Я учу все виды вещей. Я использовал только jQuery - без UI, без UI Accordion, без UI Effects - и получил эффект сползания вниз, который я хотел. Не уверен в терминологии для этого визуального эффекта. (Я думаю, что это половина проблемы с jQuery - что я называю различными эффектами). Я думаю, что некоторые люди называют это «жалюзи».

Нажмите, чтобы увидеть эффект: http://jsbin.com/ogape

Вот фрагмент HTML 

<div id="div0">
   <p id="intro"><a href="#" class='expander'>+</a> Introduction</p>

   <div class='indented' style='display:none'>
     <p >
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer
       vulputate, nibh non rhoncus euismod, erat odio pellentesque lacus,
       sit amet convallis mi augue et odio. Phasellus cursus urna facilisis quam.
     </p>

     <p> Quisque pharetra lacus quis sapien. Duis
       id est non wisi sagittis adipiscing. Nulla facilisi. Etiam quam erat,
       lobortis eu, facilisis nec, blandit hendrerit, metus. Fusce
       hendrerit. Nunc magna libero, sollicitudin non, vulputate non, ornare
       id, nulla.  Suspendisse potenti. Nullam in mauris.
     </p>
   </div>
 </div>

Это код jQuery: 

  var slideOut = function(element){
      var parent = $(element).parent().parent(); // outer div
      var dList = parent.children("div");  // inner div, all siblings of the <a>
      dList.animate({opacity: 'toggle', height: 'toggle'}, 'slow');
  };

  $(document).ready(function() {
      $('div p a[href="#"]').click(function() { slideOut(this); });
  });

Эта функция slideOut () немного упрощена по сравнению с тем, что она делает на самом деле. Он также поменяет местами + и - для кнопки расширения в реальном коде, что делает его немного более сложным: 

  var slideOut = function(element){
      var parent = $(element).parent().parent(); // outer div
      var dList = parent.children("div");  // inner div, all siblings of the <a>
      dList.animate({opacity: 'toggle', height: 'toggle'}, 'slow');

      // swap characters on the expander "button"
      var o = dList.css("opacity"); 
      // dash is narrower than +, so we must compensate
      if (o==1) {
          $(element).html("+")
              .css("padding-left", "1px")
              .css("padding-right", "1px");
      } else {
          $(element).html("-")
              .css("padding-left", "3px")
              .css("padding-right", "3px");
      }
  };

Вы можете увидеть полный html / js-код по прямой демонстрационной ссылке, указанной выше.

Ключевой вещью, которую я не знал, является то, что можно оживить высоту, вызывая animate с помощью"toggle".

0 голосов
/ 16 декабря 2009

Только к вашему сведению, минимизированный эффект слайда в jQueryUI и ядре составит всего 5,5 КБ для первого запроса. Там не будет необходимости для всей библиотеки jQueryUI. Файлы, которые вам нужны - ui.slider.min.js и ui.core.min.js

0 голосов
/ 16 декабря 2009

Вы можете использовать slideDown и slideUp, если вы создаете вертикальный аккордеон, в противном случае вам нужно будет объединить немного больше CSS, чтобы использовать animate при позиционировании некоторых элементов div.

...