Step by step jquery process designer plug-in Goflow (with code)-1-Build Designer UI interface

Before using Silverlight to implement a process designer (Demo), it is not very convenient to use. intends to refer to Gooflow, combined with their own understanding of the workflow, with the implementation of jquery to achieve one, and strive to be simple and practical.

The first step is to build the UI interface for the designer, as follows:

The icons used are:

CSS wizards such as CSS Satyr can be used to fit together.

C # String.Format used to think that JS in the spelling of the string does not work, the first simulation to achieve a:

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;};

Use the jquery plugin notation:

(function  ($, undefined) {    // define Goflow class    function  () {            } ;     // Initialize the Goflow object (Gfdiv:jquery object; opts: parameters)    function (Gfdiv, opts) {            };     // Definition of plug     -in    function (opts) {            // closure End  

Code: Goflow_01.zip

Step by step jquery process designer plug-in Goflow (with code)-1-Build Designer UI interface