/*

*JavaScriptVirtualKeyboard(ATM-stylenumpadvariant),version2.3

*

*Copyright(C)2006-2007DmitriyKhudorozhkov

*

*Thissoftwareisprovided"as-is",withoutanyexpressorimpliedwarranty.

*Innoeventwilltheauthorbeheldliableforanydamagesarisingfromthe

*useofthissoftware.

*

*Permissionisgrantedtoanyonetousethissoftwareforanypurpose,

*includingcommercialapplications,andtoalteritandredistributeit

*freely,subjecttothefollowingrestrictions:

*

*1.Theoriginofthissoftwaremustnotbemisrepresented;youmustnot

*claimthatyouwrotetheoriginalsoftware.Ifyouusethissoftware

*inaproduct,anacknowledgmentintheproductdocumentationwouldbe

*appreciatedbutisnotrequired.

*

*2.Alteredsourceversionsmustbeplainlymarkedassuch,andmustnotbe

*misrepresentedasbeingtheoriginalsoftware.

*

*3.Thisnoticemaynotberemovedoralteredfromanysourcedistribution.

*

*-DmitriyKhudorozhkov,kh_dmitry2001@mail.ru

*/

functionVATMpad(container_id,callback_ref,font_name,font_size,

font_color,bg_color,key_color,border_color,

show_click,click_font_color,click_bg_color,

click_border_color,do_embed)

{

returnthis._construct(container_id,callback_ref,font_name,font_size,

font_color,bg_color,key_color,border_color,

show_click,click_font_color,click_bg_color,

click_border_color,do_embed);

}

VATMpad.prototype={

kbArray:[],

_setup_event:function(elem,eventType,handler)

{

return(elem.attachEvent?elem.attachEvent("on"+eventType,handler):((elem.addEventListener)?elem.addEventListener(eventType,handler,false):null));

},

_start_flash:function(in_el)

{

functiongetColor(str,posOne,posTwo)

{

if(/rgb((d+),s(d+),s(d+))/.exec(str))//trytodetectMozilla-stylergbvalue.

{

switch(posOne)

{

case1:returnparseInt(RegExp.$1,10);

case2:returnparseInt(RegExp.$2,10);

case3:returnparseInt(RegExp.$3,10);

default:return0;

}

}

else//standard(#xxxxxxor#xxx)way

returnstr.length==4?parseInt(str.substr(posOne,1)+str.substr(posOne,1),16):parseInt(str.substr(posTwo,2),16);

}

functiongetR(color_string)

{returngetColor(color_string,1,1);}

functiongetG(color_string)

{returngetColor(color_string,2,3);}

functiongetB(color_string)

{returngetColor(color_string,3,5);}

varel=in_el.time?in_el:(in_el.company&&in_el.company.time?in_el.company:null);

if(el)

{

el.time=0;

clearInterval(el.timer);

}

varvkb=this;

varftc=vkb.fontcolor,bgc=vkb.keycolor,brc=vkb.bordercolor;

//Specialfixesforsimple/dead/modifierkeys:

if(in_el.dead)

ftc=vkb.deadcolor;

if(((in_el.innerHTML=="Shift")&&vkb.Shift)||((in_el.innerHTML=="Caps")&&vkb.Caps)||((in_el.innerHTML=="AltGr")&&vkb.AltGr))

bgc=vkb.lic;

//Extractbasecolorvalues:

varfr=getR(ftc),fg=getG(ftc),fb=getB(ftc);

varkr=getR(bgc),kg=getG(bgc),kb=getB(bgc);

varbr=getR(brc),bg=getG(brc),bb=getB(brc);

//Extractflashcolorvalues:

varf_r=getR(vkb.cfc),f_g=getG(vkb.cfc),f_b=getB(vkb.cfc);

vark_r=getR(vkb.cbg),k_g=getG(vkb.cbg),k_b=getB(vkb.cbg);

varb_r=getR(vkb.cbr),b_g=getG(vkb.cbr),b_b=getB(vkb.cbr);

var_shift_colors=function()

{

functiondec2hex(dec)

{

varhexChars="0123456789ABCDEF";

vara=dec%16;

varb=(dec-a)/16;

returnhexChars.charAt(b)+hexChars.charAt(a)+"";

}

in_el.time=!in_el.time?10:(in_el.time-1);

functioncalc_color(start,end)

{return(end-(in_el.time/10)*(end-start));}

vart_f_r=calc_color(f_r,fr),t_f_g=calc_color(f_g,fg),t_f_b=calc_color(f_b,fb);

vart_k_r=calc_color(k_r,kr),t_k_g=calc_color(k_g,kg),t_k_b=calc_color(k_b,kb);

vart_b_r=calc_color(b_r,br),t_b_g=calc_color(b_g,bg),t_b_b=calc_color(b_b,bb);

in_el.style.color="#"+dec2hex(t_f_r)+dec2hex(t_f_g)+dec2hex(t_f_b);

in_el.style.borderColor="#"+dec2hex(t_b_r)+dec2hex(t_b_g)+dec2hex(t_b_b);

in_el.style.backgroundColor="#"+dec2hex(t_k_r)+dec2hex(t_k_g)+dec2hex(t_k_b);

if(!in_el.time)

{

clearInterval(in_el.timer);

return;

}

};

_shift_colors();

in_el.timer=window.setInterval(_shift_colors,50);

},

_setup_style:function(obj,top,left,width,height,position,border_color,bg_color,line_height,font_size,font_weight,padding_left,padding_right)

{

varos=obj.style;

if(top)os.top=top;

if(left)os.left=left;

if(width)os.width=width;

if(height)os.height=height;

if(position)os.position=position;

if(border_color)os.border="1pxsolid"+border_color;

if(bg_color)os.backgroundColor=bg_color;

os.textAlign="center";

if(line_height)os.lineHeight=line_height;

if(font_size)os.fontSize=font_size;

os.fontWeight=font_weight||"bold";

if(padding_left)os.paddingLeft=padding_left;

if(padding_right)os.paddingRight=padding_right;

},

_setup_key:function(parent,id,top,left,width,height,border_color,bg_color,line_height,font_size,font_weight,padding_left,padding_right)

{

var_id=this.Cntr.id+id;

varexists=document.getElementById(_id);

varkey=exists?exists.parentNode:document.createElement("DIV");

this._setup_style(key,top,left,width,height,"absolute");

varkey_sub=exists||document.createElement("DIV");

key.appendChild(key_sub);parent.appendChild(key);

this._setup_style(key_sub,"","","",line_height,"relative",border_color,bg_color,line_height,font_size,font_weight,padding_left,padding_right);

key_sub.id=_id;

if(!exists)this._setup_event(key_sub,'mousedown',this._generic_callback_proc);

returnkey_sub;

},

_findX:function(obj)

{return(obj&&obj.parentNode)?parseFloat(obj.parentNode.offsetLeft):0;},

_findY:function(obj)

{return(obj&&obj.parentNode)?parseFloat(obj.parentNode.offsetTop):0;},

_findW:function(obj)

{return(obj&&obj.parentNode)?parseFloat(obj.parentNode.offsetWidth):0;},

_findH:function(obj)

{return(obj&&obj.parentNode)?parseFloat(obj.parentNode.offsetHeight):0;},

_construct:function(container_id,callback_ref,font_name,font_size,font_color,bg_color,key_color,

border_color,show_click,click_font_color,click_bg_color,click_border_color,do_embed)

{

varexists=(this.Cntr!=undefined),ct=exists?this.Cntr:document.getElementById(container_id);

varchanged=(font_size&&(font_size!=this.fontsize));

this._Callback=((typeof(callback_ref)=="function")&&((callback_ref.length==1)||(callback_ref.length==2)))?callback_ref:(this._Callback||null);

varff=font_name||this.fontname||"";

varfs=font_size||this.fontsize||"14px";

varfc=font_color||this.fontcolor||"#000";

varbg=bg_color||this.bgcolor||"#FFF";

varkc=key_color||this.keycolor||"#FFF";

varbc=border_color||this.bordercolor||"#777";

this.cfc=click_font_color||this.cfc||"#CC3300";

this.cbg=click_bg_color||this.cbg||"#FF9966";

this.cbr=click_border_color||this.cbr||"#CC3300";

this.sc=(show_click==undefined)?((this.sc==undefined)?false:this.sc):show_click;

this.fontname=ff,this.fontsize=fs,this.fontcolor=fc;

this.bgcolor=bg,this.keycolor=kc,this.bordercolor=bc;

if(!exists)

{

this.Cntr=ct,this.LastKey=null;

VATMpad.prototype.kbArray[container_id]=this;

}

varkb=exists?ct.childNodes[0]:document.createElement("DIV");

if(!exists)

{

ct.appendChild(kb);

ct.style.display="block";

ct.style.zIndex=999;

if(do_embed)

ct.style.position="relative";

else

{

ct.style.position="absolute";

//ManythankstoPeter-PaulKoch(www.quirksmode.org)forthefind-pos-X/find-pos-Ycode.

varinitX=0,ct_=ct;

if(ct_.offsetParent)

{

while(ct_.offsetParent)

{

initX+=ct_.offsetLeft;

ct_=ct_.offsetParent;

}

}

elseif(ct_.x)

initX+=ct_.x;

varinitY=0;ct_=ct;

if(ct_.offsetParent)

{

while(ct_.offsetParent)

{

initY+=ct_.offsetTop;

ct_=ct_.offsetParent;

}

}

elseif(ct_.y)

initY+=ct_.y;

ct.style.top=initY+"px",ct.style.left=initX+"px";

}

kb.style.position="relative";

kb.style.top="0px",kb.style.left="0px";

}

kb.style.border="1pxsolid"+bc;

varkb_main=exists?kb.childNodes[0]:document.createElement("DIV"),ks=kb_main.style;

if(!exists)

{

kb.appendChild(kb_main);

ks.position="relative";

ks.width="1px";

ks.cursor="default";

}

//Disablecontentselection:

this._setup_event(kb_main,"selectstart",function(event){returnfalse;});

this._setup_event(kb_main,"mousedown",function(event){if(event.preventDefault)event.preventDefault();returnfalse;});

ks.fontFamily=ff,ks.backgroundColor=bg;

if(!exists||changed)

{

ks.width=this._create_numpad(container_id,kb_main);

ks.height=(this._findY(this.LastKey)+this._findH(this.LastKey)+1)+"px";

}

returnthis;

},

_create_numpad:function(container_id,parent)

{

varc="center",n="normal";

varfs=this.fontsize,kc=this.keycolor,bc=this.bordercolor;

varmag=parseFloat(fs)/14.0,cell=Math.floor(25.0*mag);

varcp=String(cell)+"px",lh=String(Math.floor(cell-2.0))+"px";

varedge="1px";

varkb_pad_7=this._setup_key(parent,"___pad_7","1px",edge,cp,cp,bc,kc,lh,fs);

kb_pad_7.innerHTML="7";

varedge_1=String(this._findX(kb_pad_7)+this._findW(kb_pad_7)+1)+"px";

varkb_pad_8=this._setup_key(parent,"___pad_8","1px",edge_1,cp,cp,bc,kc,lh,fs);

kb_pad_8.innerHTML="8";

varedge_2=String(this._findX(kb_pad_8)+this._findW(kb_pad_8)+1)+"px";

varkb_pad_9=this._setup_key(parent,"___pad_9","1px",edge_2,cp,cp,bc,kc,lh,fs);

kb_pad_9.innerHTML="9";

varprevH=this._findH(kb_pad_9),edge_Y=(this._findY(kb_pad_9)+prevH+1)+"px";

edge_Y=(this._findY(kb_pad_7)+prevH+1)+"px";

varkb_pad_4=this._setup_key(parent,"___pad_4",edge_Y,edge,cp,cp,bc,kc,lh,fs);

kb_pad_4.innerHTML="4";

varkb_pad_5=this._setup_key(parent,"___pad_5",edge_Y,edge_1,cp,cp,bc,kc,lh,fs);

kb_pad_5.innerHTML="5";

varkb_pad_6=this._setup_key(parent,"___pad_6",edge_Y,edge_2,cp,cp,bc,kc,lh,fs);

kb_pad_6.innerHTML="6";

edge_Y=(this._findY(kb_pad_4)+prevH+1)+"px";

varkb_pad_1=this._setup_key(parent,"___pad_1",edge_Y,edge,cp,cp,bc,kc,lh,fs);

kb_pad_1.innerHTML="1";

varkb_pad_2=this._setup_key(parent,"___pad_2",edge_Y,edge_1,cp,cp,bc,kc,lh,fs);

kb_pad_2.innerHTML="2";

varkb_pad_3=this._setup_key(parent,"___pad_3",edge_Y,edge_2,cp,cp,bc,kc,lh,fs);

kb_pad_3.innerHTML="3";

edge_Y=(this._findY(kb_pad_1)+prevH+1)+"px";

varkb_pad_0=this._setup_key(parent,"___pad_0",edge_Y,edge,cp,cp,bc,kc,lh,fs);

kb_pad_0.innerHTML="0";

varkb_pad_enter=this._setup_key(parent,"___pad_period",edge_Y,edge_1,String(2*cell+1)+"px",cp,bc,kc,lh,parseFloat(fs)*0.9,n);

kb_pad_enter.innerHTML="Enter";

this.LastKey=kb_pad_enter;

returnString(this._findX(kb_pad_9)+this._findW(kb_pad_9)+1)+"px";

},

_generic_callback_proc:function(event)

{

vare=event||window.event;

varin_el=e.srcElement||e.target;

varcontainer_id=in_el.id.substring(0,in_el.id.indexOf("___"));

varvpad=VATMpad.prototype.kbArray[container_id];

if(vpad.sc)vpad._start_flash(in_el);

if(vpad._Callback)vpad._Callback(in_el.innerHTML,vpad.Cntr.id);

},

SetParameters:function()

{

varl=arguments.length;

if(!l||(l%2!=0))returnfalse;

varp0,p1,p2,p3,p4,p5,p6,p7,p8,p9,p10;

while(--l>0)

{

varvalue=arguments[l];

switch(arguments[l-1])

{

case"callback":

p0=((typeof(value)=="function")&&((value.length==1)||(value.length==2)))?value:this._Callback;

break;

case"font-name":p1=value;break;

case"font-size":p2=value;break;

case"font-color":p3=value;break;

case"base-color":p4=value;break;

case"key-color":p5=value;break;

case"border-color":p6=value;break;

case"show-click":p7=value;break;

case"click-font-color":p8=value;break;

case"click-key-color":p9=value;break;

case"click-border-color":p10=value;break;

default:break;

}

l-=1;

}

this._construct(this.Cntr.id,p0,p1,p2,p3,p4,p5,p6,p7,p8,p9,p10);

returntrue;

},

Show:function(value)

{

varct=this.Cntr.style;

ct.display=((value==undefined)||(value==true))?"block":((value==false)?"none":ct.display);

}

};

打包文件下载