docs/examples/example 05 - scrollbars/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>gown.js example: scrollbar</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="../../lib/pixi/pixi.js"></script>
<script src="../../dist/gown.js"></script>
</head>
<body>
<script>
var stage = new PIXI.Container();
var sizes = {w: 800, h: 600};
var renderer = PIXI.autoDetectRenderer(sizes.w, sizes.h, {backgroundColor : 0xffffff});
document.body.appendChild(renderer.view);
var grp, btn, sa_grp;
var inner_horizontal, horizontal_container, horizontal_scrollbar;
function onComplete() {
var i;
// HORIZONTAL
inner_horizontal = new GOWN.LayoutGroup();
inner_horizontal.layout = new GOWN.layout.HorizontalLayout();
inner_horizontal.layout.gap = 10;
// add some buttons
for (i = 0; i < 50; i++) {
btn = new GOWN.Button();
btn.height = 25;
btn.width = 80;
btn.label = (i+1)+". button";
inner_horizontal.addChild(btn);
}
horizontal_container = new GOWN.ScrollContainer();
horizontal_container.addChild(inner_horizontal);
stage.addChild(horizontal_container);
horizontal_scrollbar = new GOWN.ScrollBar();
horizontal_scrollbar.container = horizontal_container;
horizontal_scrollbar.y = 60;
horizontal_scrollbar.x = 10;
horizontal_scrollbar.width = 780;
stage.addChild(horizontal_scrollbar);
// TODO: let the scrollbar move the content,
// implement locationToValue? implement thumb_touchHandler?
/*
inner_scroll_horizontal = new GOWN.ScrollArea();
inner_scroll_horizontal.width = 500;
inner_scroll_horizontal.content = inner_horizontal;
inner_scroll_horizontal.x = 200;
stage.addChild(inner_scroll_horizontal);
sb_horizontal = new GOWN.ScrollBar(inner_scroll_horizontal);
stage.addChild(sb_horizontal);
sb_horizontal.y = inner_scroll_horizontal.height;
sb_horizontal.x = inner_scroll_horizontal.x;
sb_horizontal.width = inner_scroll_horizontal.width;
// VERTICAL
var grp = new GOWN.LayoutGroup();
var inner = new GOWN.LayoutGroup();
inner.layout = new GOWN.layout.VerticalLayout();
inner.layout.gap = 10;
// add some buttons
for (i = 0; i < 12; i++) {
btn = new GOWN.Button();
btn.height = 25;
btn.width = 80;
btn.label = (i+1)+". button";
inner.addChild(btn);
}
*/
/*
var inner_scroll = new GOWN.ScrollArea(inner);
inner_scroll.width = 100;
inner_scroll.height = 150;
grp.addChild(inner_scroll);
*/
/*
var sb = new GOWN.ScrollBar(inner_scroll);
grp.addChild(sb);
sb.x = inner_scroll.width;
sb.height = inner_scroll.height;
stage.addChild(grp);
grp.y = 100;
*/
requestAnimationFrame(animate);
}
var theme = new GOWN.ThemeParser("../../themes/assets/aeon_desktop/aeon_desktop.json");
theme.once(GOWN.Theme.COMPLETE, onComplete, this);
var shapeTheme;
function animate() {
// render the stage
renderer.render(stage);
requestAnimationFrame(animate);
}
GOWN.loader.load();
</script>
</body>
</html>