Как изменить настройки плагина JavaScript в зависимости от ширины области просмотра? - PullRequest
Новая
       21

Как изменить настройки плагина JavaScript в зависимости от ширины области просмотра?

0 голосов
/ 07 февраля 2019

У меня есть простой плагин jQuery, который добавляет цвет фона к элементу div.

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

В настоящее время у меня есть опция, настроенная так, чтобы вы могли использовать объект JavaScript, чтобы легко установить ширину точки останова и настройки для этой точки останова и выше.

По какой-то причине последнийнастройка в адаптивном объекте работает, но предыдущие два - нет.Может кто-нибудь объяснить, почему это так?

Мне бы хотелось иметь что-то похожее на то, как работают адаптивные настройки на Slick carousel .

Это мой код плагина JavaScript: 

<script>
(function($, window, document, Math, undefined) {
  $.fn.myPlugin = function(options) {
    options = $.extend(
      {
        background: "orange"
      },
      options
    );

    if (options.background) {
      $("div").css("background-color", options.background);
    }

    if (options.responsive) {
      options.responsive.forEach(function(obj, index) {
        var breakpoint = obj["breakpoint"];
        var settings = obj["options"];

        var background = settings["background"];

        $(window).resize(function() {
          if (window.innerWidth < breakpoint) {
            if (options.background) {
              $("div").css("background-color", options.background);
            }
          } else {
            if (options.background) {
              $("div").css("background-color", background);
            }
          }
        });
      });
    }
  };
})(jQuery, window, document, Math);
</script>

Вот как я инициализирую в своем документе: 

<script>
  $(document).ready(function() {
    $('div').myPlugin({
      background: 'red',
      responsive: [{
          breakpoint: 100,
          options: {
            background: 'blue'
          }
        },
        {
          breakpoint: 400,
          options: {
            background: 'green'
          }
        },
        {
          breakpoint: 700,
          options: {
            background: 'yellow'
          }
        }
      ]
    });
  });
</script>

Вот кодовая ручка: https://codepen.io/anon/pen/daJbEa

...