位置: 编程技术 - 正文

详解js中构造流程图的核心技术JsPlumb(js构造器constructor)

编辑:rootadmin

推荐整理分享详解js中构造流程图的核心技术JsPlumb(js构造器constructor),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:详解js中构造流程是什么,js构造函数定义方法,详解js中构造流程是什么,js 构造,js构造器是什么,详解js中构造流程是什么,js构造方法,详解js中构造流程是什么,内容如对您有帮助,希望把文章链接给更多的朋友!

项目里面用到了Web里面的拖拽流程图的技术JsPlumb,其实真不算难,不过项目里面用HTML做的一些类似flash的效果,感觉还不错,在此分享下。

一、效果图展示

1、从左边拖动元素到中间区域,然后连线

2、连线类型可以自定义:这里定义为直线、折线、曲线。实际项目中根据业务我们定义为分装线、分装支线、总装线等

3、鼠标拖动区域选中元素,并且选中元素统一拖动位置。

4、对选中的元素左对齐。

5、对选中元素居中对齐

6、右对齐

7、上对齐

8、垂直居中对齐

9、下对齐

、根据第一个选中的元素上下靠拢

详解js中构造流程图的核心技术JsPlumb(js构造器constructor)

、根据第一个选中的元素左右靠拢

、根据第一个选中的元素同高

、根据第一个选中的元素同宽

、选中元素顺时针旋转,点击一次旋转度

、选中元素逆时针旋转。

、选中统一删除元素以及元素上面的连线

这里很多效果其实在项目中作用并不太大,很多单纯就是为了展示用的。

二、代码详解这里涉及的效果比较多,可能要分多篇来介绍。这篇还是来看看构造流程图的核心技术:JsPlumb。

1、概述关于JsPlumb的内容,在此就简单说明下吧。jsPlumb是一个强大的JavaScript连线库,它可以将html中的元素用箭头、曲线、直线等连接起来,适用于开发Web上的图表、建模工具等。它同时支持jQuery+jQuery UI、MooTools和YUI3这三个JavaScript框架,十分强大。本项目中还是结合大家最熟悉的JQuery来讲解。并且还要注意的一点就是JsPlumb的浏览器兼容性,JsPlumb支持IE 6以上、火狐、谷歌等各种浏览器

2、使用(1)引入JS文件可以直接去官网上面下载最新的js库,由于JsPlumb需要JQuery的支持,按照网上的说法,它只兼容jQuery1.3.x及以上版本,并在jQuery UI 1.7.x、1.8.x及1.9.x上测试通过。所以我们需要下载较高一点版本的JQuery和JQuery UI。关于JsPlumb的内容只需要引用一个Js即可。类似

(2)初始化使用JsPlumb需要注意一点,JsPlumb的连线的样式是由点确定的,也就是说点的样式里面包含了相关的属性来说明当使用此点来连线的时候,连线的样式应该是什么样的。在我们项目里面,左边的模型区域,中间才是设计区域。那么要将一个元素从模型区域创建出来,就要用到我们JQuery UI里面的draggable和droppable事件。首先我们注册左边模型的draggable和中间区域的droppable事件。

cshtml页面代码,<div id="divContentLeftMenu">这个是左边模型的容器,<div id="divCenter"></div>表示中间区域容器。      

Js代码:首先我们定义几个点的样式的全局变量

然后再页面初始化完成之后注册事件

重点来看看这一句:

jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle);调用了JsPlumb里面的addEndpoint方法,第一个参数表示页面标签的id,第一个表示连线点的位置(RightMiddle、LeftMiddle、TopCenter、BottomCenter四个选项);第三参数表示点的样式以及连线的样式。没调用依次addEndpoint方法,元素上面就会多一个连线的节点。关于hollowCircle里面各个参数的意义,可以查看api。

还有一句多个地方都看到了:

jsPlumb.repaintEverything();看字面意思大概能知道这句是干什么的,修复所有。当在中间区域拖动元素的时候,如果不带这一句,节点不会跟着元素一起移动。加上之后节点才会跟随标签移动。至此,最基础的JsPlumb连线就完成了。

标签: js构造器constructor

本文链接地址:https://www.jiuchutong.com/biancheng/387120.html 转载请保留说明!

上一篇:JS组件Bootstrap Table表格多行拖拽效果实现代码(bootstrap js插件)

下一篇:详解js中构造流程图的核心技术JsPlumb(2)(js中构造函数怎么写)

  • 按适用税率计税销售额和按简易办法计税销售额
  • 法人个人账户收款是否属于公司业务
  • 无票收入需要缴纳所得税吗
  • 固定资产清理净损失计入什么科目
  • 员工工资占公司收入比例怎么算
  • 甲供材能否开具增值税专用发票
  • 合伙企业取得分红如何缴纳个人所得税
  • 企业转让无形资产使用权取得的收入应计入营业外收入
  • 资本公积什么时候做账
  • 物业补贴计入什么科目
  • 企业所得税季报时间
  • 应收账款减少计提坏账吗
  • 营改增后建筑企业的账务处理
  • 已抵扣进项怎么转出
  • 租赁的房子
  • 支付给其他公司费用怎么入账
  • 销售产品收取的价款
  • 已经交税的收入退款会计分录
  • 去年多计提费用,汇算清缴时做纳税调增处理
  • 公允价值变动损益是什么意思
  • 税控服务费抵扣的文件
  • 减免所得税额和抵免所得税额的区别
  • 小微企业免税销售额怎么算
  • 财税()
  • 优先股份转让权
  • 母公司开票给子公司有什么税务风险吗
  • 个独企业生产经营所得税率
  • 商业健康保险税优码
  • 冲暂估成本会计分录怎么做
  • 收取违约金如何入账
  • php数组可以使用哪些键名
  • 支付宝花呗服务费收费标准
  • 绿萝 用什么土
  • 用约当产量法怎么计算约当总产量
  • 销售退回会计处理与税务处理
  • php __destruct
  • 堡垒山是哪个国家
  • 弃置费用预计负债递延所得税怎么处理
  • 基于php的系统
  • postman操作流程
  • vue2和vue3的兼容
  • html如何导入excel
  • php如何做app
  • 现金溢余和短缺的会计分录
  • 增值税附加申报表怎样填小规模
  • 收益性支出包括哪些内容
  • 装修行业小规模最高能开几个点的票
  • 增值税销项税额抵减账务处理
  • 小规模定额征收和查账征收哪个更好一些
  • 房产评估增值是什么意思
  • 有限合伙企业需要缴纳企业所得税吗
  • 出租周转材料的租金会计科目
  • 公司股东投资是什么意思
  • 应付职工薪酬账户贷方登记的是
  • 员工外出培训报告范文
  • 法定盈余公积一般按照企业
  • 未摊销的费用怎样处理
  • 公司缴纳印花税如何缴纳
  • 消防安装公司属于什么行业
  • 企业成立前期的重点工作
  • mysql的基本介绍
  • mysql分页实现
  • 在windows中打开一个窗口后
  • xp系统屏幕倒过来了怎么恢复
  • linux ls常用命令
  • linux文本模式无法打字
  • js 仿真
  • 置顶聊天折叠怎么开启
  • AddForceAtPosition方法:增加刚体点作用力
  • unity克隆物体
  • 初识年岁尚温柔 小说 免费
  • 关于Colloder事件
  • jquery的设计模式
  • jquerycdn
  • jquery按钮点击事件
  • 税务协查函回复的内容有哪些
  • 重庆经开区属于哪个大区
  • 上善若水 宁静致远,适合小学标语吗?
  • 法制员职责任务
  • 武汉税务地区编号
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设