Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Value selector 2.0 implementation

This article gives you all you need to implement a v2.0 Gaia Value Selector in your own app.

Live sample

The following gives you an idea of what a rendered Value Selector would look like.

Code

Here is the code you'll need.

CSS

<link href="(your styles folder)/style/value_selector.css" rel="stylesheet" type="text/css">

The CSS can be found in the Gaia project 2.0 branch under shared/style/value_selector.css. Copy this into your own project, along with the associated resources.

HTML

Note: The CSS inside the <style> element isn't needed for the implementation: it is just for the purposes of this example.

<!doctype html>
<html>
<head>
  <link href="https://mdn.github.io/gaia-2.0-bb/value_selector.css" rel="stylesheet" type="text/css">
  <link href="https://gaia-components.github.io/gaia-icons/gaia-icons-embedded.css" rel="stylesheet" type="text/css">
  <style>
    html, body { font-size: 10px; margin: 0; padding: 0; font-family: sans-serif }
  </style>
</head>

<body>

  <form role="dialog" data-type="value-selector">
    <section class="scrollable">
      <h1>Select</h1>
      <ol role="listbox">
        <li role="option"><label role="presentation"> <span>None</span></label></li>
        <li role="option"><label role="presentation"> <span>At time of event</span></label></li>
        <li role="option"><label role="presentation"> <span>5 minutes before</span></label></li>
        <li role="option"><label role="presentation"> <span>15 minutes before</span></label></li>
        <li role="option" aria-selected="true"><label role="presentation"> <span>30 minutes before</span></label></li>
        <li role="option"><label role="presentation"> <span>1 hour before</span></label></li>
        <li role="option"><label role="presentation"> <span>2 hours before</span></label></li>
        <li role="option"><label role="presentation"> <span>1 day before</span></label></li>
      </ol>
    </section>
    <menu>
      <button class="affirmative full">OK</button>
    </menu>
  </form>

  </body>
</html>

Document Tags and Contributors

 Contributors to this page: chrisdavidmills, chrisdavidmills-github
 Last updated by: chrisdavidmills,