设计器UI界面有了，接下来结点的属性怎么显示呢，采用弹窗的话觉得不方便用户；用easyui的PRopertygrid在最右边显示，又觉得要引入easyui，使得插件变复杂了；最后决定自己写。
1、实现效果如下：
1.1、属性显示
1.2、属性隐藏
1.3、属性分组收起
2、jQuery - 左右拖动分隔条（Demo）
3、流程板板属性定义及初始化
//定义流程模板属性TemplateProperty =function() {if(typeofTemplateProperty.defaults == "undefined") {/*第一次定义对象时为GoFlow类定义静态属性*/TemplateProperty.defaults={
data: {
}
};/*第一次定义对象时定义实例共有方法*/varp =TemplateProperty.prototype;
p.createTable=function() {//给控件赋值this.bindData();//绑定事件this.bindDelegate();
};//把流程模板数据绑定到控件p.bindData =function() {varself =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;varfold = $(e.target).hasClass("Fold");
$(e.target).toggleClass("Fold", !fold);
$(e.target).toggleClass("Expanded", fold);varselector =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;varkey = $(e.target).parent().parent().attr("property");varvalue =$(e.target).val();
$templateProp.setData(key, value);
});//input绑定onkeydown事件this.$tbody.delegate("td > input.goflow-valid-int", "keydown",function(e) {returnGoFlow.validInt(e);
});
};
p.getData=function(key) {returnthis.$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