阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.orgchart 中文API文档

      插件 jQuery.orgchart 中文API文档

      JQuery组织结构图插件

      原始的JQuery组织结构图插件。

      重要!该项目已被react-org-chart项目取代。

      这是一个小型JQuery插件,可以从嵌套的无序列表生成分层的orginisational图表。

      HTML / CSS纯粹主义者可能不会对此感到满意,因为它使用嵌套表来实现布局。尽管如此,它运作良好,你可以很容易地制作漂亮的交互式组织结构图。

      这已经在Linux上的Firefox和Chrome以及Windows上的Firefox和Chrome上进行了测试。它也可以在IE8上运行,但是由于在破坏的浏览器中CSS支持不足,该图表看起来非常基本。

      有关更多信息,请参阅jquery-orgchart-plugin。

      有一些现场演示。

      还有一些旧的现场演示。

      还有一个高级现场演示, 显示Bootstrap集成和一种导航交互式图表的方法。

      一些新的教程可用。

      新:2015/02/20

      在列表项中添加“adjunct”节点,例如,可以使用附件在图表上显示“Assistant to …”关系。使用附件很简单,只需在列表项中添加“< adjunct>”元素即可。adjunct元素可以包含HTML。

      如果您已经创建了一些公开可用的美丽或有趣的图表,请发送链接或屏幕截图:

      mark [dot] lee [at] capricasoftware [dot] co [dot] uk

      特征

      • 图表节点内的HTML标记,包括可点击的超链接;
      • 源列表中的所有属性都会被烘焙到相应的图表节点中(例如,您可以使用自己的“数据”属性注释节点);
      • (可选)向每个图表节点添加“附属”节点(例如,“助手到”类型关系);
      • 用于将图表限制为所需级别数量的选项,并在单个堆栈中显示剩余级别;
      • 从源列表中复制CSS样式,类,HTML数据属性和标题属性(对工具提示或外部工具提示插件很有用)的选项(默认情况下全部启用);
      • 可选的回调来处理点击的图表节点;
      • 体积小,仅3K缩小(7K未缩小);
      • 通过覆盖少量CSS样式规则,可以轻松更改图表的外观;
      • 完全是它在锡上说的,没有功能臃肿!

      配置选项

      • chartClass (字符串)用于指定要添加到创建的图表的CSS类。
      • container (jQuery元素)指定将包含图表的元素。
      • copyClasses (boolean)指定是否应将CSS类从源列表复制到关联的图表节点。
      • copyData (布尔值)指定是否应将数据属性值从源列表复制到关联的图表节点。
      • copyStyles (boolean)指定是否应将CSS“样式”属性值从源列表复制到关联的图表节点。
      • copyTitle (boolean)指定是否应将“title”属性值从源列表复制到关联的图表节点。
      • depth(整数)与stack配置一起使用以配置堆叠生效的级别。
      • fade (布尔值)用于在显示/隐藏图表节点时启用淡入淡出动画。
      • hoverClass (字符串)用于指定在鼠标悬停时动态添加到图表节点的CSS类。
      • interactive (布尔值)用于启用交互式图表功能,例如单击以显示/隐藏子节点。
      • levels (整数)指定源列表中用于创建图表的深度级别。
      • nodeClicked单击图表节点时调用的(函数)回调函数:第一个参数是基础节点元素; 第二个参数是被单击的可视组件(jQuery对象)。
      • nodeText (函数)回调函数用于提取节点文本上下文。
      • replace (boolean)如果在生成图表之前应清空图表容器,则为true。
      • showLevels (整数)指定最初显示的图表级别数。
      • speed(jQuery speed)指定fade启用时的动画速度。
      • stack (布尔值)用于启用堆叠。
      目录
      本文目录
      目录