The easiest way to make use of the Scrollbars is by integrating the Scrollpane. It takes an arbitrary HTML
element (all except embed should work - I tested image and div so far) and scrolls it within a carrier div.
In this example, we call the carrier "container":
Hence, you place the "container" via HTML into your document:
<div id="container"></div>
For adding your real content, you need to code some javascript. It is currently not yet possible to add the content
via HTML. After you created your content you pass it as the "scrollableSource" to your newly created
Scrollpane:
scrollpane = new Scrollpane(container,scrollableSource,cssStyle);
Note that if no Style param is set the object will grab the defaultScroll styles in the viewer.css.
Have a look at the Controller.js to see how to implement them the OOP way.
/**
* Controller.js
* This file is lisenced under LGPL
* Copyright (C) 2006 nightlabs
* author : khaled at nightlabs dot de
**/
function Controller(container)
{
this.container = container;
util = Util.getInstance();
this.init = function (){
// to make it resizable if needed
util.crossBrowserAddEventListener(window,"resize",util.createMethodReference(this,"resizer"));
this.image1 = new Image();
this.image1.src = "../images/gnu.jpg";
// to call the Scrollbars layout method
util.crossBrowserAddEventListener(this.image1,"load",util.createMethodReference(this,"imageLoader"));
this.scrollpane = new Scrollpane(this.container,this.image1);
}
this.init()
}
/** the imageLoader ensures that the Scroll Layout is set after an Image has been sucessfully loaded.
* Note that other Objects/Elements usually donīt need this onLoad listener, but thats how you could do dynamic content
**/
Controller.prototype.imageLoader = function (){
this.scrollpane.layout();
}
Controller.prototype.resizer = function (){
this.scrollpane.layout();
}
For a very quick implementation just use the all in one file
and the viewer.css
|
