![](/Images/OutliningIndicators/ContractedBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
var EditableBox = Class.create();
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
EditableBox.prototype =
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
initialize:function(id)
{
this.src = document.getElementById(id);
this.id = id;
this.optionDiv = this.getOptionDiv();
this.src.onclick = this.click.bind(this);
},
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
getOptionDiv:function()
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var option =
{
parameters:"s="+this.id,
method:"get",
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
onSuccess:function(transport)
{
var rp = transport.responseText;
var arr = rp.split(',');
document.getElementById(arr[arr.length-1]).value = "please select or input..";
var div = document.createElement("div");
div.id = 'optionshow';
div.style.position = 'absolute';
div.style.left = new Position.cumulativeOffset(document.getElementById(arr[arr.length-1]))[0];
div.style.top = new Position.cumulativeOffset(document.getElementById(arr[arr.length-1]))[1]+30;
div.style.width = document.getElementById(arr[arr.length-1]).style.width;
div.style.height = '10px';
div.style.display = 'none';
document.body.appendChild(div);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(var j=0;j<arr.length-1;j++)
{
var spanobj = new spans(j,arr[j],document.getElementById(arr[arr.length-1]).style.width,arr[arr.length-1]);
div.appendChild(spanobj.getspan());
}
}
};
![](/Images/OutliningIndicators/InBlock.gif)
var ajax = new Ajax.Request("ajax.aspx",option);
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
click:function()
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(document.getElementById('optionshow').style.display=='none')
{
document.getElementById('optionshow').style.display='block';
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else
{
document.getElementById('optionshow').style.display='none';
}
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
submitItem:function()
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var options_submit =
{
parameters:"sItem="+this.src.value,
method:"get",
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
onSuccess:function(transport)
{
var result_submit = transport.responseText;
alert("ok!");
}
};
var ajax_submit = new Ajax.Request("ajax.aspx",options_submit);
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
addItem:function()
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var option_add =
{
parameters:"addItem="+this.src.value+"&s="+this.id,
method:"get",
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
onSuccess:function(transport)
{
if(document.getElementById('optionshow'))Element.remove("optionshow");
var rp = transport.responseText;
var arr = rp.split(',');
document.getElementById(arr[arr.length-1]).value = "please select or input..";
var div = document.createElement("div");
div.id = 'optionshow';
div.style.position = 'absolute';
div.style.left = new Position.cumulativeOffset(document.getElementById(arr[arr.length-1]))[0];
div.style.top = new Position.cumulativeOffset(document.getElementById(arr[arr.length-1]))[1]+30;
div.style.width = document.getElementById(arr[arr.length-1]).style.width;
div.style.height = '10px';
div.style.display = 'none';
document.body.appendChild(div);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(var j=0;j<arr.length-1;j++)
{
var spanobj = new spans(j,arr[j],document.getElementById(arr[arr.length-1]).style.width,arr[arr.length-1]);
div.appendChild(spanobj.getspan());
}
}
};
![](/Images/OutliningIndicators/InBlock.gif)
var ajax = new Ajax.Request("ajax.aspx",option_add);
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
otherMethod:function()
{
}
}
var spans = Class.create();
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
spans.prototype=
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
initialize:function(id,inner,width,targetId)
{
this.span = document.createElement('span');
this.span.id = id;
this.span.innerHTML = inner;
this.span.style.backgroundColor = '#dcd0d8';
this.span.style.width =width;
this.span.style.height = '5px'
this.span.style.cursor = 'hand';
this.span.onclick = this.click.bind(this);
this.span.onmouseover = this.hightlight.bind(this);
this.targetId = targetId;
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
hightlight:function()
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(this.span.style.backgroundColor=='#dcd0d8')
{
this.span.style.backgroundColor = '#316AC5';
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else
{
this.span.style.backgroundColor = '#dcd0d8';
}
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
click:function()
{
$(this.targetId).value = this.span.innerHTML;
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
getspan:function()
{
return this.span;
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
setbgColor:function(cl)
{
this.span.style.backgroundColor = cl;
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
getbtColor:function()
{
return this.span.style.backgroundColor;
}
}