How to create Alloy UI dropdown

Question

Hello I'm trying to create dropdown menu with Alloy UI.

<link rel="stylesheet" href="alloy2/aui-css/css/bootstrap.css"/>
<script src="alloy2/aui/aui-min.js"></script>

<div class="aui-dropdown"  id="drp">
    <a class="aui-dropdown-toggle" data-toggle="dropdown" href="#menu1">
        Dropdown
        <b class="aui-caret"></b>
    </a>
    <ul class="aui-dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="aui-divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>
<script>
   YUI({
   }).use('gallery-bootstrap-dropdown', 'node', function (Y) {
       Y.one('.aui-dropdown-toggle').plug( Y.Bootstrap.Dropdown )
   });
</script>

This is all code I've written. When I press Dropdown link its dropdown menu doesn't appear. How i do i make it work? I'm using Alloy UI version 2. When i use Twitter Boostrap instead of Alloy UI's bootstrap it works. Difference between these 2 bootstraps is that Alloy UI's version just has aui- prepending.

Answer 1

This dropdown module is missing on AlloyUI 2.0.0pr5, but there's an easy solution for it. You need to toggle the aui-show class on <ul class="aui-dropdown-menu">.

YUI().use('node', 'node-focusmanager', function (Y) {

  var document = Y.one(document),
      toggler = Y.one('.aui-dropdown-toggle'),
      dropdown = Y.one('.aui-dropdown-menu');

  toggler.on('click', function(e) {
    dropdown.toggleClass('aui-show');
    e.preventDefault();
    e.stopPropagation();
  });

  document.on('click', function() {
    dropdown.removeClass('aui-show');
  });

});

See it working on JSFiddle.

And by the way, AlloyUI 2.0.0pr6 already dropped the aui- prefix.