如何創建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下拉菜單

回答

相關問題