Как я могу использовать jQuery для предопределенных событий?

Существуют ли стандартные правила для реализации предопределенных событий в плагине jQuery?

Например, специальный случай плагин Zebra Accordion (крошечный плагин аккордеона для jQuery) или любой другой плагин определяет некоторые события, как показано ниже:

События аккордеона Zebra:

onClose: Событие, запущенное после того, как вкладка свернута.

onOpen. Событие, запущенное после того, как вкладка свернута.

В этом случае, если бы я хотел добавить div со специальными символами шрифт Awesome (например, fa-chevron -down) после заголовка коробки, когда collapsed (закрыто, свернуто состояние), и удалите этот символ и замените его новым символом (например, fa-chevron-up) рядом с заголовком поля, когда expended (открытое состояние). Я хотел бы, наконец, добавить к нему некоторые функции, такие как jQuery Accordion. Я пробовал с приведенным ниже кодом, но, похоже, что-то не так:

$('.Zebra_Accordion').on('onOpen', function(e) {
      $(this).append( "<span class='fa fa-chevron-down'></span>" );
  });

$('.Zebra_Accordion').off('onClose', function(e) {
      $(this).append( "<span class='fa fa-chevron-up'></span>" );
  });

Ответ 1

В большинстве плагинов jQuery есть объект опций, в который вы проходите. Здесь вы можете определить свойства, которые вы хотите установить, включая обработчики событий.

документация для событий аккордеона зебры говорит для каждого из событий, которые предоставляет плагин:

Функция обратного вызова принимает 3 аргумента:

позиция закладки в баяне (на основе 0)

связанный элемент заголовка, как объект jQuery

вкладка, как объект jQuery

Я только что дал им 3 подходящих имени и использовал второй аргумент (который я произвольно назвал hdr).

Как указано в документации, возвращаемый аргумент hdr - это объект jQuery, обертывающий элемент <dt> (по крайней мере, в моем примере). На этом объекте я назвал функцию jQuery .find(), чтобы найти элемент внутри этого <dt>, имеющий класс fa-chevron-*, и то я переключаю классы на span, связывая дальнейшие функции jQuery.

Как отмечено в комментариях, вы можете сделать это отлично, как:

var accordian = new $.Zebra_Accordion($('.Zebra_Accordion'), {
    collapsible: true,
    onBeforeOpen: function(index, hdr, body) {
       hdr.find(".fa-chevron-down").removeClass('fa-chevron-down').addClass('fa-chevron-up');
    },
    onBeforeClose: function(index, hdr, body) {
       hdr.find(".fa-chevron-up").removeClass('fa-chevron-down').addClass('fa-chevron-down');
    }
});

И в этом конкретном случае я бы хотел, но я хотел проиллюстрировать, что делать, когда обработчики имеют больше кода, и в этом случае создание их отдельных функций делает их более удобочитаемыми.

Не забудьте использовать console.log() - это лучший друг разработчика JavaScript.

Чтобы проверить, что мне подарил этот аккордеон Zebra, я сделал следующее:

onBeforeOpen: function(index, hdr, body) {
       console.log("onBeforeOpen", index, hdr, body);
},

Этот вывод отображается в консоли разработчика браузера.

Здесь моя демонстрация все вместе:

$(function() {
  
  // add default chevrons here so they only get appended once
  $(".Zebra_Accordion dt").append("<span class='chevron fa fa-chevron-down'></span>");

  // set up the according options
  var accordian = new $.Zebra_Accordion($('.Zebra_Accordion'), {
    collapsible: true,
    onBeforeOpen: showCollapseChevron,
    onBeforeClose: showExpandChevron
  });
  
  function showExpandChevron(index, hdr, body) {
      hdr.find(".fa-chevron-up").removeClass('fa-chevron-up').addClass('fa-chevron-down');
  }
  
  function showCollapseChevron(index, hdr, body) {
      hdr.find(".fa-chevron-down").removeClass('fa-chevron-down').addClass('fa-chevron-up');
  }
  
});

dl.Zebra_Accordion { width: 100% }
dl.Zebra_Accordion dt { background: #000; color: #FFF; font-weight: bold; padding: 5px }
dl.Zebra_Accordion dd { background: #EFEFEF; padding: 15px; margin: 1px 0 } 
dl.Zebra_Accordion dt.Zebra_Accordion_Expanded { background: #C40000 }

.chevron {
  margin-left: 5px;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/stefangabos/Zebra_Accordion/dist/zebra_accordion.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/stefangabos/Zebra_Accordion/dist/zebra_accordion.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<dl class="Zebra_Accordion">
  <dt>Lorem ipsum dolor sit amet consectetuer</dt>
  <dd>
    Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis hendrerit neque congue pretium iaculis justo laoreet orci elit condimentum. Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.
  </dd>
  <dt>Lorem ipsum dolor sit amet consectetuer</dt>
  <dd>
    Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis hendrerit neque congue pretium iaculis justo laoreet orci elit condimentum. Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.
  </dd>
  <dt>Lorem ipsum dolor sit amet consectetuer</dt>
  <dd>
    Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis hendrerit neque congue pretium iaculis justo laoreet orci elit condimentum. Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.
  </dd>
  <dt>Lorem ipsum dolor sit amet consectetuer</dt>
  <dd>
    Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis hendrerit neque congue pretium iaculis justo laoreet orci elit condimentum. Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.
  </dd>
</dl>

Ответ 2

"События плагинов" на самом деле не являются events и не будут работать с on().

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

Их "события" кодируются при первоначальном вызове плагина:

var myAccordion = new $.Zebra_Accordion($('.Zebra_Accordion'),{
      onOpen:function(index,$title,$block){…},
      onClose:function(index,$title,$block){…}
});

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

Ответ 3

Что вам может понадобиться: следить за динамически созданным html. Например

<script>
...
$('#add').click(function() {
  $('#container').append('<div class="item"> new item </div>')
})
$('#container .item').on('click', function() { ... })
...
</script>  
<input id="add" value="Add 1 item" type="button"/>  
<div id="container">
  <div class="item"> click item 1 </div>
  <div class="item"> click item 2 </div>
</div>

Проблема заключается в том, что динамически добавленные элементы не будут реагировать на событие click, потому что html еще не существует.

Что вы делаете, это:

$('#container').on('click', '.item', function() { ... })

Затем jQuery будет прослушивать щелчок на #container, а затем в момент клика он будет динамически искать дочерние элементы .item.