Spinner（微调器）装饰器开发： 组件介绍： 仿照 window时间日期管理中，年份调节的控件，原型是一个文本输入筐，一般用于数字输入。筐后有上下微调按钮，用于增减控件值。 这种控件在backbase框架中也有出现，JSI的spinner就是仿照其外形设计。 显示效果： 在线演示见：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.javaeye.com/article/79063

评论也很精彩，请点击查看精彩评论。欢迎您也添加评论。查看详细 >>





JavaEye推荐
杭州:外企高薪聘请系统维护工程师(10-15K)
杭州:国内大型网络公司高薪招聘系统架构师,资深JAVA开发工程师
北京：优秀公司NHNChina招聘:WEB开发,系统管理,JAVA开发, DBA
广州：急招 JAVA开发经理/系统架构师（10－15K/月）也招聘java程序员



文章来源: http://jindw.javaeye.com/blog/79064