<--------------------------------------------------------------------
JTrackBar
初始日期：2007/07/11
Author:xlingFairy
Blog:http://xling.blueidea.com
目前只能生水平的，垂直的还没有写。
设计功能：
当改变时，触发事件onChange,并传当前值。
2007/07/12
加入拖动功能。
2007/07/13
加入皮肤功能
未做功能：指定trackFrequence，你可以自己试着修改一下。
请尊重劳动成果！不得删除原作都信息！后果自负！
----------------------------------------------------------------------
*/
functionJPos(){
}
JPos.getAbsPos=function(pTarget){
var_x=0;
var_y=0;
while(pTarget.offsetParent){
_x+=pTarget.offsetLeft;
_y+=pTarget.offsetTop;
pTarget=pTarget.offsetParent;
}
_x+=pTarget.offsetLeft;
_y+=pTarget.offsetTop;
return{x:_x,y:_y};
}
JPos.getMousePos=function(evt){
var_x,_y;
evt=evt||window.event;
if(evt.pageX||evt.pageY){
_x=evt.pageX;
_y=evt.pageY;
}else{
_x=evt.clientX+document.body.scrollLeft-document.body.clientLeft;
_y=evt.clientY+document.body.scrollTop-document.body.clientTop;
}
return{x:_x,y:_y};
}
functionJTrackBar(pParent){
varself=this;
var$=function(pId){
returndocument.getElementById(pId);
}
var$c=function(pTag){
returndocument.createElement(pTag);
}
varbody=$(pParent)||document.body;
varoOutline=null;
varoTrackArea=null;
varoBtnPointer=null;
varoArrBtnLeft=oArrBtnRight=oArrBtnUp=oArrBtnDown=null;
varinDrag=false;
vardragStartPos=null;
varmaxPosition=100;//最大刻度
varminPosition=0;//最小刻度
varposition=0;//当前位置
vartrackFrequence=10;//点击一次移动多少刻度
this.setRange=function(pMin,pMax){
maxPosition=Math.max(pMin,pMax);
minPosition=Math.min(pMin,pMax);
}
varoutlineWidth,trackAreaWidth,preFrequenceWidth;
this.onChange=newFunction();
vargetRunStyle=function(pObj,pProperty){
try{
if(pObj.currentStyle)
returneval("pObj.currentStyle."+pProperty);
else
returndocument.defaultView.getComputedStyle(pObj,"").getPropertyValue(pProperty);
}catch(e){
alert(e);
}
}
/*-----------------------------------------------------*/
varcreateOutline=function(pWidth){
oOutline=$c("DIV");
body.appendChild(oOutline);
oOutline.className="JTrackBarStand";
oOutline.style.width=pWidth+"px";
//oOutline.style.height="15px";
oOutline.style.overflow="hidden";
}
/*-----------------------------------------------------*/
varcreateArrBtn=function(pDirection){
vararrBtn=$c("DIV");
switch(pDirection){
case"LEFT":
arrBtn.className="btnLeft";
arrBtn.style.styleFloat="left";
arrBtn.style.cssFloat="left";
break;
case"RIGHT":
arrBtn.className="btnRight";
arrBtn.style.styleFloat="left";
arrBtn.style.cssFloat="left";
break;
case"UP":
arrBtn.className="btnUp";
break;
case"DOWN":
arrBtn.className="btnDown";
break;
}
arrBtn.direction=pDirection;
arrBtn.onclick=arrBtn_click;
returnarrBtn;
}
vararrBtn_click=function(evt){
evt=window.event||evt;
varo=evt.srcElement||evt.target;
switch(o.direction){
case"LEFT":
if(position<=minPosition)
return;
self.setPositionBy(-trackFrequence);
break;
case"RIGHT":
if(position>=maxPosition)
return;
self.setPositionBy(trackFrequence);
break;
}
}
vartrackarea_click=function(evt){
evt=window.event||evt;
varmPos=JPos.getMousePos(evt);
varpos_=JPos.getAbsPos(oTrackArea);
varw_=parseInt(getRunStyle(oBtnPointer,"width"));
self.setPosition(parseInt((mPos.x-pos_.x)/preFrequenceWidth));
}
varcreateHTrackArea=function(){
varw_=parseInt(getRunStyle(oArrBtnLeft,"width"));
trackAreaWidth=outlineWidth-2*w_;
preFrequenceWidth=trackAreaWidth/(maxPosition-minPosition);
oTrackArea=$c("DIV");
oOutline.appendChild(oTrackArea);
oTrackArea.onclick=trackarea_click;
oTrackArea.className="trackArea";
oTrackArea.style.width=trackAreaWidth+"px";
oTrackArea.style.styleFloat="left";
oTrackArea.style.cssFloat="left";
}
varrecalcTrackArea=function(){
varw_=parseInt(getRunStyle(oArrBtnLeft,"width"));
trackAreaWidth=outlineWidth-2*w_;
preFrequenceWidth=trackAreaWidth/(maxPosition-minPosition);
oTrackArea.style.width=trackAreaWidth+"px";
}
varpointer_mousedown=function(evt){
inDrag=true;
dragStartPos=JPos.getMousePos(evt);
body.onmousemove=pointer_mousemove;
body.onmouseup=pointer_mouseup;
body.onmouseout=pointer_mouseout;
}
varpointer_mousemove=function(evt){
if(!inDrag)return;
//evt=window.event||evt;
//varx_=evt.clientX;
//window.status=x_+""+dragStartPos.x;
//self.setPositionBy(x_-dragStartPos.x);
//window.status+=""+evt.clientX;
varmPos=JPos.getMousePos(evt);
varpos_=JPos.getAbsPos(oTrackArea);
self.setPosition(parseInt((mPos.x-pos_.x)/preFrequenceWidth));
}
varpointer_mouseup=function(){
inDrag=false;
}
varpointer_mouseout=function(){
//inDrag=false;
}
varcreateHPointer=function(){
oBtnPointer=$c("DIV");
oOutline.appendChild(oBtnPointer);
//oBtnPointer.onclick=trackarea_click;
oBtnPointer.onmousedown=pointer_mousedown;
//oOutline.onmousemove=oBtnPointer.onmousemove=pointer_mousemove;
//oBtnPointer.onmouseup=pointer_mouseup;
//oBtnPointer.onmouseout=pointer_mouseout;
oBtnPointer.className="btnPointer";
oBtnPointer.style.position="absolute";
varw_=parseInt(getRunStyle(oBtnPointer,"width"));
varpos_=JPos.getAbsPos(oTrackArea);
oBtnPointer.style.left=pos_.x-w_/2+"px";
oBtnPointer.style.top=pos_.y+"px";
oBtnPointer.style.cssText+="left:"+(pos_.x-w_/2)+"px;top:"+pos_.y+"px;";
}
/*-----------------------------------------------------*/
this.createHTrackBar=function(pWidth){
outlineWidth=pWidth;
createOutline(pWidth);
oArrBtnLeft=createArrBtn("LEFT");
oOutline.appendChild(oArrBtnLeft);
createHTrackArea();
oArrBtnRight=createArrBtn("RIGHT");
oOutline.appendChild(oArrBtnRight);
createHPointer();
}
/*-----------------------------------------------------*/
this.setPositionBy=function(pPosition){
position+=pPosition;
self.setPosition(position);
}
this.setPosition=function(pPosition){
position=pPosition;
if(position>maxPosition)
position=maxPosition;
if(position<minPosition)
position=minPosition;
varpos_=JPos.getAbsPos(oTrackArea);
varw_=parseInt(getRunStyle(oBtnPointer,"width"));
oBtnPointer.style.left=pos_.x-w_/2+preFrequenceWidth*position+"px";
doChange();
}
vardoChange=function(){
self.onChange(position);
}
this.getPosition=function(){
returnposition;
}
this.setSkin=function(pSkin){
oOutline.className=pSkin;
recalcTrackArea();
}
}
打包文件下载