你的位置:首页 > Java教程

[Java教程]一步一步jQuery流程设计器插件goflow(附代码)


之前用Silverlight实现过一个流程设计器(Demo),使用起来不是很方便。打算参考GooFlow,结合自己对工作流的理解,用jQuery改造实现一个,力求简单实用。

第一步是要构建设计器的UI界面,如下:

 

用到的图标有:

用CSS精灵工具如CSS Satyr可以把它们合在一起

 C#的String.format用习惯,觉得js里拼字符串不好使,先模拟实现一个:

function formatString() {  var formatStr = arguments[0];  if (typeof formatStr === 'string') {    var pattern;    for (var i = 1; i < arguments.length; i++) {      pattern = new RegExp('\\{' + (i - 1) + '\\}', 'g');      formatStr = formatStr.replace(pattern, arguments[i]);    }  } else {    formatStr = '';  }  return formatStr;};

采用的jQuery插件写法:

(function ($, undefined) {  //定义GoFlow类  GoFlow = function () {      };  //初始化GoFlow对象(gfDiv:jQuery对象;opts:参数)  GoFlow.prototype.init = function (gfDiv, opts) {      };  //插件的定义    $.fn.goflow = function (opts) {      };})(jQuery); //闭包结束 

 代码:GoFlow_01.zip