Amaze UI

Dropdown


将动作或菜单折叠到下拉菜单中。

基础用法

Copy
<div class="am-dropdown" data-am-dropdown>
  <button class="am-btn am-btn-primary am-dropdown-toggle" data-am-dropdown-toggle>下拉列表 <span class="am-icon-caret-down"></span></button>
  <ul class="am-dropdown-content am-dropdown-primary">
    <li><a href="#"><i class="am-icon-github"></i>产品</a></li>
    <li class="am-active"><a href="#"><i class="am-icon-lastfm"></i>设计</a></li>
    <li><a href="#"><i class="am-icon-pinterest"></i>开发</a></li>
    <li class="am-disabled"><a href="#"><i class="am-icon-stack-overflow"></i>测试</a></li>
    <li><a href="#"><i class="am-icon-windows"></i>运维</a></li>
  </ul>
</div>

am-dropdown-content 上添加 am-dropdown-primary class 下拉框以及内部样式会更改颜色。

在线运行

上拉列表

Copy
<div class="am-dropdown am-dropdown-up" data-am-dropdown>
  <button class="am-btn am-btn-danger am-dropdown-toggle" data-am-dropdown-toggle>上拉列表 <span class="am-icon-caret-up"></span></button>
  <ul class="am-dropdown-content am-dropdown-primary">
    <li><a href="#">产品</a></li>
    <li class="am-active"><a href="#">设计</a></li>
    <li><a href="#">开发</a></li>
    <li class="am-disabled"><a href="#">测试</a></li>
    <li><a href="#">运维</a></li>
  </ul>
</div>

.am-dropdown 上添加 .am-dropdown-up class,在上面弹出内容。

在线运行

下拉内容

念奴娇 赤壁怀古

大江东去,浪淘尽,千古风流人物。 故垒西边,人道是,三国周郎赤壁。 乱石穿空,惊涛拍岸,卷起千堆雪。

Copy
<div class="am-dropdown" data-am-dropdown>
  <button class="am-btn am-btn-success am-dropdown-toggle">下拉内容 <span class="am-icon-caret-down"></span></button>
  <div class="am-dropdown-content am-dropdown-primary">
    <h2>念奴娇 赤壁怀古</h2>
    <p>
      大江东去,浪淘尽,千古风流人物。
      故垒西边,人道是,三国周郎赤壁。
      乱石穿空,惊涛拍岸,卷起千堆雪。
    </p>
  </div>
</div>

宽度适应

下拉内容 .am-dropdown-content 为绝对定位,宽度会根据内容缩放(最小为 160px)。

data-am-dropdown 里指定要适应到的元素,下拉内容的宽度会设置为该元素的宽度。当然可以直接在 CSS 里设置下拉内容的宽度。

念奴娇 赤壁怀古

大江东去,浪淘尽,千古风流人物。 故垒西边,人道是,三国周郎赤壁。 乱石穿空,惊涛拍岸,卷起千堆雪。

Copy
<div id="doc-dropdown-justify">
  <div class="am-dropdown" data-am-dropdown="{justify: '#doc-dropdown-justify'}">
    <button class="am-btn am-btn-success am-dropdown-toggle">宽度适应下拉 <span class="am-icon-caret-down"></span></button>
    <div class="am-dropdown-content">
      <h2>念奴娇 赤壁怀古</h2>
      <p>
        大江东去,浪淘尽,千古风流人物。
        故垒西边,人道是,三国周郎赤壁。
        乱石穿空,惊涛拍岸,卷起千堆雪。
      </p>
      </p>
    </div>
  </div>
</div>

触发方式

通过 trigger 可以替换和增加下拉触发的事件

Copy
<div class="am-dropdown" data-am-dropdown="{trigger: 'hover' }">
  <button class="am-btn am-btn-primary am-dropdown-toggle" data-am-dropdown-toggle>鼠标移入 <span class="am-icon-caret-down"></span></button>
  <ul class="am-dropdown-content">
    <li><a href="#">产品</a></li>
    <li class="am-active"><a href="#">设计</a></li>
    <li><a href="#">开发</a></li>
    <li class="am-disabled"><a href="#">测试</a></li>
    <li><a href="#">运维</a></li>
  </ul>
</div>

调用方式

通过 Data API

如上面的演示所示,根据示例组织好 HTML 结构,然后在 .am-dropdown 上添加 data-am-dropdown 属性,相关选项可以设置在该属性的值里。

通过 JS

按照示例组织好 HTML 结构(不加 data-am-dropdown 属性),然后通过 JS 来调用。

念奴娇 赤壁怀古

大江东去,浪淘尽,千古风流人物。 故垒西边,人道是,三国周郎赤壁。 乱石穿空,惊涛拍岸,卷起千堆雪。








Copy
<div id="doc-dropdown-justify-js" style="width: 400px">
  <div class="am-dropdown" id="doc-dropdown-js">
    <button class="am-btn am-btn-danger am-dropdown-toggle">通过 JS 调用 <span class="am-icon-caret-down"></span></button>
    <div class="am-dropdown-content">
      <h2>念奴娇 赤壁怀古</h2>
      <p>
        大江东去,浪淘尽,千古风流人物。
        故垒西边,人道是,三国周郎赤壁。
        乱石穿空,惊涛拍岸,卷起千堆雪。
      </p>
    </div>
  </div>
</div>
<script>
  $(function() {
    $('#doc-dropdown-js').dropdown({justify: '#doc-dropdown-justify-js'});
  });
</script>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>

<button class="am-btn am-btn-secondary" id="doc-dropdown-toggle">调用 Toggle</button>
<button class="am-btn am-btn-success" id="doc-dropdown-open">调用 Open</button>
<button class="am-btn am-btn-warning" id="doc-dropdown-close">调用 Close</button>
<script>
  $(function() {
    var $dropdown = $('#doc-dropdown-js'),
        data = $dropdown.data('amui.dropdown');

    function scrollToDropdown() {
      $(window).smoothScroll({position: $dropdown.offset().top});
    }

    $('#doc-dropdown-toggle').on('click', function(e) {
      scrollToDropdown();
      $dropdown.dropdown('toggle');
      return false;
    });

    $('#doc-dropdown-open').on('click', function(e) {
      scrollToDropdown();
      data.active ? alert('已经打开了') : $dropdown.dropdown('open');
      return false;
    });

    $('#doc-dropdown-close').on('click', function(e) {
      scrollToDropdown();
      data.active ? $dropdown.dropdown('close') : alert('请先打开,再关闭');
      return false;
    });

    $dropdown.on('open.dropdown.amui', function (e) {
      console.log('open event triggered');
    });
  });
</script>
  • $(element).dropdown(options) 激活下拉功能;
  • $(element).dropdown('toggle') 下拉状态交替;
  • $(element).dropdown('close') 隐藏下拉菜单;
  • $(element).dropdown('open') 显示下拉菜单。

在线运行

参数说明

参数类型默认描述
trigger事件click使用自定义的事件触发下拉,可以使用多个,使用空格隔开。如click hover
boundary选择器window下拉内容边界,避免下拉内容超过边界被遮盖截断
justify选择器undefined下拉内容适应宽度的元素

自定义事件

下拉框的自定义事件在 .am-dropdown 上触发。

事件名称描述
open.dropdown.amui调用显示下拉框方法时立即触发
opened.dropdown.amui下拉框显示完成时触发
close.dropdown.amui调用隐藏方法时触发
closed.dropdown.amui下拉框关闭完成时触发
$(function() {
  $dropdown.on('open.dropdown.amui', function (e) {
    console.log('open event triggered');
  });
});