Подскажите на чем нарисовать такой элемент

Статус
В этой теме нельзя размещать новые ответы.

StrikeOFF

♥kan inte lyfta utan lift♥
Регистрация
20 Мар 2010
Сообщения
372
Реакции
204
Изображение условное. Оно не должно быть черным. В идеале это похоже на длинный input range. Но функционал input от него не нужен. Нужно только программно задавать объекты на отрезке, желательно без необходимости писать логику для рассчета на каком проценте отрезка ставить объект.

Типа такого:
PHP:
$line = new Line;
$line->range(0, 60000);
$line->addObject(6700, 'arrow')->setDescription('6700');
$line->addObject(22000, 'pointer')->setDescription('Bus stop 1');
$line->addObject(35000, 'pointer')->setDescription('Bus stop 2');
$line->addObject(40000, 'pointer')->setDescription('Bus stop 3');
hwke7de.png
 
Последнее редактирование:

Didi

Постоялец
Регистрация
16 Окт 2013
Сообщения
84
Реакции
40
Если просто статический рисунок - можно на css. Типа так:
1) отрезок это div с "border" или задать ему высоту 2-3пикселя и дать background. Вообще можно даже и просто img поставить он вроде как статичный.
2) Элементы на отрезке можно расставить с помощью "position: absolute;".
3) Для изменения их положения при помощи PHP задаем горизонтальное положение элемента в css используя php в процентах или пикселях.
Имеется ввиду inline styling : <div style="left:35%;"></div>

4) Не забываем див контейнер относительно которого мы позиционируем внутренние элементы. (position: relative; )
 

StrikeOFF

♥kan inte lyfta utan lift♥
Регистрация
20 Мар 2010
Сообщения
372
Реакции
204
Если просто статический рисунок - можно на css.
Хотелось бы не рисунок, а библиотеку типа как библиотека для рисования диаграмм. Но вариант уже допустимый.
 

Didi

Постоялец
Регистрация
16 Окт 2013
Сообщения
84
Реакции
40
Ну библиотека будет наверно на Javascript, прийдется вам поискать и выбрать ту которая больше подходит.
Мне не приходились пользоваться так что незнаю.
Еще посоветую покопать в сторону SVG может вам такая опция будет интересна.
 

ultra

Мой дом здесь!
Регистрация
15 Ноя 2011
Сообщения
237
Реакции
396
особо то и выбирать не из чего Для просмотра ссылки Войди или Зарегистрируйся
с небольшим допущением, можно сказать что html driven, а значит то, что нужно
QHdRDy7.png


на мой взгляд, использование библиотеки, да еще и js чуть менее чем избыточно, особенно, учитывая то, что взаимодействия пользователя со слайдером не предполагается, как я понял
как уже было сказано выше, вполне решается на css, элегантно - за вечер, другой, мне так думается
 

d0ublezer0

Мой дом здесь!
Регистрация
21 Май 2009
Сообщения
359
Реакции
201
Думаю, что вот это может вам подойти
Для просмотра ссылки Войди или Зарегистрируйся

или это
Для просмотра ссылки Войди или Зарегистрируйся

гуглить по фразе
Для просмотра ссылки Войди или Зарегистрируйся

Ну или вот вам решение самостоятельное, без библиотек, только что накидал:
Для просмотра ссылки Войди или Зарегистрируйся

Начало и конец линии отсчета задавайте через параметры data-start и data-end, значения позиций - через data-value
 
Последнее редактирование модератором:
Статус
В этой теме нельзя размещать новые ответы.
Сверху