https://rawb.codeplex.com/SourceControl/latest#Rawb/Rawb/js/rawb.ui.js
Scrollbars
Rawb scrollbars are not standard web browser scrollbars. As such, they can be styled as you please.
Rawb also provides a native scrollbar (see below) suitable for controlling some quantity rather than just moving some part of the display.
rawb.VScrollBar(range, start, count, hardStop)
Templates: RawbVScrollBarTemplateShorthand for
rawb.ScrollBar(range, start, count, hardStop, false).
Example HTML:
<!-- ko template: { name: 'RawbVScrollBarTemplate', data: vsb } -->
<!-- /ko -->
Example JavaScript:
var range = ko.observable(100);
var start = ko.observable(0);
var count = ko.observable(30);
var hardStop = true;
var vsb = new rawb.VScrollBar(range, start, count, hardStop);
ko.applyBindings({vsb: vsb});
rawb.HScrollBar(range, start, count, hardStop)
Templates: RawbHScrollBarTemplateShorthand for
rawb.ScrollBar(range, start, count, hardStop, true).
Example HTML:
<!-- ko template: { name: 'RawbHScrollBarTemplate', data: hsb } -->
<!-- /ko -->
Example JavaScript:
var range = ko.observable(100);
var start = ko.observable(0);
var count = ko.observable(30);
var hardStop = true;
var hsb = new rawb.HScrollBar(range, start, count, hardStop);
ko.applyBindings({hsb: hsb});
rawb.ScrollBar(range, start, count, hardStop, isHorizontal)
Templates: RawbVScrollBarTemplate, RawbHScrollBarTemplateA styleable scrollbar managing an integer observable spanning a given range of
values. The value can be changed by the user dragging the scrollbar
thumb with the mouse. The displayed scrollbar position can be changed by the
program by changing the start, count, and range observables.
See
rawb.VScrollBar and
rawb.HScrollBar.
Parametersrange: numberRequired; may be observable; exposed as an observable.
The scrollbar ranges over 0..(range - 1).
start: numberRequired; may be observable; exposed as an observable.
The point in the range where the scrollbar thumb starts.
count: numberRequired; may be observable; exposed as an observable.
The number of points over which the scrollbar thumb extends.
The display of the scrollbar thumb has a lower-limit of 10% of the range,
to prevent the thumb from apparently disappearing when the range is very large.
hardStop: booleanOptional (default
false); may not be observable; not exposed.
If
true, constrains
start + count <= range.
If
false, constrains
start < range.
isHorizontal: booleanOptional (default
false); may not be observable; not exposed.
If
true, scrollbar thumb responds to horizontal mouse dragging.
If
false, scrollbar thumb responds to vertical mouse dragging.
Methodsdispose():
function ()Disposes Knockout subscriptions created by the
DropDown.
Use this when the
DropDown goes out of scope if you are concerned about memory leaks.
rawb.NativeVScrollBar(height, contentHeight, scrollTop, top, left, width)
Templates: RawbNativeVScrollBarTemplateA browser-native vertical scrollbar which can be used to control another observable (
scrollTop)
either from the program or via user interaction with the scrollbar control. No 'content' is
shown, just the scrollbar itself.
Example HTML:
<!-- ko template: { name: 'RawbNativeVScrollBarTemplate', data: vsb, afterRender: vsb.afterRender } -->
<!-- /ko -->
Example JavaScript:
var height = ko.observable(100);
var contentHeight = ko.observable(200);
var scrollTop = ko.observable(30);
var vsb = new rawb.NativeVScrollBar(height, contentHeight, scrollTop);
ko.applyBindings({vsb: vsb});
Parametersheight: numberOptional (default
200); may be observable; exposed as an observable.
The height of the scrollbar control in pixels.
contentHeight: numberOptional (default
400); may be observable; exposed as an observable.
The height of the 'contents' of the scrollbar in pixels.
scrollTop: numberOptional (default
0); may be observable; exposed as an observable.
The distance from the top of the 'contents' to the 'displayed' region in pixels.
top: numberOptional (default
0); may be observable; exposed as an observable.
The top offset in pixels for the absolute position of the scrollbar.
left: numberOptional (default
0); may be observable; exposed as an observable.
The left offset in pixels for the absolute position of the scrollbar.
width: numberOptional (default
17); may be observable; exposed as an observable.
The width of the scrollbar control.
Methods*afterRender(elements):
function (elements)This function
must be passed to the
afterRender option of the Knockout
template binding when
binding an instance of
NativeVScrollBar to the
RawbNativeVScrollBarTemplate. Otherwise the binding
will not work correctly.
*dispose():
function ()This function clears up all subscriptions etc. created by the scrollbar.
Use this when the
NativeVScrollBar instance goes out of scope, if you are concerned about potential memory leaks.