GreyRook/gown.js

View on GitHub
docs/examples/example 16 - radio button/index.html

Summary

Maintainability
Test Coverage
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>gown.js example: Radio button</title>
    <!-- see https://feathersui.com/help/radio.html -->
    <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 renderer = PIXI.autoDetectRenderer(800, 600,{backgroundColor : 0xffffff});
    document.body.appendChild(renderer.view);

    var aeonTheme = new GOWN.ThemeParser("../../themes/assets/aeon_desktop/aeon_desktop.json");
    var chk;

    function onCompleteAeon() {
        var toggleGrp = new GOWN.ToggleGroup();
        toggleGrp.on(GOWN.ToggleGroup.CHANGE, function(item) {
            if (window.console) {
                console.log('selected index:', toggleGrp.selectedIndex);
                console.log('selected item:', item);
            }
        })

        var aeonchk;
        aeonchk = new GOWN.Radio(aeonTheme);
        aeonchk.toggleGroup = toggleGrp;
        aeonchk.x = aeonchk.y = 20;
        stage.addChild(aeonchk);

        var aeonchk2;
        aeonchk2 = new GOWN.Radio(aeonTheme);
        aeonchk2.selected = true;
        aeonchk2.toggleGroup = toggleGrp;
        aeonchk2.x = 60;
        aeonchk2.y = 20;
        stage.addChild(aeonchk2);

        requestAnimationFrame(animate);
    }

    aeonTheme.once(GOWN.Theme.COMPLETE, onCompleteAeon, this);

    function animate() {
        // render the stage
        renderer.render(stage);
        requestAnimationFrame(animate);
    }
    GOWN.loader.load();
</script>

</body>
</html>