Как я провожу линии родословной с помощью HTML CSS?
Я предполагаю, что Вы хотите то, что VSS называет Затем (Предыдущим) DocumentWindow. По умолчанию это находится на Ctrl (-Сдвиг)-f6 на моем VSS 8. На Ctrl (-Сдвиге) - Вкладка они имеют Next(Previous)DocumentWindowNav. Можно изменить назначения клавиш через Инструменты/Опции/Клавиатуру.
6 ответов
Другой вариант графического интерфейса - элемент холста. Вы можете найти некоторую информацию о нем здесь , здесь и некоторые демонстрации его возможностей здесь .
Лично я бы выбрал Canvas с наложение карты изображений или, возможно, Flash. Создание графического макета с использованием только div или таблиц может очень быстро выйти из-под контроля и создать огромный и уродливый код. Хотя это вопрос мнения. :)
Вы можете использовать холст для визуализации линий, а затем абсолютно позиционировать блоки div с текстом для каждого узла. Или вы можете визуализировать все это на холсте (в этот момент вам понадобится наложение карты изображения, если вы хотите, чтобы визуализированное дерево было интерактивным).
Я добавлю еще один ответ, хотя все ответы, приведенные выше, являются приблизительными.
Предположим, вы хотите работать во всех браузерах. Если вам нужно работать в Internet Explorer и вы пишете собственное решение Canvas, вы можете включить ExplorerCanvas .
Семейные деревья по сути являются бинарными деревьями - я знаю, в реальной жизни сложно усвоить , разводится, тьфу, но давайте на секунду предположим, что они бинарные, идущие в одном направлении (предки) от конкретного человека.
Хороший инструмент, который использует Canvas, имеет мост для работы с IE и использует простой и общий формат данных - JavaScript InfoVis Toolkit.
Посмотрите пример на: http://thejit.org/static/v20/Jit/Examples/Spacetree/example2.html
Возможно, это не совсем то, что вам нужно из коробки, но вы можете настроить внешний вид.
Полезные данные для подключаемого модуля очень просты, и ваш пример будет выглядеть примерно так:
var tree = {
id: "ME", // Needs to be internally unique
name: "ME", // Visual label, does not need to match id
data: {}, // not really used here, but parameter needed
children: [
{id: "DAD",
name: "DAD",
data: {},
children: [
{id: "GrDAD1",
name: "GrDAD1",
data: {},
children: []},
{id: "GrMOM1",
name: "GrMOM1",
data: {},
children: []},
]},
{id: "MOM",
name: "MOM",
data: {},
children: [
{id: "GrDAD2",
name: "GrDAD2",
data: {},
children: []},
{id: "GrMOM2",
name: "GrMOM2",
data: {},
children: []},
]}
]
};
Я уверен, что есть и другие решения, и я надеюсь, что вы найдете то, что вам подходит.
В примерах, которые я видел до сих пор, для подобных вещей используется вспышка. http://academia.edu , например.
В противном случае я, вероятно, использовал бы абсолютно позиционированные DIV для построения линий - хотя это потребовало бы некоторых сложных вычислений :)
Третий вариант - если вы хотите использовать больше javascript и пожертвовать некоторой совместимостью с браузером, следует использовать элемент SVG. Вы можете проверить эту библиотеку: http://raphaeljs.com/ Там есть симпатичная древовидная демонстрация, которая может вам пригодиться ( http://raphaeljs.com/graffle.html ).
Один из вариантов - использовать абсолютное позиционирование и несколько изображений. Вам понадобится горизонтальная линия и изображение вертикальной линии. Затем используйте позиционирование, чтобы расположить элементы по соответствующим линиям.
Я полагаю, используя CANVAS.
Взгляните ... может быть, это дает некоторое представление Рисование графики с помощью Canvas
google has a control for this
http://code.google.com/apis/visualization/documentation/gallery/orgchart.html