Страница 1 из 2
[Виджет] RangeSlider
Добавлено: Пт апр 08, 2016 7:19 pm
nick7zmail
Как я уже говорил в МД используется библиотека JQueryMobile, но не все её фичи представлены в стандартной комплектации МД. Как раз в
этом видео я показывал пример рэнжслайдера. Недавно мне он понадобился...но воткнув его код в html-блок, секунд через 10 после загрузки меню он почему-то распадался на 2 разных слайдера. Попробовал закинуть в модуль - всё норм стало. Вдруг кому пригодится моё решение.
Получается что-то типа этого:
- скрин.jpg (5.73 КБ) 7612 просмотров
Гораздо удобнее и нагляднее двух элементов "плюс-минус".
Модуль на гитхабе
Скачиваете zip-чик, распаковываете в htdocs, заходите в модули, ищите widget_rangeslider, тыкаете на него, и нажимаете install module...собственно всё, модуль установлен. Строка вызова длинноватая получилась...
Код: Выделить всё
[#module name="widget_rangeslider" obj="ThisComputer" prp1="prp1" prp2="prp2" step=".1" val="SLD" min="5.3" max="10.2"#]
Параметры, думаю, все понятны. ThisComputer-объект, prp1, prp2 - свойства объекта, step - шаг регулирования, val - надпись, min, max - минимальное и максимальное значение.
В функционале не на 100% уверен, но вроде работает. Проверено с целыми и с дробными числами. С внешним видом чуть позже разберусь, если получится. А то он как то разъехался немного, по сравнению с
демкой.
В маркете он врят ли появится...но, думаю, Сергей включит его в список стандартных элементов меню со временем.
Re: Виджет RangeSlider для меню
Добавлено: Пн апр 11, 2016 11:02 am
sergejey
Спасибо, на самом деле имеет смысл включить его в список стандартных элементов. В ближайшее время разберусь с модулем и перенесу в стандартные.
Re: Виджет RangeSlider для меню
Добавлено: Пн апр 11, 2016 3:14 pm
nick7zmail
sergejey писал(а):Спасибо, на самом деле имеет смысл включить его в список стандартных элементов. В ближайшее время разберусь с модулем и перенесу в стандартные.
Да там разбираться то особо на надо. По факту это 2 обычных слайдера. Движком jquery они в один соединяются. То есть просто 2 привязанных свойства будет, а остальные настройки как у обычного слайдера. Я его ещё на скорую руку сляпал...без таймаутов и т.п. То есть если медленно тащить его по всем значениям - он засирает канал ajax-запросами. В системе же в случае с обычными слайдерами - вроде ожидается конец перемещения, потом только формируется запрос. Это явно правильнее)) Хотел потом дописать этот таймаут, но если в системе появится, думаю до этого даже не дойдет).
Re: Виджет RangeSlider для меню
Добавлено: Пн апр 11, 2016 5:07 pm
sergejey
Пока вижу одну сложность -- добавление второго связанного свойства, что сейчас не предусмотрено. Подумаю...
Re: Виджет RangeSlider для меню
Добавлено: Вт апр 12, 2016 1:48 am
slgeo
А расскажите, в каких случаях он применим?
Re: Виджет RangeSlider для меню
Добавлено: Вт апр 12, 2016 5:18 am
nick7zmail
slgeo писал(а):А расскажите, в каких случаях он применим?
К примеру когда нужно выставить диапазон температур на какое либо действие. Очень наглядно.
Диапазон любых других датчиков - шум, освещение и т.п.
Видел на форуме пользовались 2мя элементами "плюс минус" один для максимальной, второй для минимальной. Во первых тыкать запаришься, если диапазоны большие особенно, а шаг - 0,1, во-вторых логику можно сломать, если максимальную выставишь меньше минимальной. Слайдер такого не даст.
Отправлено с моего Xperia Z через Tapatalk
Re: Виджет RangeSlider для меню
Добавлено: Вт апр 12, 2016 10:18 am
nick7zmail
sergejey писал(а):Пока вижу одну сложность -- добавление второго связанного свойства, что сейчас не предусмотрено. Подумаю...
Идея...не уверен, что правильная, но пока кажется логичной.
В общем механизм такой - создаём 1 обыкновенный слайдер в меню, за ним создаём второй слайдер - и у него в настройках пункт - "Объединить с предыдущим (слайдер для диапазона)" (что-то по типу как у кнопки - "Расположить на уровне предыдущего"). Ставишь галочку - они заключаются в общий <div>
Код: Выделить всё
<form>
<div data-role="rangeslider">
<label for="range-1a">Rangeslider:</label>
<input type="range" name="range-1a" id="range-1a" min="0" max="100" value="40">
<label for="range-1b">Rangeslider:</label>
<input type="range" name="range-1b" id="range-1b" min="0" max="100" value="80">
</div>
</form>
А параметры становятся недоступны для редактирования (сливаются с предыдущим) кроме привязанного свойства. Таким образом на выходе меню должен рэнжслайдер нормальный получится, и у каждого свой объект будет. Осталось понять - как он должен найти именно тот слайдер, с которым "слиться")). Как вариант - ручной выбор из выборки слайдеров.
Re: Виджет RangeSlider для меню
Добавлено: Вс янв 15, 2017 12:56 pm
kymasya
А ака дергать метод связанного объекта при изменении слайдера?
Re: Виджет RangeSlider для меню
Добавлено: Вс янв 15, 2017 2:03 pm
nick7zmail
kymasya писал(а):А ака дергать метод связанного объекта при изменении слайдера?
Просто связать изменяемое свойство, и любой метод этого объекта.
Re: Виджет RangeSlider для меню
Добавлено: Ср апр 26, 2017 9:59 am
kymasya
Дергаю ползунки - а свойства не меняются!(