GUI Components JavaScript DHTML

  1. Home
  2. JavaScript DHTML
  3. GUI Components
  4. ScrollBar with background image


DynAPI Examples - ScrollBar


  dynapi.library.setPath('./dynapisrc/');
  dynapi.library.include('dynapi.api');
  dynapi.library.include('ScrollBar');
  dynapi.library.include('ButtonFlatStyle'); // (optional)
  dynapi.library.include('ButtonImageStyle'); // (optional)


  //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)



Adjust Vert-bar Height



           
         
  
dynapi.zip( 791 k)