• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >css3 > 基于DOM+CSS3实现OrgChart组织结构图插件

基于DOM+CSS3实现OrgChart组织结构图插件

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-06-02

本文主要包含orgchart,jquery orgchart,jquery.orgchart.js,orgchart.js,orgchart下载等相关知识,佚名 希望在学习及工作中可以帮助到您
jQuery OrgChart 是一个jQuery插件能够让帮你将一组嵌套的元素渲染成一个易于阅读的树形结构。易于使用。 你可以一个特定的树节来展示和隐藏一个树分支。可以采用CSS进行风格修改。还可以拖拉的方式来改变树节点的位置。
OrgChart 是一个基于纯DOM与CSS3的组织结构图插件


示例代码:
</div>
  1. // sample of core source code    
  2. var datascource = {    
  3. 'name': 'Lao Lao',    
  4. 'title': 'general manager',    
  5. 'relationship': ‘001’,    
  6. 'children': [    
  7. { 'name': 'Bo Miao', 'title': 'department manager', 'relationship': ‘110’ },    
  8. { 'name': 'Su Miao', 'title': 'department manager', 'relationship': ‘111’,    
  9. 'children': [    
  10. { 'name': 'Tie Hua', 'title': 'senior engineer', 'relationship': ‘110’ },    
  11. { 'name': 'Hei Hei', 'title': 'senior engineer', 'relationship': ‘110’ }    
  12. ]    
  13. },    
  14. { 'name': 'Yu Jie', 'title': 'department manager', 'relationship': ‘110’ }    
  15. ]    
  16. };    
  17. $('#chart-container').orgchart({    
  18. 'data' : datascource,    
  19. 'depth': 2,    
  20. 'nodeTitle': 'name',    
  21. 'nodeContent': 'title'    
  22. });  
</div>

关于小编给大家介绍的基于DOM+CSS3实现OrgChart组织结构图插件 到此为止,希望对大家有所帮助!

</div> </div>

您可能想查找下面的文章:

  • 基于DOM+CSS3实现OrgChart组织结构图插件

相关文章

  • 2017-06-02彻底弄明白CSS3的Media Queries(跨平台设计)
  • 2017-06-02推荐10个CSS3 制作的创意下拉菜单效果
  • 2017-06-02一款基于css3和jquery实现的动画显示弹出层按钮教程
  • 2017-06-02CSS3中Animation属性的使用详解
  • 2017-06-02纯CSS3实现3D旋转书本效果
  • 2017-06-02CSS3美化表单控件全集
  • 2017-06-02一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
  • 2017-06-02一款纯css3实现的竖形二级导航的实例教程
  • 2017-06-02利用CSS3实现炫酷的飞机起飞动画
  • 2017-06-02CSS3属性background-size使用指南

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS3动画:5种预载动画效果实例
    • 使用JS+CSS3技术:让你的名字动起来
    • HTML5和CSS3让网页设计提升到下一个高度
    • CSS3的first-child选择器实战攻略
    • CSS3制作文字半透明倒影效果的两种实现方式
    • CSS3教程:边框属性border的极致应用
    • 35款精致的 CSS3 和 HTML5 网页模板 推荐
    • 前端制作动画的几种方式(css3,js)
    • css3的transition属性详解
    • CSS3属性box-shadow使用详细教程

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有