Создание js Rangelider в Drupal 8 - PullRequest
0 голосов
/ 30 марта 2020

Я работаю на сайте Drupal. Базовая установка c заключается в том, что пользователи могут создавать страницы / модули, в которых можно написать html для визуализации некоторыми настройками в Drupal, некоторыми заранее определенными css. Если я, например, хочу создать таблицу с классом «someclass», я бы набрал

<table class="someclass>
  ...
</table>

и сохранил модуль. Я хочу сделать слайдер, который пользователи могут использовать для выбора какого-либо значения (обычно от 1 до 100), и для этого я хочу использовать js -rangeslider . Я реализую это, добавив код и css из rangelider. js в тему проекта, и скажу drupal использовать его в файле yaml следующим образом

global-styling:
  version: 1.x
  css:
    theme:
      css/rangeslider.css: {}
  js:
    js/rangeslider.js: {}
  dependencies:
    - core/jquery

Теперь я хочу сделать рейнджлайдер Для этого я попробовал следующее:

<input type="range" class="rangeslider">

Это, похоже, ничего не делает, поэтому я проверил на странице js -rangeslider . Здесь они предлагают использовать jquery для создания элемента, что имеет большой смысл при использовании drupal. Поэтому я сделал скрипт

(function ($) {
  Drupal.behaviors.myproject = {
    attach: function (context, setting) {
      $('input[type="range"]').rangeslider();   
    }
  };
})(jQuery);

, но это ничего не меняет. Я все еще просто получаю стандартный элемент ввода диапазона. Кстати, jquery действительно ловит элемент ввода, так как я попробовал console.logging.

Я надеюсь, что я просто глуп, но мне не удалось найти решение в любом случае. Заранее спасибо, Ричард.

1 Ответ

0 голосов
/ 31 марта 2020

Пожалуйста, позвольте мне направить вас к моему модулю, который обеспечивает интеграцию как с API формы Drupal, так и с Webform: https://www.drupal.org/project/range_slider

Он имеет стабильную версию, совместимую как с Drupal 8, так и с последующими версиями. 9.

Надеюсь, это поможет. По любым вопросам я бы с удовольствием выручил в очереди вопросов проекта: https://www.drupal.org/project/issues/range_slider?status=All&categories=All

...