码迷,mamicode.com
首页 > Web开发 > 详细

一步一步jQuery流程设计器插件goflow(附代码) - 1 - 构建设计器UI界面

时间:2015-10-22 17:00:00      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:

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

一步一步jQuery流程设计器插件goflow(附代码) - 1 - 构建设计器UI界面

标签:

原文地址:http://www.cnblogs.com/eleven11/p/4897412.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!