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