下拉菜单 - AuxUI - 模块化前端UI框架

使用下拉菜单需要加载element模块，可通过下列方式加载

//加载element模块
auxui(['element'], function (){
    //加载后执行一些动作和事件处理
});

实例

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
  下拉菜单<span class="caret"></span></button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <li><a href="#">子菜单1</a></li>
      <li><a href="#">子菜单2</a></li>
      <li><a href="#">子菜单3</a></li>
  </ul>
</div>

通过为下拉菜单的父元素设置 .dropup 类，可以让菜单向上弹出（默认是向下弹出的）。

<div class="dropup">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">下拉菜单<span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
        <li><a href="#">子菜单1</a></li>
        <li><a href="#">子菜单2</a></li>
        <li><a href="#">子菜单3</a></li>
    </ul>
</div>

对齐

B默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

标题

在任何下拉菜单中均可通过添加标题来标明一组动作。

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">下拉菜单<span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
        <li class="dropdown-header">这是一段小标题</li>
        <li><a href="#">子菜单1</a></li>
        <li><a href="#">子菜单2</a></li>
        <li><a href="#">子菜单3</a></li>
        <li class="dropdown-header">这是一段小标题</li>
        <li><a href="#">子菜单1</a></li>
    </ul>
</div>

分割线

为下拉菜单添加一条分割线，用于将多个链接分组。

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuDivider" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">下拉菜单<span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
        <li><a href="#">子菜单1</a></li>
        <li><a href="#">子菜单2</a></li>
        <li><a href="#">子菜单3</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">子菜单4</a></li>
    </ul>
</div>

禁用的菜单项

为下拉菜单中的 <li> 元素添加 .disabled 类，从而禁用相应的菜单项。

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">下拉菜单<span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
        <li><a href="#">子菜单1</a></li>
        <li class="disabled"><a href="#">禁用的子菜单</a></li>
        <li><a href="#">子菜单3</a></li>
    </ul>
</div>