jquery组织架构图插件

## jquery插件
#### 效果图
![效果图][1]
#### 使用方法:
```
$(‘.orgWrap‘).lenChart({
data:obj, //数据源
drag:true, //是否可拖拽
depth:3, //初始化展示的层级
renderdata:function(data,$dom){}, //根据数据定制每个名片里面的DOM结构
callback:function(){} //渲染完图表后的回调函数
})
```
#### 数据源格式
```
var obj = {
id:001,
data:{}
children:[
{
id:001,
data:{}
children:[]
},
{
id:001,
data:{}
children:[]
}
]
}
```
#### 插件说明
使用递归的方式深层遍历数据,架构图第二层为横向结构,
从第三层开始为竖向结构,解决了横向太长的问题。
点击加减号按钮可以显示与隐藏当前节点的子节点。
#### 源码解析(jquery插件的写法)

```
(function($,window,document){
$.fn.lenChart = function (options) {//这里的options可以取到调用时传的参数
var defaults = {};
var opts = $.extend({}, defaults, options);
...
}
})(jQuery,window,document)
```
#### 最后附上[github](https://github.com/liubin915249126/javascript/tree/master/lencharts)地址,欢迎star

[1]: /img/bVUd8X

时间: 2024-10-19 02:20:53

jquery组织架构图插件的相关文章

支持触屏的jQuery轮播图插件

移动轮播图我看到两类, 一款是无线天猫的m.tmall.com和携程,实现了无缝轮播. 一款是蘑菇街的,没有实现无缝轮播. 我自己重写一个,类似天猫.不过功能上简单点,只实现支持触屏和无缝轮播. 1.页面代码 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml" lang="UTF-8"> 3 <head> 4 <meta charset="U

Jquery幻灯片焦点图插件

兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera的 jQuery. KinSlideshow幻灯片插件,功能很多 ,基本能满足你在网页上使用幻灯片(焦点图)效果. 下载

基于图形化的组织架构设计器

企业管理中,组织架构是最基础的数据,平时一般都是通过树形结构或列表平面化展示,但这样不够直观,领导在批准组织架构调整中,往往希望更接近组织架构图的形式展现,利用前面讲述的设计器课程思路,我设计了一个组织架构设计器: 如上图,可以实现公司.部门.岗位.员工的设计,为了方便扩展,我把它设计成了一个JQuery插件,很容易初始化: <script> $(function(){ $("#btn").on("click",function(){ var url=$

8款耀眼的jQuery/HTML5焦点图滑块插件

1.HTML5/CSS3超酷焦点图特效 带前后翻页按钮 今天要分享的这款HTML5/CSS3焦点图插件切换效果比较简单,但是外观和功能却十分强大.该CSS3焦点图在切换图片时,图片以淡入淡出的方式缩小消失并显示下一张图片.焦点图插件还拥有一套非常大气的前后翻页按钮,是一款非常实用HTML5/CSS3焦点图应用. 在线演示 源码下载 2.HTML5/CSS3淡入淡出滑块焦点图 非常清新 我们已经分享过几款简单的CSS3/jQuery焦点图插件,今天要分享的这款焦点图切换时有淡如淡出的动画效果,是利

组织架构树形图

一.说明 (1)通过后台查询数据库,生成树形数组结构,返回到前台. (2)需要引入的js插件和css文件: ①jquery.jOrgChart.css ②jquery.min.js ③jquery.jOrgChart.js (3)使用jOrgChart插件,根据返回的数据将其子节点加入到相应的<li></li>中. 首先,我们的数据表应该要有 id(节点),pid(父节点的id),name的字段, 那么我们要把这个数组转为树形数组结构,即将各个元素放在 pid 父类元素的 chil

10个免费的响应式jQuery Carousel 轮播图插件

jQuery Carousel 轮播图插件可以给网站创建华丽的动画效果,这里列出的10个jQuery Carousel 轮播图插件都是响应式的,并且可以免费使用. 1. ItemSlide.js 简单的触摸式Carousel 轮播图插件,提供多种样式的旋转动画,如向上滑动,基于全屏的触摸滑动,左右滑动等. 2. Liquid 每当Liquid 容器的大小改变时,都会重新调整列表中的项目数,以适应新的宽度. 3. jCarousel jCarousel 是一个用来控制水平或垂直方向上列表项的jQu

分享10款常用的jQuery焦点图插件

爱编程一直在收集整理编程相关的知识和解决方案,今天小编为大家带来10款非常常用的jquery焦点图插件. 1.jQuery可自动播放动画的焦点图插件 之前我们已经分享过很多非常实用的jQuery焦点图插件,大部分对开发者来说基本上可以直接拿来使用.今天我们要分享一款可以自动播放动画的jQuery焦点图插件,它在切换图片的时候可以播放对应图片的各种动画效果. 在线预览   源码下载 2.jQuery可自动播放动画的焦点图插件 这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又

一款基于jQuery的图片下滑切换焦点图插件

之前为大家分享了好多款jquery插件,今天我们要分享的一款jQuery插件也比较实用,是一款jQuery焦点图插件.焦点图相当普通,一共可以循环播放4张图片,并且每一张图片在切换的时候都是向下滑动的切换效果,并且在向下切换时产生弹性的动画特效,另外,插件是基于jQuery的,各种浏览器的兼容性应该还不错. 在线预览   源码下载 下面是实现这款jQuery焦点图的过程和代码. HTML代码: <div class="slider-wrap col-width"> <

一款基于的jQuery仿苹果样式焦点图插件

这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又相当大气.焦点图的整体样式是仿苹果样式的,由于jQuery的运用,我们只要点击图片下方的缩略图即可达到图片切换的焦点图特效,这款jQuery焦点图插件非常适合在产片展示的网页上使用. 在线预览   源码下载 接下来我们一起分享一下实现这款苹果焦点图的过程及源码. HTML代码: <div id="gallery"> <div id="slides" style="wi