如何创建Alloy UI下拉菜单

您好，我正在尝试使用Alloy UI创建下拉菜单。如何创建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>

这是我写的所有代码。当我按下下拉链接时，其下拉菜单不会出现。我如何让它工作？我使用Alloy UI版本2.当我使用Twitter Boostrap而不是Alloy UI的引导程序时，它可以工作。这两个bootstraps之间的区别在于Alloy UI的版本只有aui-。

来源

2013-05-05 Dulguun Otgon

这将是很好，如果你创建了一个jsfiddle – Ejaz 2013-05-05 12:42:01

哦，我从来没有想到这一点。也许是因为我从来没有用过jsfiddle。谢谢，我会更新 – 2013-05-05 14:29:21

您是否加入了'AUI（）。use（...）'部分？ – juandopazo 2013-05-05 14:37:25

这个下拉模块在AlloyUI 2.0.0pr5上缺失，但有一个简单的解决方案。您需要在<ul class="aui-dropdown-menu">上切换aui-show类。

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

来源

2013-07-17 20:31:14

哦，删除前缀是很好的：D – 2013-07-22 12:47:39

如何创建Alloy UI下拉菜单

回答

相关问题