JavaScript DHTML/SmartClient/ScrollBar
Set Scrollbar to scroll to
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY> <SCRIPT>
// this skin uses the thumb down state Scrollbar.setProperties({
allowThumbDownState:true
}); Canvas.create({
ID:"scrolledWidget",
left:150,
top:225,
width:100,
height:100,
contents:Canvas.imgHTML("http://www.wbex.ru/style/logo.png", 200, 200),
overflow:"hidden"
});
var scrollbarWidth = 32;
Scrollbar.create({
ID:"hscrollbar", left:16, top:41, width:400, vertical:false, btnSize:scrollbarWidth, showCorner:true, imageType:"stretch", scrollTarget:scrolledWidget, autoEnable:false
});
Scrollbar.create({
ID:"vscrollbar", left:hscrollbar.left + hscrollbar.width - scrollbarWidth, top:hscrollbar.top + scrollbarWidth - 2, height:400, btnSize:scrollbarWidth, imageType:"stretch", scrollTarget:scrolledWidget, autoEnable:false
});
Button.create({
left:60, top:395, width:130, click:"hscrollbar.enable();vscrollbar.enable()", title:"Enable scrollbars"
});
Button.create({
left:200, top:395, width:130, click:"hscrollbar.disable();vscrollbar.disable()", title:"Disable scrollbars"
}); Button.create({
left:60, top:435, width:130, click:"scrolledWidget.scrollTo(50)", title:"Scroll horizontal to 50"
}); Button.create({
left:200, top:435, width:130, click:"scrolledWidget.scrollTo(null,50)", title:"Scroll vertical to 50"
});
</SCRIPT> </BODY> </HTML>
</source>
Use scroll bar to control the Canvas
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY> <SCRIPT>
// this skin uses the thumb down state Scrollbar.setProperties({
allowThumbDownState:true
}); Canvas.create({
ID:"scrolledWidget",
left:150,
top:225,
width:100,
height:100,
contents:Canvas.imgHTML("http://www.wbex.ru/style/logo.png", 200, 200),
overflow:"hidden"
});
var scrollbarWidth = 32;
Scrollbar.create({
ID:"hscrollbar", left:16, top:41, width:400, vertical:false, btnSize:scrollbarWidth, showCorner:true, imageType:"stretch", scrollTarget:scrolledWidget, autoEnable:false
});
Scrollbar.create({
ID:"vscrollbar", left:hscrollbar.left + hscrollbar.width - scrollbarWidth, top:hscrollbar.top + scrollbarWidth - 2, height:400, btnSize:scrollbarWidth, imageType:"stretch", scrollTarget:scrolledWidget, autoEnable:false
});
Button.create({
left:60, top:395, width:130, click:"hscrollbar.enable();vscrollbar.enable()", title:"Enable scrollbars"
});
Button.create({
left:200, top:395, width:130, click:"hscrollbar.disable();vscrollbar.disable()", title:"Disable scrollbars"
}); Button.create({
left:60, top:435, width:130, click:"scrolledWidget.scrollTo(50)", title:"Scroll horizontal to 50"
}); Button.create({
left:200, top:435, width:130, click:"scrolledWidget.scrollTo(null,50)", title:"Scroll vertical to 50"
});
</SCRIPT> </BODY> </HTML>
</source>
