docs/examples/example 04 - scroll container/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>gown.js example: scroll container</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;
function onComplete() {
//stage.addChild(toggleButton);
var sprite = PIXI.Sprite.fromImage("./img/rainbow.png");
var sa_sprite = new GOWN.ScrollContainer();
sa_sprite.viewPort = sprite;
sa_sprite.x = 240;
sa_sprite.y = 240;
sa_sprite.width = sa_sprite.height = 180;
stage.addChild(sa_sprite);
grp = new GOWN.LayoutGroup();
grp.layout = new GOWN.layout.VerticalLayout();
// create layout container and add some buttons
for (var i = 0; i < 20; i++) {
btn = new GOWN.Button();
btn.height = 44;
btn.width = 100;
btn.label = (i+1)+". button";
grp.addChild(btn);
}
sa_grp = new GOWN.ScrollContainer();
sa_grp.viewPort = grp;
sa_grp.x = 100;
sa_grp.y = 100;
sa_grp._useMask = false;
sa_grp.height = 150;
sa_grp.width = 150;
stage.addChild(sa_grp);
requestAnimationFrame(animate);
}
var theme = new GOWN.ThemeParser("../../themes/assets/aeon_desktop/aeon_desktop.json");
theme.once(GOWN.Theme.COMPLETE, onComplete, this);
function animate() {
// render the stage
renderer.render(stage);
requestAnimationFrame(animate);
}
GOWN.loader.load();
</script>
</body>
</html>