之前用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); //闭包结束 演示地址：Demo
微信演示公众号：