DroepBar - HTML-QuelltextQuelltext von droepbar.js |
![]() ![]() ![]() |
Dies ist die Auflistung der Datei droepbar.js,
die eine sich an der Fenstergeometrie ausrichtende Navigationsleiste anzeigt.
Im folgenden Quelltext sind Prozedurdeklarationen rot und Kommentare grün markiert. |
![]() ![]() ![]() ![]() |
/* ---------------------------------------------------------------- Droeppez Schiebebalken jegliche kommerzielle Nutzung ist kostenpflichtig und nur nach ausdruecklicher Zustimmung des Autors gestattet (c) 2003 Ulrich Kritzner http://www.droeppez.de/ ---------------------------------------------------------------- */ var barimages=new Array(); var barimagenames=new Array(); var droepbars=new Array(); barimages.length=0; barimagenames.length=0; droepbars.length=0; function GetBarImage(imgsource) /* verwaltet alle durch Balken verwendeten Bilder und vermeidet doppelte Instanzen */ { var i,img; for (i=0;i<barimages.length;i++) if (barimagenames[i]==imgsource) return barimages[i]; img=new Image(); img.src=imgsource; barimagenames[barimages.length]=imgsource; barimages[barimages.length]=img; return img; } function SetAllBars() /* setzt alle Balken */ { var i; for (i=0;i<droepbars.length;i++) droepbars[i].SetBar(); } function dbar_set(selected) /* setzt einen neuen Wert */ { var elobj=eval("document."+this.elementname); if (selected<0) selected=0; if (selected>=this.images.length) selected=this.images.length-1; this.selected=selected; elobj.value=this.selected+this.min; this.DrawBarPartial(); } function dbar_move(value) /* schiebt den Schalter relativ */ { this.set(this.selected+value); } function dbar_lhover(on) /* hovert das linke Schaltfeld */ { this.hover(this.selected-1,on); if (on) document.images[this.firstimg-1].src=this.hlimg.src; else document.images[this.firstimg-1].src=this.limg.src; } function dbar_rhover(on) /* hovert das rechte Schaltfeld */ { this.hover(this.selected+1,on); if (on) document.images[this.firstimg+this.images.length].src=this.hrimg.src; else document.images[this.firstimg+this.images.length].src=this.rimg.src; } function dbar_hover(i,on) /* hovert ein Anzeigefeld */ { if ((i<0)||(i>=this.images.length)) return; if (on) document.images[this.firstimg+i].src=this.himages[i].src; else { if (i<this.selected) document.images[this.firstimg+i].src=this.limages[i].src; else if (i>this.selected) document.images[this.firstimg+i].src=this.rimages[i].src; else document.images[this.firstimg+i].src=this.images[i].src; } } function dbar_DrawBar() /* zeigt die aktuelle Einstellung */ { var i; if (this.selected==this.oldsel) return; for (i=0;i<this.images.length;i++) { if (i<this.selected) document.images[this.firstimg+i].src=this.limages[i].src; else if (i>this.selected) document.images[this.firstimg+i].src=this.rimages[i].src; else document.images[this.firstimg+i].src=this.images[i].src; } this.oldsel=this.selected; } function dbar_DrawBarPartial() /* passt die Anzeige an aktuelle Einstellung an */ { var i,a,e; if (this.selected==this.oldsel) return; if (this.selected<this.oldsel) { a=this.selected; e=this.oldsel; } else { e=this.selected; a=this.oldsel; } for (i=a;i<=e;i++) { if (i<this.selected) document.images[this.firstimg+i].src=this.limages[i].src; else if (i>this.selected) document.images[this.firstimg+i].src=this.rimages[i].src; else document.images[this.firstimg+i].src=this.images[i].src; } this.oldsel=this.selected; } function dbar_SetBar() /* setzt den Balken */ { var elobj=eval("document."+this.elementname); var retvalue=Number(elobj.value); this.selected=retvalue; if (typeof(this.selected)!="number") this.selected=0; this.selected-=this.min; if (this.selected<0) this.selected=0; if (this.selected>=this.images.length) this.selected=this.images.length-1; if (String(this.selected)!=elobj.value) elobj.value=this.selected+this.min; this.DrawBar(); } function dbar_CloneBar(elementname) /* klont ein DroepBar-Objekt. Attribute: elementname: Name des Formularelements, was das Ergebnis aufnehmen soll */ { var NewObject; NewObject=new DroepBar(elementname,this.min,this.leftimg,this.rightimg,this.usehover,this.imagenames); return NewObject; } function DroepBar(elementname,min,leftimg,rightimg,usehover,imagenames) /* legt ein neues DroepBar-Objekt an. Attribute: elementname: Name des Formularelements, was das Ergebnis aufnehmen soll min: Minimaler Zahlenwert des Balkens leftimg: Dateiname des linken Buttons ohne Endung (nur Gif) rightimg: Dateiname des rechten Buttons ohne Endung (nur Gif) usehover: 0 wenn Hover-Effekt nicht gewuenscht, 1 wenn gewuenscht imagenames: Array aller Dateinamen der jeweiligen Bilder ohne Endung (nur Gif) */ { var i,stg=""; this.num=droepbars.length; droepbars[this.num]=this; this.CloneBar=dbar_CloneBar; this.DrawBar=dbar_DrawBar; this.DrawBarPartial=dbar_DrawBarPartial; this.SetBar=dbar_SetBar; this.set=dbar_set; this.move=dbar_move; this.lhover=dbar_lhover; this.rhover=dbar_rhover; this.hover=dbar_hover; this.elementname=elementname; this.min=min; this.leftimg=leftimg; this.rightimg=rightimg; this.usehover=usehover; this.firstimg=document.images.length+1; this.oldsel=-1; this.selected=0; this.imagenames=new Array(); this.limages=new Array(); this.images=new Array(); this.rimages=new Array(); if (usehover) { this.himages=new Array(); this.limg=GetBarImage(leftimg+".gif"); this.hlimg=GetBarImage(leftimg+"h.gif"); this.rimg=GetBarImage(rightimg+".gif"); this.hrimg=GetBarImage(rightimg+"h.gif"); } stg=stg+"<a href=\"javascript:droepbars["+this.num+"].move(-1);\""; if (usehover) { stg=stg+" onMouseOver=\"javascript:droepbars["+this.num+"].lhover(1);\""; stg=stg+" onMouseOut=\"javascript:droepbars["+this.num+"].lhover(0);\""; } stg=stg+"><img border=\"0\" src=\""+leftimg+".gif\" alt=\"\">"; stg=stg+"</a>"; for (i=0;i<imagenames.length;i++) { this.imagenames[i]=imagenames[i]; this.limages[i]=GetBarImage(imagenames[i]+"l.gif"); this.images[i]=GetBarImage(imagenames[i]+".gif"); this.rimages[i]=GetBarImage(imagenames[i]+"r.gif"); if (usehover) this.himages[i]=GetBarImage(imagenames[i]+"h.gif"); stg=stg+"<a href=\"javascript:droepbars["+this.num+"].set("+i+");\""; if (usehover) { stg=stg+" onMouseOver=\"javascript:droepbars["+this.num+"].hover("+i+",1);\""; stg=stg+" onMouseOut=\"javascript:droepbars["+this.num+"].hover("+i+",0);\""; } stg=stg+"><img border=\"0\" src=\""+imagenames[i]+".gif\" alt=\"\">"; stg=stg+"</a>"; } stg=stg+"<a href=\"javascript:droepbars["+this.num+"].move(+1);\""; if (usehover) { stg=stg+" onMouseOver=\"javascript:droepbars["+this.num+"].rhover(1);\""; stg=stg+" onMouseOut=\"javascript:droepbars["+this.num+"].rhover(0);\""; } stg=stg+"><img border=\"0\" src=\""+rightimg+".gif\" alt=\"\">"; stg=stg+"</a>"; document.write(stg+"\n"); } |
![]() ![]() ![]() |
Autor: Ulrich Kritzner |