DroepBar - HTML-Quelltext

Quelltext 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