流程設計器jQuery + svg/vml(Demo2 - UI界面增加屬性顯示)

設計器UI界面有了，接下來結點的屬性怎么顯示呢，采用彈窗的話覺得不方便用戶；用easyui的propertygrid在最右邊顯示，又覺得要引入easyui，使得插件變復雜了；最后決定自己寫。

1、實現效果如下：

 1.1、屬性顯示

1.2、屬性隱藏

1.3、屬性分組收起

2、jQuery - 左右拖動分隔條（Demo）

3、流程板板屬性定義及初始化

//定義流程模板屬性
TemplateProperty = function () {
    if (typeof TemplateProperty.defaults == "undefined") {
        /*第一次定義對象時為GoFlow類定義靜態屬性*/
        TemplateProperty.defaults = {
            data: {
                
            }
        };
        /*第一次定義對象時定義實例共有方法*/
        var p = TemplateProperty.prototype;
        p.createTable = function () {
            

            //給控件賦值
            this.bindData();
            //綁定事件
            this.bindDelegate();
        };
        //把流程模板數據綁定到控件
        p.bindData = function () {
            var self = this;
            $.each(self.$opts.data, function (k, v) {
                self.setValue(k, v);
            });
        };
        //綁定事件
        p.bindDelegate = function () {
            //展開/收縮屬性組
            this.$tbody.delegate("td[group].Fold,td[group].Expanded", "click", { self: this }, function (e) {
                var $templateProp = e.data.self;
                var fold = $(e.target).hasClass("Fold");
                $(e.target).toggleClass("Fold", !fold);
                $(e.target).toggleClass("Expanded", fold);
                var selector = GoFlow.formatString(
                    "[group='{0}'][property]",
                    $(e.target).attr("group"));
                $templateProp.$tbody.children(selector).toggle();
            });
            //input綁定onchange事件 
            this.$tbody.delegate("td > input", "change", { self: this }, function (e) {
                var $templateProp = e.data.self;
                var key = $(e.target).parent().parent().attr("property");
                var value = $(e.target).val();
                $templateProp.setData(key, value);
            });
            //input綁定onkeydown事件 
            this.$tbody.delegate("td > input.goflow-valid-int", "keydown", function (e) {
                return GoFlow.validInt(e);
            });
        };
        p.getData = function (key) { return this.$opts.data[key]; };
        p.setData = function (key, value) { this.$opts.data[key] = value; };
        p.getValue = function (key) {
            switch (key) {
                
            };
        };
        p.setValue = function (key, value) {
            switch (key) {
                
            };
        };
    }
};
//初始化TemplateProperty對象
TemplateProperty.prototype.init = function (pdiv, opts) {
    this.$propertyDiv = pdiv;
    this.$opts = opts;
    this.createTable();
};

4、加入流程模板屬性后goflow插件最新結構如下

(function ($, undefined) {
    //定義流程模板屬性
    TemplateProperty = function () {
        
    };
    //初始化TemplateProperty對象
    TemplateProperty.prototype.init = function (pdiv, opts) {
        
    };

    //定義GoFlow類
    GoFlow = function () {
        
    };
    //初始化GoFlow對象（gfDiv:jQuery對象；opts:參數）
    GoFlow.prototype.init = function (gfDiv, opts) {
        
    };

    //插件的定義    
    $.fn.goflow = function (opts) {
        
    };
})(jQuery); //閉包結束  

5、代碼：GoFlow_02.zip

演示地址：Demo

微信演示公眾號：

另：Silverlight版

      Silverlight版Demo