ScrollBar with background image : ScrollBar : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » GUI Components » ScrollBar »

 

ScrollBar with background image




<html>
<head>
<title>DynAPI Examples - ScrollBar</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
  dynapi.library.setPath('./dynapisrc/');
  dynapi.library.include('dynapi.api');
  dynapi.library.include('ScrollBar');
  dynapi.library.include('ButtonFlatStyle'); // (optional)
  dynapi.library.include('ButtonImageStyle'); // (optional)
</script>
<script language="Javascript">

  //Styles.addStyle('ScrollBarButton',ButtonFlatStyle);

  vbar=new ScrollBar('vert',100,100,200,0,50)
  vbar.setSmallChange(1);
  vbar.setLargeChange(10);
  vbar.onscroll=function(e){
    status=vbar.getValue()
  }

  hbar=new ScrollBar('horz',150,100,100,1,50)
  hbar.setSmallChange(1);
  hbar.setLargeChange(5);
  //hbar.setLocalStyleAttribute('backColor','#C0C0C0');
  //hbar.btnUp.setStyle('ButtonFlat');
  hbar.onscroll=function(e){
    status=hbar.getValue();
  }

  dynapi.document.addChild(hbar)
  dynapi.document.addChild(vbar)

  var s = ButtonImageStyle();
  s.setStyleAttribute('imageOff',dynapi.functions.getImage('./dynapiexamples/images/btn_sbar_off.gif',16,16));
  s.setStyleAttribute('imageOn',dynapi.functions.getImage('./dynapiexamples/images/btn_sbar_on.gif',16,16));
  Styles.addStyle('GreenButton',s);

  var xbar = new ScrollBar('vert',120,100,200,0,150)
  xbar.setLocalStyleAttribute('imageTrack',dynapi.functions.getImage('./dynapiexamples/images/sbarbg.gif',16,16));
  xbar.btnUp.setStyle('GreenButton');
  xbar.btnDown.setStyle('GreenButton');
  xbar.knob.setLocalStyleAttribute('backColor','#269A01');
  xbar.knob.setLocalStyleAttribute('borderColor','green');
  xbar.knob.setLocalStyleAttribute('lightColor','#53CE0F');
  xbar.setSmallChange(1);
  xbar.setLargeChange(10);
  xbar.onscroll=function(e){
    status=xbar.getValue()
  }

  dynapi.document.addChild(xbar)

</script>
</head>
<body bgcolor="#ffffff">
<a href="#" onclick="hbar.setSize(null,hbar.h+10)">Adjust Vert-bar Height</a>
<script>
  dynapi.document.insertAllChildren();
</script>
</body>
</html>

           
       

Download : Download nav_dynapi.zip nav_dynapi.zip


-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo GUI Components
» ScrollBar