События в плагине JQuery

Question

События в плагине JQuery

Причина, по которой он не работает, заключается в том, что вы пытаетесь использовать атрибут href в теге <script>.

Как вы можете видеть 2 из 3 тегов <script> ниже <-- This doesn't work используйте href вместо src атрибута, измените это и до тех пор, пока путь будет правильным, он должен работать нормально.

1

jquery callback events jquery-plugins

задан MikeC 19 January 2019 в 01:33

1 ответ

Другие вопросы по тегам:

jquery callback events jquery-plugins

Похожие вопросы:

score 0 · Answer 1

Эта статья может помочь вам начать работу с Пользовательскими событиями . В основном вам нужно .trigger() пользовательское событие и подписать элемент с .on() , что-то вроде:

$.fn.doFancyStuff = function(action, opts) {
  var counter = opts.delay, timer = -1;
  var message;

  // Do something special with "action" argument here if need be
  // ...

  timer = setInterval(function() {
    if (counter--) {
      message = `${opts.gerund} in ${counter + 1} second(s)...`;

      // Triggers the custom event
      this.trigger('action:start', [message]);
    } 
    else {
      message = `You ${opts.v3} ${opts.delay} times.`;

      this.trigger('action:done', [message]);
      clearInterval(timer);
    }
  }.bind(this), 1000);

  // Return the instance so we can "chain" them
  return this;
}

$('span.counter')
  .doFancyStuff('dance', {
    delay: 5,
    gerund: 'Dancing',
    v3: 'danced'
  })
  .on('action:start action:done', function(e, message) {
    $(this).text(message);
  });

.counter {
  background-color: lavender;
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span class="counter"></span>

Итак, для вашего случая:

$.fn.divSlider = function (action) {
  if (action === "next") {
    var nextSlider = this.find('.slider-item-active').next('.slider-item');
    var currentSlider = this.find('.slider-item-active');

    if (nextSlider.length === 0) {
      return;
    }

    // Triggers the custom event
    this.trigger('onSlideStart');

    nextSlider.animate({"left": "0"}, "slow").removeClass('slider-item').addClass('slider-item-active');
    currentSlider.animate({"left": "-100%"}, "slow").removeClass('slider-item-active').addClass('slider-item');
  }

// ...

$('some_selector')
  .divSlider('next')
  .on('onSlideStart', function (e) {
    // Do something

  });