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>
dynapi.zip( 791 k)Related examples in the same category