Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.12.2017, 11:04
Интересующийся
Отправить личное сообщение для maksmkv Посмотреть профиль Найти все сообщения от maksmkv
 
Регистрация: 22.09.2016
Сообщений: 22

Создание блок-схемы
Всем привет. Подскажите, может уже и реализовывали отображение данных по типу блок-схема, а именно например:
https://ds04.infourok.ru/uploads/ex/..._m72850b31.jpg

Только, нажимаем первый элемент - под ним отображается другой элемент и т.д. Идея нарисовать саму блок схему, по координатам расставить объекты, а вот как их отображать при нажатии пока не нашел. Может что-то подскажите? Спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 16.12.2017, 11:23
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

А почему нет перехода на "Перейти дорогу" с "Ждать зеленого света", дождались и стоим на месте? )
Ответить с цитированием
  #3 (permalink)  
Старый 16.12.2017, 12:35
Интересующийся
Отправить личное сообщение для maksmkv Посмотреть профиль Найти все сообщения от maksmkv
 
Регистрация: 22.09.2016
Сообщений: 22

Картинка для примера ))) взял из интернета.
Ответить с цитированием
  #4 (permalink)  
Старый 16.12.2017, 12:47
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Может такая библиотека и есть не знаю, но данные должны быть связаны, если на примере этого, то типа:

var data = {[
                {begin: {
                            action: "Посмотреть на светофор", type: 'rectangle', side: "center", 
                                child: [
                                    {action: "Свет зеленый?", type: 'rhombus', side: "center",
                                        child: [
                                            {action: "Перейти дорогу", type: 'rectangle', side: "left"},
                                            {action: "Ждать зеленого света", type: 'rectangle', side: "right"}
                                        ]
                                    }
                                ]
                    }
                },
                {end: {action: "Конец", type: 'ellipse', side: "center"}} 
            ]
};


Обходом в цикле можно построить и посредством html/css, где type задает стили блока (например эллипс рисуется добавлением радиуса бордюру, ромб поворотом квадрата, и т.п.). Положение side означает ветвление, причем "left", это "Да", "right", это "Нет", и соответственно добавляются стрелки между родителем и ребенком. Основой могут быть строки из UL-LI, в которых и размещаются элементы.

Последний раз редактировалось laimas, 16.12.2017 в 12:49.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
при скроллинге блок исчезает avanesov89 Общие вопросы Javascript 0 19.03.2016 13:26
Ховер и появляющий блок Shuryga Элементы интерфейса 3 28.09.2015 14:39
Копирование блоков в блок maximus Events/DOM/Window 1 14.09.2013 19:40
Показать/скрыть блок Lelja_05 jQuery 10 01.07.2013 20:05
Блок схемы на JS Rionty Элементы интерфейса 0 27.11.2011 20:02