帮助你生成组织结构图的jQuery插件 - jOrgChart
jQuery插件库
web前端培训教程：jQuery插件库插件(Plugin)也成为jQuery 扩展(Extension)，是一种遵循一定规范的应用程序接口编写出来的程序。
目前jQuery 插件已超过几千种，由来自世界各地的开发者共同编写、验证和完善。
而对于jQuery 开发者而言，直接使用这些插件将快速稳定架构系统，节约项目成本。
一．插件概述插件是以jQuery 的核心代码为基础，编写出复合一定规范的应用程序。
也就是说，插件也是jQuery 代码，通过js 文件引入的方式植入即可。
插件的种类很多，主要大致可以分为：UI 类、表单及验证类、输入类、特效类、Ajax 类、滑动类、图形图像类、导航类、综合工具类、动画类等等。
引入插件是需要一定步骤的，基本如下：1.必须先引入jquery.js 文件，而且在所有插件之前引入；2.引入插件；3.引入插件的周边，比如皮肤、中文包等。
二．验证插件Validate.js 是jQuery 比较优秀的表单验证插件之一。
这个插件有两个js 文件，一个是主文件，一个是中文包文件。
使用的时候，可以使用min 版本；在这里，为了教学，我们未压缩版本。
验证插件包含的两个文件分别为：jquery.validate.js 和jquery.validate.messages_zh.js。
//HTML 内容<script type="text/javascript" src="jquery.validate.js"></script><script type="text/javascript" src="jquery.validate.messages_zh.js"></script> <form><p>用户名：<input type="text" class="required" name="username" minlength="2" />*</p><p>电子邮件：<input type="text" class="required email" name="email" /> *</p><p>网址：<input type="text" class="url" name="url" /></p><p><input type="submit" value="提交" /></p></form>//jQuery 代码$(function () { $('form').validate();});只要通过form 元素的jQuery 对象调用validate()方法，就可以实现“必填”、“不能小于两位”、“电子邮件不正确”、“网址不正确”等验证效果。
jQuery 插件开发详解
JavaScript jQuery 插件开发jQuery 插件开发其实很简单jQuery已经被广泛使用，凭借其简洁的API，对DOM强大的操控性，易扩展性越来越受到web开发人员的喜爱，我在社区也发布了很多的jQuery插件经常有人询问一些技巧，因此干脆写这么一篇文章给各位jQuery爱好者，算是抛砖引玉吧。
【基础】a)样式很多人会认为样式是个很复杂的东西，需要沉着冷静的心态加上非凡的审美观才能设计出赏心悦目的UI，抛开图片设计不说，其实css也就是那么些属性：position,margin,paddi ng,width,height,left,top,float,border,background...UI设计的漂亮与否在很大程度上依赖于设计人员对配色的把握和整体效果的协调。
举个简单的例子，一个简单的页面，马虎的人：复制代码代码如下:<html xmlns="/1999/xhtml"><head><title>Test Page</title></head><body>jQuery是一个框架！压缩后有30多k吧。
</body></html>细心的人：复制代码代码如下:<html xmlns="/1999/xhtml"><head><title>Test Page</title><style type="text/css">body{font-family:'宋体';font-size:12px;}</style></head><body>jQuery是一个框架！压缩后有30多k吧。
</body></html>专心的人：[Ctrl+A 全选注:如需引入外部Js需刷新才能执行] 我们对比一下三者的UI效果：一目了然，或许很多的站点失去关注正是因为这不起眼的font-family,font-size。
10个免费的jQuery可视化编辑器插件
10个免费的jQuery可视化编辑器插件⽂本编辑器，也就是所见即所得的HTML编辑器，是⽹站⼀个⾮常重要的组件，特别是对于⼀些内容发布⽹站来说。
本⽂介绍10个基于jQuery的可视化⽂本编辑器。
1.MarkitUpmarkItUp!并不是全功能的编辑器，它是⼀个⾮常轻量级、可定制的灵活引擎，适合CMS、博客、论坛等⽹站。
makrItUp并不是所见即所得的，以后也不会是。
demo / source2.jWYSIWYG这是⼀个内嵌的内容编辑器，可直接编辑HTML内容，并具备所见即所得的效果，该插件体积⾮常⼩，只有不到26K。
demo / source3.RTE jQuery该编辑器同样⾮常⼩⽽且易⽤，并可根据需要进⾏定制，jquery.rte.js⽂件只有7k（未压缩），兼容主流浏览器（IE6，Firefox 2，Opera 9，Safari 3.03）demo / source4.jHtmlAreajHtmlArea是⼀个简单、轻量级、可扩展、基于jQuery开发的WYSIWYG HTML编辑器。
这个组件可以很⽅便将页⾯中的TextArea标签转换成⼀个WYSIWYG HTML Editor。
整个编辑器包括图⽚和CSS⼤⼩只有22k。
demo / source5.WYMEditorWYMeditor是⼀个基于Web浏览器的可视化HTML编辑器，界⾯如下图所⽰demo / source6.uEditoruEditor是⼀个灵活易⽤的编辑器，⽣成的HTML代码很简单整洁，可通过css定制外观demo / source7.jQuery WYSIWYG Rich Text EditorjQuery Wysiwyg是⼀个易于集成和定制的编辑器，⽀持浏览器：IE6，IE7，IE8，FF3，Opera9，Safari4，Google Chrome2,使⽤MIT授权demo / source8.HtmlBoxHtmlBox是⼀个基于jQuery开发的HTML/XHTML编辑器。
jQuery插件汇总(待添加)
本文由我司收集整编，推荐下载，如有疑问，请与我司联系jQuery 插件汇总（待添加）2013/10/08 0 jQuery 插件jQuery Spin Button 自定义文本框数自增或自减jQuery 插件JQuery Pager 分页器实现javascript 分页功能jQuery 插件FontSizer 实现Javascript 自定义动态调整网页文字大小jQuery 插件Magnify 放大镜实现javascript 图片放大功能jQuery 插件tooltip 提示条实现Javascript 动态文字或图片提示效果jQuery 插件Step Carousel Viewer 实现Javascript 图片滑动旋转效果jQuery 插件accordion 折叠菜单实现Javascript 展开收缩菜单功能jQuery 插件ImageFlyout 弹出图片实现javascript 放大图片功能jQuery 插件SmoothNavigationalMenu 导航菜单实现Javascript 下拉多级菜单功能jQuery 插件PiroBox 弹出图片盒实现Javascript 新窗口全屏图片展示功能jQuery 插件CalendarWidget 日历工具实现Javascript 简单日历功能jQuery 插件Datepicker 日期选择器实现Javascript 自定义日期时间选择功能jQuery 插件TableSearch 表搜索实现Javascript 搜索表内容功能jQuery 插件floatbox 浮动层实现javascript 弹出浮动窗口功能jQuery 插件timers 定时器实现javascrip 定时或按钮控制功能jQuery 插件absolutizePrototypePort 实现Javascript 绝对定位jQuery 插件$.event.special.drag 拖动实现javascript 随意定制拖动功能jQuery 插件smartFocus 实现javascript 文本框blur 焦点显示或隐藏默认效果jQuery 插件AjaxFileUpload 文件上传实现Javascript 多文件上传功能jQuery 插件AjaxManager 实现Javascript 自定义ajax 请求和响应时间功能jQuery 插件AjaxQueue 队列实现Javascript 队列或同步请求功能jQuery 插件ajaxContent 实现javascript 通过ajax 获取任意内容jQuery 插件Add2Cart 添加到购物车实现javascript 动态提示添加到购物车效果jQuery 插件animateToClass 实现javascript 自定义动画效果jQuery 插件Lightweight Rich Text Editor 轻量级编辑器jQuery 插件Adjacent 实现动态获取相邻元素增加自定义效果jQuery 插件ColorBox 彩盒实现javascript 自定义灯箱效果jQuery 插件James 实现javascript 自动完成提示功能jQuery 插件Validate 验证表单实现javascript 表单验证功能jQuery 插件Validation 验证表单实现javascript 表单智能验证功能jQuery 插件QuickPaginate 快速分页实现javascript 分页功能jQuery 插。
jQuery制作简单柱状图实例-电脑资料
jQuery制作简单柱状图实例-电脑资料这篇文章主要介绍了jQuery制作简单柱状图的方法,实例分析了html与css布局以及jQuery功能的具体实现方法,需要的朋友可以参考下本文实例讲述了jQuery制作简单柱状图的方法，。
分享给大家供大家参考。
具体实现方法如下：Html部分：代码如下:CSS部分：代码如下:/*以下为柱状图样式*/.histogram-container{position:relative;margin-left:60px;margin-top:10px;margin-bottom:25px;}.histogram-bg-line{border:#999 solid;border-width:0 0px 1px 1px;border-right-color:#eee;overflow:hidden;width:99%;} .histogram-bg-line ul{overflow:hidden;border:#eee solid;border-width:1px 0 0 0;clear:both;}.histogram-bg-lineli{float:left;overflow:hidden;background:#fff;}.histogram-bg-line li div{border-right:1px #eee solid;}.histogram-content{position:absolute;left:0px;top:0;width:99%;height:100%;} .histogram-content ul{height:100%;}.histogram-content li{float:left;height:100%;text-align:center;position:relative;}.histogram-box{position:relative;display:inline-block;height:100%;width:20px;}.histogram-content li a{position:absolute;bottom:0;right:0;display:block;width:20px;fo nt-size:0;line-height:0;}.histogram-content li .histogram-name{position:absolute;bottom:-20px;left:0px;white-space:nowrap;display:inline-block;width:100%;font-size:12px;overflow:hidden;}.histogram-y{position:absolute;left:-60px;top:-10px;font:12px/1.8 verdana,arial;}.histogram-y li{text-align:right;width:55px;padding-right:5px;color:#333;}.histogram-bg-line li div,.histogram-y li{height:30px;/*控制单元格的高度及百分比的高度，使百分数与线条对其*/}Js部分：代码如下:$(function(){var dataArr={"data":[{"id":1,"name":"百度","per":"10"},{"id":2,"name":"腾讯","per":"20"},{"id":3,"name":"新浪","per":"10"},{"id":4,"name":"网易","per":"44"},{"id":5,"name":"搜狐","per":"50"},{"id":5,"name":"小虾虎鱼","per":"69"},{"id":5,"name":"人人网","per":"72"},{"id":5,"name":"爱奇艺","per":"88"},{"id":5,"name":"奇虎360","per":"92"},{"id":5,"name":"阿里巴巴","per":"15"},{"id":5,"name":"阿里巴巴","per":"10"}]};new histogram().init(dataArr.data);});function histogram(){var controls={};var bgColor=new Array("#666666","#21AA7C","#2277BB","#dc7644","#BBAA22"," #AA22AA","#338800","#1099EE","#ffcc33","#ED3810");this.init=function(data,y){setControls();buildHtml(data,y);}function setControls(){controls.histogramContainer=$("#histogram-container");controls.histogramBgLineUL=controls.histogramContainer.c hildren("div.histogram-bg-line");controls.histogramContentUL=controls.histogramContainer. children("div.histogram-content");controls.histogramY=controls.histogramContainer.children(" div.histogram-y");}function buildHtml(data,y){var len=data.length,perArr=new Array(),maxNum,maxTotal,yStr=‘‘;var contentStr=‘‘,bgLineStr=‘‘,bgLineAll=‘‘;var widthPer=Math.floor(100/len);minWidth=len*21+60;controls.histogramContainer.css("min-width",minWidth+"px");for(var a=0;a<len;a++){< p=""></len;a++){<>perArr[a]=parseInt(data[a][‘per‘]);}maxNum=String(perArr.max());if(maxNum.length>2){var x=parseInt(maxNum.substr(maxNum.length-2,1))+1;maxTotal=Math.floor(parseInt(maxNum/100))*100+x*10;}else{maxTotal=Math.floor(parseInt(maxNum/10))*10+10;}//y轴部分if(y=="%"){yStr+=‘100%80%60%40%20%0%‘;}else{var avg=maxTotal/5;for(i=5;i>=0;i--){yStr+=‘‘+avg*i+‘‘;}}//柱状条部分for(var i=0;i<len;i++){< p=""></len;i++){<>var per=Math.floor(parseInt(data[i][‘per‘])/maxTotal*100);var n=Math.floor(parseInt(per)/10);contentStr+=‘‘;contentStr+=‘‘+data[i][‘name‘]+‘‘;contentStr+=‘‘;bgLineStr+=‘‘;}//背景方格部分for(var j=0;j<5;j++){bgLineAll+=‘‘+bgLineStr+‘‘;}bgLineAll=‘‘+bgLineAll+‘‘;contentStr=‘‘+contentStr+‘‘;yStr=‘‘+yStr+‘‘;controls.histogramContainer.html(bgLineAll+contentStr+ySt r);controls.histogramContainer.css("height",controls.histogram Container.height()+"px");//主要是解决IE6中的问题}}Array.prototype.max = function(){//最大值return Math.max.apply({},this)}希望本文所述对大家的jQuery程序设计有所帮助，电脑资料《jQuery制作简单柱状图实例》(https://www.)。
JQuery常用插件
JQuery常用插件1．报表插件jqPlot案例一：2．表格插件table表格由于它的浏览器兼容性和复杂的标签嵌套方式，可以算是添加样式最困难的对象之一了。
大多数前端er都把网页中的table标签替换为div，主要就是因为div要比table 更容易添加CSS样式。
但是我们在日常应用中仍然要用到table表格，其中最好的例子就是对照表。
这里推荐15个jQuery表格插件让你对数据表格进行显示、排序、筛选和操控。
如jQuery表格排序插件、jQuery表格拖拽插件、jQuery树形表格插件、设置颜色、点击、替换等效果。
1.DataTables-强大的jQuery表格插件DataTables是提供了大量特性的强大jQuery表格插件。
例如:你可以自动轻松筛选、Ajax预读取数据、分页、列排序、高亮排序列、扩展插件支持、使用CSS或jQuery UI ThemeRoller 定制主题和完整文档。
2.uiTableFilter-jQuery表格过滤插件uiTableFilter是一个用于表格行筛选的jQuery插件。
插件作者提供了详细的例子来告诉大家如何将自己的表格和插件整合在一起并完成表格筛选。
3.Scrollable HTML Table-jQuery表格滚动插件Scrollable HTML Table jQuery插件可以让你的表格变得可以滚动控制。
4.Tablesorter-jQuery表格排序插件Tablesorter这个jQuery插件是用来将一个包含thead和tbody标签的标准HTML表格转变为无页面刷新的可排序表格。
它不但支持多列排序，而且跨浏览器兼容并且能通过widget系统进行扩展。
5.Flexigrid-Web2.0 jQuery表格插件Flexigrid 是一个轻量级的Web2.0 jQuery插件。
它包含很多非常Cool的特性，如主题定制、分页、工具栏、搜索、排序、ajax读取数据源、调整列宽高尺寸等。
jquery.jsPlumb实现拓扑图
jquery.jsPlumb实现拓扑图基于jquery.jsPlumb编写拓扑图，供⼤家参考，具体内容如下要求：实现公司组织结构拓扑关系，可展开，可收拢；动态数据展⽰；叶⼦节点可点击；实现办法：1 国内还有⼀个插件也⽐较简单，但是该插件只能全部展开，并不能收拢，放弃了该办法；2 最后选择了这个插件，因为相关资料很少，所以每步都是⾃⼰摸索出来的；对数据的要求：因为该插件的每个节点都是⼀个具有独⽴不同id的div模块，所以json数据要求有⼀个id属性，并且所有的id都要不⼀样；实现的原理：1 先定位所有的节点（这个还简单点，只要依次遍历数据就⾏）；2 添加拓扑关系；（这个地⽅⽐较复杂，尤其是点击节点时，其他节点收缩，直接点展开，⾥⾯的循环量特别⼤，⼏乎都是在⼀个⼤循环⾥⾯套⽤了很多的⼦循环）1 html部分（注意事项，⾥⾯的图⽚⾃⼰设置）<!DOCTYPE html><html><head><meta charset="utf-8"><script type="text/javascript" src="scripts/jquery-1.7.2.js"></script><script type="text/javascript" src="scripts/jquery.jsPlumb-1.4.0-all.js"></script><script type="text/javascript" src="scripts/test.js"></script><style type="text/css">.rootNode {// background-color: #79deff;width: 36px;height: 36px;position: absolute;background-image: url(images/monitor_server.png);background-size: 32px 32px;background-repeat: no-repeat;background-position:center;/* -webkit-box-shadow: #909090 0px 0px 10px;-moz-box-shadow: #909090 0px 0px 10px;box-shadow: #909090 0px 0px 10px;*/}.instanceNode {// background-color: #50d4ff;width: 36px;height: 36px;position: absolute;background-image: url(images/instance_big.png);background-size: 32px 32px;background-repeat: no-repeat;background-position:center;-moz-background-size: 32px 32px;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/instance_big.png', sizingMethod='scale')\9;-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/instance_big.png',sizingMethod='scale')"\9;cursor:pointer;/* -webkit-box-shadow: #666 0px 0px 10px;-moz-box-shadow: #666 0px 0px 10px;box-shadow: #666 0px 0px 10px; */}.instanceNode_leaf {// background-color: #50d4ff;width: 36px;height: 36px;position: absolute;background-image: url(images/user_online.png);background-size: 32px 32px;background-repeat: no-repeat;background-position:center;-moz-background-size: 32px 32px;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/user_online.png', sizingMethod='scale')\9;-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/user_online.png',sizingMethod='scale')"\9;cursor:pointer;/* -webkit-box-shadow: #666 0px 0px 10px;-moz-box-shadow: #666 0px 0px 10px;box-shadow: #666 0px 0px 10px; */}.nodeWord{//font-weight: bold;font-size: 12px;color:white;text-align: center;position: absolute;bottom: -20px;width: 100%;}.cursorEndpoint{cursor:pointer;}body{background:#27363F;}</style></head><body style="overflow: scroll;"><div id="top_server" class="rootNode"><div style=""></div></div></body></html>2 test.jsvar tree_json=[{"id": "1","text": "国核院","iconCls": "icon-org","state": "closed","children": [{"id": "2","text": "⼟⽊⼯程部","iconCls": "icon-org","state": "closed","children": [{"id": "3","text": "科室⼀","iconCls": "icon-org","state": "closed","children": [{"id": "4","text": "u110","iconCls": "icon-man"},{"id": "5","text": "u120","iconCls": "icon-man"},{"id": "51","text": "u120","iconCls": "icon-man"}]},{"id": "6","text": "财务","iconCls": "icon-org","state": "closed","children": [{"id": "7","text": "u111","iconCls": "icon-man"},{"id": "71","text": "u111","iconCls": "icon-man"}]}]},{"id": "8","text": "建筑⼯程部","iconCls": "icon-org","state": "closed","children": [{"id": "9","text": "科室⼀","iconCls": "icon-org","state": "closed",},{"id": "11","text": "财务","iconCls": "icon-org","state": "closed","children": [{"id": "12","text": "u114","iconCls": "icon-man"}]}]},{"id": "13","text": "综合室","iconCls": "icon-org","state": "closed","children": [{"id": "14","text": "u113","iconCls": "icon-man"},{"id": "141","text": "u113","iconCls": "icon-man"}]},{"id": "15","text": "重庆公司","iconCls": "icon-org","state": "closed","children": [{"id": "16","text": "⼟⽊⼯程部","iconCls": "icon-org","state": "closed","children": [{"id": "17","text": "科室⼀","iconCls": "icon-org","state": "closed","children": [{"id": "18","text": "u115","iconCls": "icon-man" }]},{"id": "19","text": "财务","iconCls": "icon-org","state": "closed","children": [{"id": "20","text": "张⽂涛","iconCls": "icon-man"}]}]},{"id": "21","text": "建筑⼯程部","iconCls": "icon-org","state": "closed","children": [{"id": "24","text": "财务","iconCls": "icon-org","state": "closed","children": [{"id": "25","text": "李⼩进","iconCls": "icon-man"}]}]}]}]}];$.ajax({url: 'scripts/text.json',type: 'GET',dataType: 'json',data: {},}).done(function() {console.log("success");myjson=tree_json;showTopo();}).fail(function() {console.log("error");}).always(function() {console.log("complete");});function showTopo(){$("#top_server").css({"left":"50%","top":"5%"});$(document).on({mouseover:function(){$(this).css({"background-color":"#79deff","box-shadow":"#909090 0px 0px 10px", "-webkit-box-shadow": "#909090 0px 0px 10px","-moz-box-shadow": "#909090 0px 0px 10px"});},mouseout:function(){$(this).css({"background-color":"","box-shadow":"","-webkit-box-shadow": "","-moz-box-shadow": ""});},click:function(){alert($(this).text());}},".instanceNode_leaf");var company=myjson[0]["children"]; //初始化公司数组var companyNumber=company.length; //var company_department_arr=[]; //获取部门数组var company_department_sec_arr=[]; //获取科室数组//元素的摆放先摆放公司部门科室员⼯if(tree_json[0].hasOwnProperty("children")){elementLocation(company,companyNumber);}//开始定义连线和点击事件jsPlumb.ready(function() {jsPlumb.draggable("top_server"); //定义可拖拽var hoverPaintStyle = { lineWidth:2,strokeStyle:"#dedede" }; //⿏标经过时线宽度和颜⾊jsPlumb.importDefaults({DragOptions : { cursor: 'pointer'}, //拖动时⿏标停留在该元素上显⽰指针，通过css控制EndpointStyles : { width:10, height:10,cursor: 'pointer'},//连接点的默认颜⾊Connector : "Straight", //设置连线为直线Endpoint : "Rectangle",//连接点的默认形状Anchor : "Top",//连接点的默认位置MaxConnections:1000,//同上ConnectionsDetachable:false,HoverPaintStyle:hoverPaintStyle});var defaults = {paintStyle:{ fillStyle:"#B4B9C5" },//设置连接点的颜⾊connectorStyle:{ strokeStyle:"#B4B9C5", lineWidth:2 },//连线颜⾊、粗细connector:[ "Flowchart", { stub:[10, 20], gap:5, cornerRadius:2} ],isSource:true,isTarget:true,endpoint:"Blank"};var rootnode={endpoint:["Image", { src:"images/sub.png" }],//设置连接点的形状为圆形paintStyle:{ fillStyle:"#B4B9C5" },//设置连接点的颜⾊connectorStyle:{ strokeStyle:"green", lineWidth:2 },//连线颜⾊、粗细//connector:["Straight",{gap:5}],connector:[ "Flowchart", { stub:[10, 20], gap:10, cornerRadius:2} ],cssClass:"cursorEndpoint"};var s1=jsPlumb.addEndpoint("top_server", {anchor:"Bottom"},rootnode);//根节点设置//添加拓扑关系for(var i=0;i<companyNumber;i++){var company_department=company[i].children; //四个公司下⾯的部门jsPlumb.draggable("instance_"+company[i].id); //设置四个公司可拖拽var s2=jsPlumb.addEndpoint("instance_"+company[i].id,defaults); //设置四个公司的节点 jsPlumb.connect({source:s1, target:s2}); //连接服务器和是个公司;if(company_department.length>0){var s2_root=jsPlumb.addEndpoint("instance_"+company[i].id, {anchor:"Bottom"},rootnode); //把四个公司设置成根节点//对公司绑定click事件s2_root.bind("click", function(endpoint) {if(endpoint.getParameter("img")&&endpoint.getParameter("img")=="add"){endpoint.setParameter("img","sub");endpoint.setImage("images/sub.png");for(var k=0;k<endpoint.connections.length;k++){endpoint.connections[k].setVisible(true);$("#"+endpoint.connections[k].targetId).show();var oid=endpoint.connections[k].targetId.split("_")[1];jsPlumb.show("instance_"+oid,true);}//隐藏其他部门以及部门下的组织for(var m=0;m<company.length;m++){if(endpoint.elementId!="instance_"+company[m].id){var conn=jsPlumb.select({source:"instance_"+company[m].id});for(var n=0;n<conn.length;n++){$("#"+conn.get(n).targetId).hide();jsPlumb.hide(conn.get(n).targetId,true);var oid=conn.get(n).targetId.split("_")[1];var conn_org=jsPlumb.select({source:"instance_"+oid});for(var n1=0;n1<conn_org.length;n1++){$("#"+conn_org.get(n1).targetId).hide();jsPlumb.hide(conn_org.get(n1).targetId,true);var oid_1=conn_org.get(n1).targetId.split("_")[1];var conn_org_l1=jsPlumb.select({source:"instance_"+oid_1});for(var nn1=0;nn1<conn_org_l1.length;nn1++){$("#"+conn_org_l1.get(nn1).targetId).hide();}}}conn.get(0).endpoints[0].setParameter("img","add");conn.get(0).endpoints[0].setImage("images/add.png");conn.setVisible(false);}else{var company_department_orgnize=company[m].children;for(var kk=0;kk<company_department_orgnize.length;kk++){if(company_department_orgnize[kk].hasOwnProperty("children")){jsPlumb.select({source:"instance_"+company_department_orgnize[kk].id}).setVisible(false);jsPlumb.select({source:"instance_"+company_department_orgnize[kk].id}).get(0).endpoints[0].setParameter("img","add"); jsPlumb.select({source:"instance_"+company_department_orgnize[kk].id}).get(0).endpoints[0].setImage("images/add.png"); }}}}}else{endpoint.setParameter("img","add");endpoint.setImage("images/add.png");for(var k=0;k<endpoint.connections.length;k++){endpoint.connections[k].setVisible(false);$("#"+endpoint.connections[k].targetId).hide();jsPlumb.hide(endpoint.connections[k].targetId,true);var oid=endpoint.connections[k].targetId.split("_")[1];var conn_org=jsPlumb.select({source:"instance_"+oid});for(var n1=0;n1<conn_org.length;n1++){$("#"+conn_org.get(n1).targetId).hide();jsPlumb.hide(conn_org.get(n1).targetId,true);var oid_1=conn_org.get(n1).targetId.split("_")[1];var conn_org_l1=jsPlumb.select({source:"instance_"+oid_1});for(var nn1=0;nn1<conn_org_l1.length;nn1++){$("#"+conn_org_l1.get(nn1).targetId).hide();}}}}if (erAgent.indexOf('MSIE') > -1) {jsPlumb.repaintEverything();}});//添加部门拓扑关系，也就是连接公司到部门,遍历部门for(var i1=0;i1<company_department.length;i1++){var company_department_orgnize=company_department[i1].children; //四个公司下⾯的部门的组织jsPlumb.draggable("instance_"+company_department[i1].id); //设置部门可拖拽var s3=jsPlumb.addEndpoint("instance_"+company_department[i1].id,defaults); //设置部门的节点jsPlumb.connect({source:s2_root, target:s3}); //连接四个公司到部门company_department_arr.push(company_department[i1]);if(company_department[i1].hasOwnProperty("children")){var s3_root=jsPlumb.addEndpoint("instance_"+company_department[i1].id, {anchor:"Bottom"},rootnode); //把部门设置成根节点//对部门绑定click事件s3_root.bind("click", function(endpoint) {if(endpoint.getParameter("img")&&endpoint.getParameter("img")=="add"){endpoint.setParameter("img","sub");endpoint.setImage("images/sub.png");for(var k1=0;k1<endpoint.connections.length;k1++){endpoint.connections[k1].setVisible(true);$("#"+endpoint.connections[k1].targetId).show();var oid1=endpoint.connections[k1].targetId.split("_")[1];jsPlumb.show("instance_"+oid1,true);$("#instance_"+oid1).show();}//隐藏其他部门下的科室for(var mm=0;mm<company_department_arr.length;mm++){if(endpoint.elementId!="instance_"+company_department_arr[mm].id){var conn_org1=jsPlumb.select({source:"instance_"+company_department_arr[mm].id});if(company_department_arr[mm].hasOwnProperty("children")){for(var nn=0;nn<conn_org1.length;nn++){$("#"+conn_org1.get(nn).targetId).hide();jsPlumb.hide(conn_org1.get(nn).targetId,true);var oid_s=conn_org1.get(nn).targetId.split("_")[1];var conn_org_l2=jsPlumb.select({source:"instance_"+oid_s});for(var nnn1=0;nnn1<conn_org_l2.length;nnn1++){$("#"+conn_org_l2.get(nnn1).targetId).hide();jsPlumb.hide(conn_org_l2.get(nnn1).targetId,true);var oid_11=conn_org_l2.get(nnn1).targetId.split("_")[1];var conn_org_l11=jsPlumb.select({source:"instance_"+oid_11});for(var nnn2=0;nnn2<conn_org_l11.length;nnn2++){$("#"+conn_org_l11.get(nnn2).targetId).hide();}}}conn_org1.get(0).endpoints[0].setParameter("img","add");conn_org1.get(0).endpoints[0].setImage("images/add.png");conn_org1.setVisible(false);}}else{var company_department_orgnize_sec=company_department_arr[mm].children;for(var kkk=0;kkk<company_department_orgnize_sec.length;kkk++){if(company_department_orgnize_sec[kkk].hasOwnProperty("children")){jsPlumb.select({source:"instance_"+company_department_orgnize_sec[kkk].id}).setVisible(false); jsPlumb.select({source:"instance_"+company_department_orgnize_sec[kkk].id}).get(0).endpoints[0].setPa }}}}}else{endpoint.setParameter("img","add");endpoint.setImage("images/add.png");for(var k1=0;k1<endpoint.connections.length;k1++){endpoint.connections[k1].setVisible(false);$("#"+endpoint.connections[k1].targetId).hide();jsPlumb.hide(endpoint.connections[k1].targetId,true);var oidss=endpoint.connections[k1].targetId.split("_")[1];var conn_org_l2=jsPlumb.select({source:"instance_"+oidss});for(var nnn1=0;nnn1<conn_org_l2.length;nnn1++){$("#"+conn_org_l2.get(nnn1).targetId).hide();jsPlumb.hide(conn_org_l2.get(nnn1).targetId,true);var oid_11=conn_org_l2.get(nnn1).targetId.split("_")[1];var conn_org_l11=jsPlumb.select({source:"instance_"+oid_11});for(var nnn2=0;nnn2<conn_org_l11.length;nnn2++){$("#"+conn_org_l11.get(nnn2).targetId).hide();}}}}if (erAgent.indexOf('MSIE') > -1) {jsPlumb.repaintEverything();}});//添加科室拓扑关系，也就是连接部门到科室;for(var i2=0;i2<company_department_orgnize.length;i2++){var staff=company_department_orgnize[i2].children; //组织下⾯的个⼈jsPlumb.draggable("instance_"+company_department_orgnize[i2].id); //设置组织可拖拽var s4=jsPlumb.addEndpoint("instance_"+company_department_orgnize[i2].id,defaults); //设置组织的节点jsPlumb.connect({source:s3_root, target:s4}); //连接连接部门到组织company_department_sec_arr.push(company_department_orgnize[i2]);if(company_department_orgnize[i2].hasOwnProperty("children")){var s4_root=jsPlumb.addEndpoint("instance_"+company_department_orgnize[i2].id, {anchor:"Bottom"},rootnode); //把组织设置成根节点//绑定科室点击事件s4_root.bind("click", function(endpoint) {if(endpoint.getParameter("img")&&endpoint.getParameter("img")=="add"){endpoint.setParameter("img","sub");endpoint.setImage("images/sub.png");for(var k2=0;k2<endpoint.connections.length;k2++){endpoint.connections[k2].setVisible(true);$("#"+endpoint.connections[k2].targetId).show();}//隐藏其他科室下的⼈for(var mmm=0;mmm<company_department_sec_arr.length;mmm++){if(endpoint.elementId!="instance_"+company_department_sec_arr[mmm].id){var conn_org_2=jsPlumb.select({source:"instance_"+company_department_sec_arr[mmm].id});if(company_department_sec_arr[mmm].hasOwnProperty("children")){for(var nn1=0;nn1<conn_org_2.length;nn1++){$("#"+conn_org_2.get(nn1).targetId).hide();jsPlumb.hide(conn_org_2.get(nn1).targetId,true);//var oid=conn_org_2.get(nn1).targetId.split("_")[1];}conn_org_2.get(0).endpoints[0].setParameter("img","add");conn_org_2.get(0).endpoints[0].setImage("images/add.png");conn_org_2.setVisible(false);}}}}else{endpoint.setParameter("img","add");endpoint.setImage("images/add.png");for(var k2=0;k2<endpoint.connections.length;k2++){endpoint.connections[k2].setVisible(false);$("#"+endpoint.connections[k2].targetId).hide();jsPlumb.hide(endpoint.connections[k2].targetId,true);var oid=endpoint.connections[k2].targetId.split("_")[1];//$("div[id*=_"+oid+"_]").hide();}}if (erAgent.indexOf('MSIE') > -1) {jsPlumb.repaintEverything();}});for(var i3=0;i3<staff.length;i3++){//var staff=company_department_orgnize[i2].children; //组织下⾯的个⼈jsPlumb.draggable("instance_"+staff[i3].id); //设置组织可拖拽var s5=jsPlumb.addEndpoint("instance_"+staff[i3].id,defaults); //设置组织的节点jsPlumb.connect({source:s4_root, target:s5}); //连接连接部门到组织}}}}}}}s1.bind("click", function(endpoint) {if(endpoint.getParameter("img")&&endpoint.getParameter("img")=="add"){endpoint.setParameter("img","sub");endpoint.setImage("images/sub.png");jsPlumb.select({source:"top_server"}).setVisible(true);for(var i=0;i<company.length;i++){jsPlumb.show("instance_"+company[i].id,true);$("#instance_"+company[i].id).show();var company_department=company[i].children; //alert(company[i].id);if(company_department.length>0){jsPlumb.select({source:"instance_"+company[i].id}).setVisible(false);jsPlumb.select({source:"instance_"+company[i].id}).get(0).endpoints[0].setParameter("img","add"); jsPlumb.select({source:"instance_"+company[i].id}).get(0).endpoints[0].setImage("images/add.png"); }}}else{endpoint.setParameter("img","add");endpoint.setImage("images/add.png");jsPlumb.hide("top_server");for(var i=0;i<company.length;i++){var company_department=company[i].children;jsPlumb.hide("instance_"+company[i].id,true);for(var j=0;j<company_department.length;j++){jsPlumb.hide("instance_"+company_department[j].id,true);if(company_department[j].hasOwnProperty("children")){var orgnize=company_department[j].children;for(var j1=0;j1<orgnize.length;j1++){jsPlumb.hide("instance_"+orgnize[j1].id,true);}}}}$(".nodeWord").parent().hide();}if (erAgent.indexOf('MSIE') > -1) {jsPlumb.repaintEverything();}});$(window).resize(function(){jsPlumb.repaintEverything();});});}/** 元素摆放位置--对称分布*/function elementLocation(nodeArr,nodeNumber){if(nodeNumber%2==1){//总节点数是奇数//var num=parseInt(nodeNumber/2);for(var i=0;i<nodeArr.length;i++){if(i<parseInt(nodeNumber/2)){leftLoc=50-10*(i+1);}else if(i>parseInt(nodeNumber/2)){leftLoc=50+10*(i-parseInt(nodeNumber/2));}else{leftLoc=50;}if(nodeArr[i].hasOwnProperty("children")){var html="<div id='instance_"+nodeArr[i].id+"' class=\"instanceNode\" style='top:20%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+nodeArr[i].text+"</div></div>";$("body").append(html);var companyLoc=leftLoc; //在本例中表⽰公司横向定位，做这个是⽅便公司下⾯的部门定位；var companyDepartArr=nodeArr[i].children;var companyDepartArrLength=companyDepartArr.length;companyDepartLocation(companyLoc,companyDepartArr,companyDepartArrLength); //部门定位}else{var html="<div id='instance_"+nodeArr[i].id+"' class=\"instanceNode_leaf\" style='top:20%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+nodeArr[i].text+"</div></div>"; $("body").append(html);}}}else if(nodeNumber%2==0){//总节点数是偶数//var num=parseInt(nodeNumber/2);for(var i=0;i<nodeArr.length;i++){if(i+1<=parseInt(nodeNumber/2)){leftLoc=50-5-10*i;}else if(i+1>parseInt(nodeNumber/2)){leftLoc=50+5+10*(i-parseInt(nodeNumber/2));}if(nodeArr[i].hasOwnProperty("children")){var html="<div id='instance_"+nodeArr[i].id+"' class=\"instanceNode\" style='top:20%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+nodeArr[i].text+"</div></div>";$("body").append(html);var companyLoc = leftLoc;var companyDepartArr=nodeArr[i].children;var companyDepartArrLength=companyDepartArr.length;companyDepartLocation(companyLoc,companyDepartArr,companyDepartArrLength); //部门定位}else{var html="<div id='instance_"+nodeArr[i].id+"' class=\"instanceNode_leaf\" style='top:20%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+nodeArr[i].text+"</div></div>"; $("body").append(html);}}}}//部门定位function companyDepartLocation(nodeLoc,nodeArr,nodeNumber){if(nodeNumber%2==1){for(var j=0;j<nodeNumber;j++){var department=nodeArr[j],leftLoc;if(j<parseInt(nodeNumber/2)){leftLoc=nodeLoc-5*(j+1);}else if(j>parseInt(nodeNumber/2)){leftLoc=nodeLoc+5*j;}else{leftLoc=nodeLoc;}if(department.hasOwnProperty("children")){var html="<div id='instance_"+department.id+"' class='instanceNode' style='top:40%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+department.text+"</div></div>";$("body").append(html);var departmentOrgnize=department.children;var departmentOrgnizeLength=departmentOrgnize.length;var departmentOrgnizeLoc=leftLoc;departmentOrgnizeLocation(departmentOrgnizeLoc,departmentOrgnize,departmentOrgnizeLength); //组织定位}else{var html="<div id='instance_"+department.id+"' class='instanceNode_leaf' style='top:40%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+department.text+"</div></div>"; $("body").append(html);}}}else if(nodeNumber%2==0){for(var j=0;j<nodeNumber;j++){var department=nodeArr[j],leftLoc;if(j+1<=parseInt(nodeNumber/2)){leftLoc=nodeLoc-5-5*j;}else if(j+1>parseInt(nodeNumber/2)){leftLoc=nodeLoc+5+5*(j-parseInt(nodeNumber/2));if(department.hasOwnProperty("children")){var html="<div id='instance_"+department.id+"' class='instanceNode' style='top:40%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+department.text+"</div></div>";$("body").append(html);var departmentOrgnize=department.children;var departmentOrgnizeLength=departmentOrgnize.length;var departmentOrgnizeLoc=leftLoc;departmentOrgnizeLocation(departmentOrgnizeLoc,departmentOrgnize,departmentOrgnizeLength); //组织定位}else{var html="<div id='instance_"+department.id+"' class='instanceNode_leaf' style='top:40%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+department.text+"</div></div>"; $("body").append(html);}}}}//组织定位function departmentOrgnizeLocation(nodeLoc,nodeArr,nodeNumber){if(nodeNumber%2==1){for(var j=0;j<nodeNumber;j++){var orgnize=nodeArr[j],leftLoc;if(j<parseInt(nodeNumber/2)){leftLoc=nodeLoc-5*(j+1);}else if(j>parseInt(nodeNumber/2)){leftLoc=nodeLoc+5*(j-parseInt(nodeNumber/2));}else{leftLoc=nodeLoc;}if(orgnize.hasOwnProperty("children")){var html="<div id='instance_"+orgnize.id+"' class='instanceNode' style='top:60%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+orgnize.text+"</div></div>";$("body").append(html);var staffArr=orgnize.children;var staffLength=staffArr.length;var staffLoc=leftLoc;staffLocation(staffLoc,staffArr,staffLength); //员⼯定位}else{var html="<div id='instance_"+orgnize.id+"' class='instanceNode_leaf' style='top:60%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+orgnize.text+"</div></div>";$("body").append(html);}}}else if(nodeNumber%2==0){for(var j=0;j<nodeNumber;j++){var orgnize=nodeArr[j],leftLoc;if(j+1<=parseInt(nodeNumber/2)){leftLoc=nodeLoc-5-5*j;}else if(j+1>parseInt(nodeNumber/2)){leftLoc=nodeLoc+5+5*(j-parseInt(nodeNumber/2));}if(orgnize.hasOwnProperty("children")){var html="<div id='instance_"+orgnize.id+"' class='instanceNode' style='top:60%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+orgnize.text+"</div></div>";$("body").append(html);var staffArr=orgnize.children;var staffLength=staffArr.length;var staffLoc=leftLoc;staffLocation(staffLoc,staffArr,staffLength); //员⼯定位}else{var html="<div id='instance_"+orgnize.id+"' class='instanceNode_leaf' style='top:60%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+orgnize.text+"</div></div>";$("body").append(html);}}}}//员⼯定位function staffLocation(nodeLoc,nodeArr,nodeNumber){if(nodeNumber%2==1){for(var j=0;j<nodeNumber;j++){var staff=nodeArr[j],leftLoc;if(j<parseInt(nodeNumber/2)){leftLoc=nodeLoc-5*(j+1);}else if(j>parseInt(nodeNumber/2)){leftLoc=nodeLoc+5*(j-parseInt(nodeNumber/2));}else{leftLoc=nodeLoc;。
Jquery插件大全
Jquery插件大全1、导航类1）基于jQuery开发，非常简单的水平方向折叠控件。
2)具有XBOX360 blade界面风格的水平方向Accordion。
3)用于创建折叠菜单的jQuery插件4)基于jQuery开发的可折叠菜单。
5)模仿ext的tab选项卡TabPanel(选项卡组件)参数说明renderTo<渲染到某容器string | jQuery object | NULL>将选项卡组件渲染到某容器，参数类型可以为字符串，也可以为jQuery所加载的对象，如果为声明该参数，组件默认的承载容器为BODY。
items<选项卡元素集合array>选项卡组件渲染后就会显示的选项卡元素集合，具体参数请查看选项卡元素。
width<宽度string | number>选项卡组件的总宽度，默认400px。
height<高度string | number>选项卡组件中页面显示层的高度，默认300px。
border<是否显示边框string>嵌套显示选项卡时，会出现重复边框的情况，影响美观，将border设置为”none”，则可以避免，默认显示边框，不接受除”none”之外的参数值。
active<渲染后默认激活哪个选项卡元素number>下标以0为开始，默认为0。
maxLength<最多显示几个选项卡元素number>-1为无限，默认为-1。
tabs<获得选项卡组件所有的选项卡元素return array>可根据需要获得选项卡组件的所有选项卡元素。
公共方法addTab(添加一个选项卡元素object)动态向选项卡组件中添加一个选项卡元素。
flush(刷新选项卡元素的内容string | number)将选项卡元素的内容刷新，参数可以为选项卡元素的ID或下标。
show(显示选项卡元素string | number)显示制定选项卡元素，参数可以为选项卡元素的ID或下标。