流程设计器jQuery + svg/vml(Demo1 - 构建设计器UI界面)

最新推荐文章于 2025-10-17 09:18:14 发布

转载最新推荐文章于 2025-10-17 09:18:14 发布 · 3.2k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/eleven11/p/4897412.html

文章标签：

#javascript #ui #c# #ViewUI

之前用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); //闭包结束