web设计器--设计流程图（raphael）（二）

这里介绍一下如何新增删除按钮：

如上图：右侧属性表格中有个“”删除“”按钮，可以进行删除节点。

解决方法：

1.打开myflow.js文件，该文件被压缩了，你需要格式化一下js，可以通过网上“格式化js”进行格式一下，这样看着就明显多了。

2.找到如下图的位置，搜索生成“属性”表格代码：e.append("<tr><th>" + m[l].label + '</th><td><div id="p' + l + '" class="editor"></div></td></tr>');

在for循环外边增加一个tr标签里边新增删除按钮，代码如下：

e.append('<tr id="myflowDelTR"><th>删除</th><td><input type="button" value="删除" οnclick="if(confirm(\'确认删除？！\'))jQuery(document).trigger(\'keydown\',true);"/></td></tr>');

3.搜索“i.keyCode == 46”找到这个函数，这个是使用键盘删除节点的，我需要加一个点击按钮删除时间也调用这个方法即可，在后面加|byButton。

代码如下：

 b(document).keydown(function (i,byButton) {if (!a.config.editable) {return}if (i.keyCode == 46||byButton) {//var j = b(y).data("currNode");if (j) {if (j.getId().substring(0, 4) == "rect") {b(y).trigger("removerect", j)} else {if (j.getId().substring(0, 4) == "path") {b(y).trigger("removepath", j)}}b(y).removeData("currNode")}}});

这样就可以增加删除按钮功能了。

Demo下载地址：http://download.csdn.net/detail/lilinoscar/9604226

web设计器--设计流程图（raphael）（二）相关推荐

web设计器--设计流程图（raphael）（一）
案例是采用raphael的js文件进行画图,适用web设计,可以下载案例,里边是一些html的案例,下载后自己研究一下数据格式引入到自己的项目里. Demo下载地址:http://download.c ...
新一代纯前端控件集 WijmoJS 2018V2发布，提供 Web 设计器，可动态设计页面并生成代码...
概述作为一款纯前端控件集,WijmoJS 秉承"快如闪电,触控优先"的设计理念,在提供优质服务和产品的同时,专注于企业应用开发,不断优化产品架构,与时俱进.除在全球率先支持 An ...
8.图片组件和动画效果--从零起步实现基于Html5的WEB设计器Jquery插件（含源码）...
前面示例我建立了三种形状的组件,圆.矩形.椭圆,本节我将再扩展两种类型:图片和动画,并通过这个过程来论证前面OOP的编程是如何简化扩展工作的: 首先要在工具条里增加这两个组件,以便可以拖动: < ...
基于Vue实现的Activiti工作流Web设计器
真正的大师,永远都怀着一颗学徒的心! 一.项目简介基于Vue实现的Activiti工作流Web设计器二.实现功能支持生成xml文件支持生成子流程支持连线组件有:起点.终点.判断.条件.任务 ...
1. 概述--从零起步实现基于Html5的WEB设计器Jquery插件
当一个软件为了达到一定的业务扩展性时(产品上线后限定范围内的用户需求无需变更代码,通过简单的配置可满足用户的要求),必然要求软件是可配置的. 笔者过去开发过很多配置型的管理软件,从可配置的表单设计(F ...
使用开源的驰骋表单设计器设计表单案例演示
我们以客户提供如下原始的word表单样本,使用驰骋表单设计器制作表单的过程介绍如下: 工业设计和创意需求登记表原始表单图在ccform表单设计器中,设计如下: 驰骋表单设计器,设计表单所见既所得,操 ...
驰骋表单设计器设计表单案例演示
为什么80%的码农都做不了架构师?>>> 我们以客户提供如下原始的word表单样本,使用驰骋表单设计器制作表单的过程介绍如下:工业设计和创意需求登记表原始表单图在ccform ...
7.组件连线(贝塞尔曲线)--从零起步实现基于Html5的WEB设计器Jquery插件（含源码）...
上节讲到如何创建组件,清除设计器视图,以及设计视图的持久化和恢复,本节将重点讲如何实现组件间的连线,前面章节有提到为了方便从持久化文件中恢复,组件和连线是分别存放的:nodes和lines对象,两个组 ...
使用web设计器制作图表报表
课程二十六:如何制作图表报表说明:在报表中,使用图表展示数据会更清晰明了.本课程以"销量"表为例,讲解如何用盈帆报表做图表. 第一步:认识图表点击菜单栏"插入&quo ...

web设计器--设计流程图（raphael）（二）

web设计器--设计流程图（raphael）（二）相关推荐

最新文章

热门文章