jibeinc/juice

View on GitHub
examples/radioBoxes.html

Summary

Maintainability
Test Coverage
<!DOCTYPE html>
<html>
<head>
  <title>Radio Boxes Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
  <script src='../dist/ui.js'></script>
</head>
<body>

<div class='categories'></div>

<script>
  var categories = new UI.RadioButtons('.categories', {
    options: [
      {
        displayName: 'Marketing',
        value: 'mrkt01',
        count: 5
      },
      {
        displayName: 'Sales',
        value: 'sales',
        count: 9
      },
      {
        displayName: 'Engineering',
        value: 'eng-2015',
        count: 43
      }
    ],
    radioBoxes: true,
    renderItem: function (item) {
      return item.displayName + ' (' + item.count + ')';
    }
  });

  categories.subscribe(function (choice) {
    console.log('New Category kiiii!', choice);
  });

  categories.render();

</script>

</body>
</html>