从零开始 Spinner（微调器）装饰器开发：

Spinner（微调器）装饰器开发：

<o:p></o:p>组件介绍：

仿照 window时间日期管理中，年份调节的控件，原型是一个文本输入筐，一般用于数字输入。筐后有上下微调按钮，用于增减控件值。
<o:p></o:p>这种控件在backbase框架中也有出现，JSI的spinner就是仿照其外形设计。

显示效果：<o:p></o:p>

在线演示见：http://www.xidea.org/project/jsi/decorator/spinner.html

代码：

org/xidea/decorator/spinner.js

/**
 * @public
 * @decorator spinner
 * @attribute start
 * @attribute end
 * @attribute step
 */
function Spinner(){
}

Spinner.prototype = new Decorator();
Spinner.prototype.decorate = function(){
  this.start = parseInt(this.attributes.get('start'))
  this.end = parseInt(this.attributes.get('end'))
  this.step = parseInt(this.attributes.get('step'))||1;
  var container = this.getContainer();
  var table = document.createElement('table');
  var outerDiv = document.createElement("div");
  var upDiv = document.createElement("div");
  var downDiv = document.createElement("div");
  table.border = 0;
  table.cellSpacing=0;
  table.cellPadding=0;
  container.insertBefore(table,container.firstChild);
  var row = table.insertRow(0);
  var cell = row.insertCell(0);
  var ele = table.nextSibling;
  do{
    container.removeChild(ele);
    cell.appendChild(ele);
  }while(ele = table.nextSibling)
  cell = row.insertCell(1);
  cell.style.verticalAlign = 'middle',
  cell.appendChild(outerDiv);
  outerDiv.style.position = 'relative'
  outerDiv.style.top = '0px'
  outerDiv.style.left = '0px'
  outerDiv.style.height = '0px'
  outerDiv.style.width = '0px'
  outerDiv.style.zIndex= 2;
  //outerDiv.style.border= "solid 1px red";
  outerDiv.appendChild(upDiv);
  initializeHandleDiv(this,upDiv);
  outerDiv.appendChild(downDiv);
  initializeHandleDiv(this,downDiv);
  //alert(this.start+'/'+this.end+'/'+this.step+':'+(this.start<0))
}
Spinner.prototype.jump = function(offset){
  if(offset){
    var input = this.getContainer().getElementsByTagName('input')[0];
    var value = value = input.value * 1 + offset*this.step;
    if(value>this.end){
      value=this.end;
    }else if(value<this.start){
      value = this.start;
    }
    input.value = value;
  }
}
/**
 * @internal
 */
var imagePath = 'url("'+this.scriptBase + 'spinner.gif")';
/**
 * @internal
 */
function initializeHandleDiv(spinner,handleDiv){
  var position = 0;
  var style = handleDiv.style;
  style.backgroundImage=imagePath;
  style.position='absolute';
  style.width='12px';
  style.height='8px';
  style.margin='1px';
  style.left = '-14px'
  style.overflow = 'hidden'
  if(handleDiv.previousSibling){
    style.backgroundPosition = '0 -32px';
    position = -32;
    style.top = '0px'
  }else{
    style.top = '-10px'
  }
  handleDiv.onmouseout = buildMouseHandle(spinner,position,0)
  position -= 8;
  handleDiv.onmouseup=handleDiv.onmouseover = buildMouseHandle(spinner,position,0)
  position -= 8;
  handleDiv.onmousedown = buildMouseHandle(spinner,position,0)
  handleDiv.onclick = buildMouseHandle(spinner,position,position<-32?-1:1)
}
/**
 * @internal
 */
function buildMouseHandle(spinner,imagePosition,offset){
  imagePosition = '0 '+imagePosition+'px';
  return function(){
    this.style.backgroundPosition = imagePosition;
    spinner.jump(offset);
  }
}

使用方法见在 基于FCKEditor 开发JSI Editor装饰器已有详细介绍，不再叙述。

见：http://www.iteye.com/article/79063