流程設計器jQuery + svg/vml(Demo1 - 構建設計器UI界面)

以前用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

演示地址：Demo

微信演示公衆號：

另：Silverlight版

      Silverlight版Demo