Skip to content
This repository
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 109 lines (95 sloc) 3.433 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108
<!DOCTYPE 5>
<html>
  <head>
    <title>Dropdown component</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="../build/build.css" />
    <style>
      ul.custom-menu {
        background-color: #333;
        color: white;
      }

      ul.custom-menu li a {
        color: #8cc;
      }
    </style>
  </head>
  <body>
    <h2>Dropdown</h2>
    <p>Click <a id="dropdown" href="#">here</a> to open an inline dropdown.</p>
    <p>Dropdown menu: <span class="dropdown-link menu1">Fruits</span></p>
    <p>Dropdown menu (multiple): <span class="dropdown-link multiple">Fruits</span></p>
    <p>No-selectable dropdown menu: <span class="dropdown-link menu2"><em>Select</em></span></p>
    <p>Into input element: <input class="dropdown-link dropdown-input" value ="Fruits" /></p>

    <script src="../build/build.js"></script>
    <script>
      var Dropdown = require('dropdown/index.js');

      var n = 0;

      // 1 - simple dropdown
      var dropdown = Dropdown('#dropdown')
        .option('selectable', false)
        .option('menu', false)
        .add('Add item', function(){ n++; dropdown.add('new ' + n + ' item'); })
        .add('edit-item', 'Edit <em>item</em>', function(){ console.log('edit'); })
        .add('Remove "Add item"', function(){ dropdown.remove('add-item'); })
        .on('select', function(slug) { console.log(slug); })

      // 2 - dropdown menu
      var dropdownMenu = Dropdown('.menu1', {
          menu: 'right',
          items: [
              ['apple', '<em>Apple</em>', function(){ console.log('Apple !!') }]
            , ['orange', '<strong style="color: #f86">orange</strong>']
            , ['banana']
            , ['strawberry', function() {
                  console.log('remove the orange');
                  dropdownMenu.remove('orange');
                }
              ]
          ]
        , classname: 'custom-menu'
      });

      // 3 - dropdown menu (multiple)
      var multiDropdown = Dropdown('.multiple', {
          items: [
              ['apple', '<em>Apple</em>', function(){ console.log('Apple !!') }]
            , ['orange', '<strong style="color: #f86">orange</strong>']
            , 'banana'
            , 'strawberry'
            , ['empty', 'Empty Dropdown', function() { multiDropdown.empty(); }]
          ]
        , classname: 'custom-menu'
        , selectable: false
        , multiple: true
      });

      multiDropdown.on('focus', function(item) {
        console.log('focus `%s`', item);
      });

      multiDropdown.on('select', function(item) {
        console.log('select `%s`', item);
      });

      multiDropdown.on('check', function(item, checked) {
        console.log('check `%s` - checked: ', item, checked);
      });

      multiDropdown.on('uncheck', function(item, checked) {
        console.log('uncheck `%s` - cheched: ', item, checked);
      });

      // 4 - no selectable dropdown menu
      Dropdown('.menu2', {
          items: [
              ['car']
            , ['trucks']
            , ['aeroplanes', function(slug){ console.log('Aero !!') }]
          ]
        , selectable: false
      });

      // 5 - into an input element
      Dropdown('.dropdown-input', {
          items: [
              ['car']
            , ['trucks']
            , ['aeroplanes', function(slug){ console.log('Aero !!') }]
          ]
      });

    </script>
  </body>
</html>
Something went wrong with that request. Please try again.