Блог

Я должен создать слайдер с двумя пальцами, используя библиотеки YUI 3. Существует один большой палец-слайдер, поэтому я надеюсь, что смогу расширить виджет, включив в него второй палец.

Однако, хотя я могу выполнять некоторые базовые программы на Javascript, это уровень выше, и я даже не знаю, с чего начать. Я неделями пытался передать этот проект на аутсорсинг и не нашел никого, кто был бы готов или способен, так что, похоже, это зависит от меня и моих навыков новичка в Javascript, чтобы решить эту проблему.

Я пытался найти какой-нибудь учебник, но и там безуспешно. Каждый раз, когда я ищу, как создать «слайдер» с нуля (что, как я полагаю, даст мне некоторые отправные точки), я получаю инструкции по галереям изображений, которые прокручиваются из стороны в сторону.

Все, что я знаю прямо сейчас, это то, что для создания расширения библиотеки YUI мне нужно использовать этот код:

 YUI.add('gallery-dual-slider', function (Y) { /* custom code goes here */ }, '0.0.1', { requires: ['dd-drag'] });
  

И после этого я полностью застрял. Я предполагаю, что мне нужно каким-то образом отобразить div на «рельсе», а затем сделать этот div интерактивным и перетаскиваемым …? Может быть?

Кто-нибудь может дать мне ссылку на руководство или, может быть, указатель на то, как я это делаю?

Структура того, что должно входить в функцию модуля YUI.add(…), описана в руководстве пользователя виджета и примерах. Что касается конкретной реализации слайдера с двумя / несколькими пальцами, я бы предложил:

1. Начните с renderUI, который создает rail span, содержащий два thumb span (см. CONTENT_TEMPLATE и методы поддержки рендеринга для Y.Slider в исходном коде).
2. Дайте каждому из этих элементов имена классов, такие как yui3-dualslider-rail и yui3-dualslider-thumb-l или -r, и примените некоторые базовые стили, такие как размеры и цвет, чтобы у вас была некоторая визуальная обратная связь о прогрессе.
3. В bindUI создайте экземпляр Y.DD.Drag для каждого из двух диапазонов thumb и подключите их каждый с помощью Y.Plugin.DragConstrain (дважды проверьте название плагина в исходном коде слайдера). В результате должно получиться два перетаскиваемых пальца на общей направляющей.
4. Смотрите value-range.js в исходном коде слайдера ссылаться на добавление атрибутов min и max и value. Вам решать, как вы хотите сохранить / сообщить значения для двойного слайдера. Например, вы могли бы сохранить один атрибут «value» или «values», который содержит массив, или «value» может содержать разницу между двумя другими отдельными атрибутами, скажем, «MinValue» и «MaxValue». Есть и другие способы скинуть этого кота.
5. Сообщайте о прогрессе и задавайте вопросы в #yui, чтобы помочь продолжить работу.