简单叠加示例

组织结构图

最初的JQuery组织结构图插件。

这是一个小的JQuery插件，它从一个嵌套的无序列表生成一个分层的orginisational图表。

由于使用嵌套表来实现布局，html/css纯化器可能不会对这一点感到满意。

不过，它工作得很好，你可以很容易地找到漂亮的交互式组织结构图。

这已经在 Firefox 和 Chrome 上测试过了，在 Windows 上有 Firefox 和Chrome 。它也适用于 tmodel，但是由于缺少的CSS支持，这个错误的浏览器显示图表非常基本。

有关更多信息，请参见jquery-orgchart-plugin。

有一些现场演示工具。

还有一些老的现场演示工具。

此外，还有一个高级实时演示插件，展示集成和一种导航交互式图表的方法。

一些新教程可用。

新建：2015/02/20

添加一个"附加"节点 inside 你的列表项，一个附件可以以用于表示图表中的"助手。"关系。使用adjunct很简单，只需向列表项添加一个" <附加>"元素即可。 adjunct元素可以包含 HTML 。

如果你已经创建了一些公开或者有趣的图表，请发送链接或者屏幕快照至：

mark [dot] [at] capricasoftware [dot] [dot] 英国

特性

∙HTML标记，包括点击超链接，inside 图表节点；

∙源列表中的所有属性都将烘焙到相应的图表节点( 比如。你可以使用自己的"数据"属性对节点进行注释

∙可以选择将"附加"节点添加到每个图表节点( 比如。对于"助手"类型关系) ；

∙选项将图表限制到所需级别的数目，并在单个堆栈中显示剩余级别；

∙从源列表( 默认情况下全部启用) 中复制CSS样式。类。HTML数据属性和标题属性( 对于工具提示或者外部工具提示插件有用)的选项；

∙可选回调处理点击的图表节点；

∙体积小，只有 3K 个缩小( 7k un )

∙通过覆盖少量CSS样式规则，可以轻松改变图表的外观；

∙就像锡上所说的没有特征膨胀！

配置选项

chartClass ( 字符串) 用于指定要添加到已经创建图表的CSS类。

container ( jQuery元素) 指定将包含图表的元素。

copyClasses ( 布尔型) 指定是否应该将CSS类从源列表复制到关联的图表节点。

copyData ( 布尔型) 指定是否应将数据属性值从源列表复制到关联的图表节点。

copyStyles ( 布尔型) 指定是否应将 CSS"样式"属性值从源列表复制到关联的图表节点。

copyTitle ( 布尔型) 指定是否应将"标题"属性值从源列表复制到关联的图表

节点。

depth ( 整型) 与 stack 一起使用，以配置堆栈生效的级别。

fade ( 布尔型) 用于在显示/隐藏图表节点时启用淡入淡出动画。

hoverClass ( 字符串) 用于指定动态添加到鼠标上的图表节点上的CSS类。

interactive ( 布尔型) 用于启用交互式图表功能，如单击显示/隐藏子节点。

levels ( 整型) 指定源列表中的深度用于创建图表的深度。

单击图表节点时调用 nodeClicked ( 函数) 回调函数：第一个参数是基础节

点元素；第二个参数是单击( 一个jQuery对象)的可视组件。

用于提取节点文本上下文的nodeText ( 函数) 回调函数。

replace ( 布尔型) true 如果图表容器应在生成图表之前清空。

showLevels ( 整型) 指定最初要显示的图表级别数。

如果启用 fade，speed ( jQuery速度) 指定动画速度。

stack ( 布尔型) 用于启用堆叠。

简单示例

$("#organisation").orgChart({container: $("#main")});

在这个示例中"#organisation"是源列表的选择器，"容器"选项指定所生成图表的目标容器。

现场演示插件

用于简单演示的源

简单叠加示例

$("#organisation").orgChart({container: $("#main"), stack: true, depth: 2});

在上一个示例上构建，"堆栈"选项添加了一个对应的" 2"图表"深度"。这意味着图表将在单个列表中堆叠任何剩余级别之前显示两个级别。

现场演示插件

用于简单堆栈演示的源。

样式级别示例

$("#organisation").orgChart({container: $("#main")});

Chart div.node.level1 {

background-color: #fbcece;

}

Chart div.node.level1.special {

background-color: white;

}

Chart div.node.level2 {

background-color: #cefbce;

}

Chart div.node.level3 {

background-color: #e0cefb;

}

图表中的每个节点自动为它的级别分配一个类，这可以以用于单独对每个级别进行样式化。

在源列表中指定的任何类都应用于相应的图表节点，这也可以用于定制特定节点或者节点集。在这个例子中主角色有自己独特的background 颜色，覆盖了他在图表中的颜色。图表的root 级别为零。

现场演示插件

用于样式级演示的源

吃你自己的狗食品示例

$("#organisation").orgChart({container: $("#main")});

现场演示插件

美国狗食品演示公司的源码。

其他示例

简单互动现场演示工具。

链接现场演示插件