[导入]从零开始 Spinner（微调器）装饰器开发：

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;

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

[导入]从零开始 Spinner（微调器）装饰器开发：

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

组件介绍：

显示效果：

代码：

你可能感兴趣的:([导入]从零开始 Spinner（微调器）装饰器开发：)