论坛首页 → Web前端技术论坛 →

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

浏览 6090 次
锁定老帖子 主题：从零开始 Spinner（微调器）装饰器开发：
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • jindw
  • 等级: 三钻会员
  • 性别:
  • 文章: 731
  • 积分: 1481
  • 来自: 初到北京
   发表时间：2007-05-12  

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
 
  1. /** 
  2.  * @public 
  3.  * @decorator spinner 
  4.  * @attribute start 
  5.  * @attribute end  
  6.  * @attribute step 
  7.  */  
  8. function Spinner(){  
  9. }  
  10.   
  11. Spinner.prototype = new Decorator();  
  12. Spinner.prototype.decorate = function(){  
  13.   this.start = parseInt(this.attributes.get('start'))  
  14.   this.end = parseInt(this.attributes.get('end'))  
  15.   this.step = parseInt(this.attributes.get('step'))||1;  
  16.   var container = this.getContainer();  
  17.   var table = document.createElement('table');  
  18.   var outerDiv = document.createElement("div");  
  19.   var upDiv = document.createElement("div");  
  20.   var downDiv = document.createElement("div");  
  21.   table.border = 0;  
  22.   table.cellSpacing=0;  
  23.   table.cellPadding=0;  
  24.   container.insertBefore(table,container.firstChild);  
  25.   var row = table.insertRow(0);  
  26.   var cell = row.insertCell(0);   
  27.   var ele = table.nextSibling;  
  28.   do{  
  29.     container.removeChild(ele);  
  30.     cell.appendChild(ele);  
  31.   }while(ele = table.nextSibling)  
  32.   cell = row.insertCell(1);  
  33.   cell.style.verticalAlign = 'middle',  
  34.   cell.appendChild(outerDiv);  
  35.   outerDiv.style.position = 'relative'  
  36.   outerDiv.style.top = '0px'  
  37.   outerDiv.style.left = '0px'  
  38.   outerDiv.style.height = '0px'  
  39.   outerDiv.style.width = '0px'  
  40.   outerDiv.style.zIndex= 2;  
  41.   //outerDiv.style.border= "solid 1px red";  
  42.   outerDiv.appendChild(upDiv);  
  43.   initializeHandleDiv(this,upDiv);  
  44.   outerDiv.appendChild(downDiv);  
  45.   initializeHandleDiv(this,downDiv);  
  46.   //alert(this.start+'/'+this.end+'/'+this.step+':'+(this.start<0))  
  47. }  
  48. Spinner.prototype.jump = function(offset){  
  49.   if(offset){  
  50.     var input = this.getContainer().getElementsByTagName('input')[0];  
  51.     var value = value = input.value * 1 + offset*this.step;  
  52.     if(value>this.end){  
  53.       value=this.end;  
  54.     }else if(value<this.start){  
  55.       value = this.start;  
  56.     }  
  57.     input.value = value;  
  58.   }  
  59. }  
  60. /** 
  61.  * @internal 
  62.  */  
  63. var imagePath = 'url("'+this.scriptBase + 'spinner.gif")';  
  64. /** 
  65.  * @internal 
  66.  */  
  67. function initializeHandleDiv(spinner,handleDiv){  
  68.   var position = 0;  
  69.   var style = handleDiv.style;  
  70.   style.backgroundImage=imagePath;  
  71.   style.position='absolute';  
  72.   style.width='12px';  
  73.   style.height='8px';  
  74.   style.margin='1px';  
  75.   style.left = '-14px'  
  76.   style.overflow = 'hidden'  
  77.   if(handleDiv.previousSibling){  
  78.     style.backgroundPosition = '0 -32px';  
  79.     position = -32;  
  80.     style.top = '0px'  
  81.   }else{  
  82.     style.top = '-10px'  
  83.   }  
  84.   handleDiv.onmouseout = buildMouseHandle(spinner,position,0)  
  85.   position -= 8;  
  86.   handleDiv.onmouseup=handleDiv.onmouseover = buildMouseHandle(spinner,position,0)  
  87.   position -= 8;  
  88.   handleDiv.onmousedown = buildMouseHandle(spinner,position,0)  
  89.   handleDiv.onclick = buildMouseHandle(spinner,position,position<-32?-1:1)  
  90. }  
  91. /** 
  92.  * @internal 
  93.  */  
  94. function buildMouseHandle(spinner,imagePosition,offset){  
  95.   imagePosition = '0 '+imagePosition+'px';  
  96.   return function(){  
  97.     this.style.backgroundPosition = imagePosition;  
  98.     spinner.jump(offset);  
  99.   }  
  100. }  




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

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

  • 大小: 52.3 KB
返回顶楼
         
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics