设计器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
微信演示公众号：
