Как создать Alloy UI dropdown

Question

Привет, я пытаюсь создать раскрывающееся меню с интерфейсом Alloy.

<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> 

Это все код, который я написал. Когда я нажимаю ссылку Dropdown, его выпадающее меню не появляется. Как я могу заставить его работать? Я использую Alloy UI версии 2. Когда я использую Twitter Boostrap вместо бутстрапа Alloy UI, он работает. Разница между этими двумя бутстрапами заключается в том, что версия Alloy UI имеет только aui-.

Answer 1

Этот выпадающий модуль отсутствует на AlloyUI 2.0.0pr5, но для него есть простое решение. Вам необходимо переключить класс aui-show на <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'); 
    }); 

}); 

Просмотреть результаты работы JSFiddle.

И, кстати, AlloyUI 2.0.0pr6 уже сбросил префикс aui-.