AJax技术

UI系列之: 基于JQUERY的WEB在线流程图设计器GOOFLOW 0.8版(4)

字号+ 作者:H5之家 来源:H5之家 2016-04-28 17:00 我要评论( )

这些是在使用扁平化页面风格的情况下(GooFlow2.css),可配置的主要部分的颜色,分别为:绘图器HEAD/图标的颜色、结点背景色、连线/结点选中时边框颜色、连线被选中/元素都标注时颜色、复合结点自定义背景颜色、字

这些是在使用扁平化页面风格的情况下(GooFlow2.css),可配置的主要部分的颜色,分别为:绘图器HEAD/图标的颜色、结点背景色、连线/结点选中时边框颜色、连线被选中/元素都标注时颜色、复合结点自定义背景颜色、字体颜色。

如果这些都不定义,则自动使用默认颜色。

详情例子请看GooFlow_color.js文件。

 

重要提示:以上的数据属性单元均为JSON,因此扩展性极强,用户可根据实际需要,对每个单元加入大量的自有数据,然后通过对工作区中各元素的单元操作事件响应来处理这些自有数据。

 

[七、自定义事件]

1、以下是当工具栏按钮被点击时触发的事件自定义(虚函数),格式为function(),因为可直接用THIS操作对象本身,不用传参;用户可自行重定义:

可以自定义实现的事件名称 作用 参数 返回值

this.onBtnNewClick 新建流程图按钮事件定义 无 无

this.onBtnOpenClick 打开流程图按钮事件定义 无 无

this.onBtnSaveClick 保存流程图按钮事件定义 无 无

this.onFreshClick 刷新重载流程图按钮事件定义 无 无

 

2、下面绑定当结点/线/分组块的一些操作事件,这些事件可直接通过this访问对象本身;并且这些事件触发的方法如果返回FALSE,则都可以阻止操作发生:

可以自定义实现的事件 作用 参数 返回值

this.onItemAdd //当操作某个单元(结点/线/分组块)被添加时,触发的方法 (id,type,json):id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值,json即addNode,addLine或addArea方法的第二个传参json. True

False

this.onItemDel //当操作某个单元(结点/线/分组块)被删除时,触发的方法 (id,type):id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值 True

False

this.onItemMove //当操作某个单元(结点/分组块)被移动时,触发的方法 (id,type,left,top):id是单元的唯一标识ID,type是单元的种类,有"node","area"两种取值,线line不支持移动;left是新的左边距坐标,top是新的顶边距坐标 True

False

this.onItemRename //当操作某个单元(结点/线/分组块)被重命名时,触发的方法 (id,name,type):id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值,name是新的名称 True

False

this.onItemFocus //当操作某个单元(结点/线)被由不选中变成选中时,触发的方法 (id,type):id是单元的唯一标识ID,type是单元的种类,有"node","line"两种取值,"area"不支持被选中 True

False

this.onItemBlur //当操作某个单元(结点/线)被由选中变成不选中时,触发的方法 //格式function(id,type):id是单元的唯一标识ID,type是单元的种类,有"node","line"两种取值,"area"不支持取消选中 True

False

this.onItemResize //当操作某个单元(结点/分组块)被重定义大小或造型时,触发的方法 (id,type,width,height):id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值;width是新的宽度,height是新的高度 True

False

this.onLineMove //当移动某条折线中段的位置,触发的方法 (id,M):id是单元的唯一标识ID,M是中段的新X轴(左右移动时)或Y轴(折线是上下移动时)的坐标 True

False

this.onLineSetType //当变换某条连接线的新类型,触发的方法 (id,type):id是单元的唯一标识ID;type是连接线的类型:"sl"-直线;"lr"-中段可左右移动的折线,"tb"-中段可上下移动的折线 True

False

this.onItemMark //当用重色标注某个结点/转换线时触发的方法 (id,type,mark):id是单元的唯一标识ID,type是单元类型("node"结点,"line"转换线),mark为布尔值,表示是要标注TRUE还是取消标注FALSE True

False

this.onLinePointMove //当变换某条连接线的端点变更连接的结点时,触发的方法 //格式function(id,newStart,newEnd):id是连线单元的唯一标识ID,newStart,newEnd分别是起始结点的ID和到达结点的ID True

False

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jquery ajax例子返回值详解

    jquery ajax例子返回值详解

    2016-04-13 15:00

  • jQuery之ajax请求之POST

    jQuery之ajax请求之POST

    2016-04-09 10:02

  • jquery ajax 入门:AJAX入门学习总结

    jquery ajax 入门:AJAX入门学习总结

    2016-04-07 15:02

  • ajax,jquery学习资源

    ajax,jquery学习资源

    2016-04-06 14:02

网友点评