下拉框



介绍

在任意的按钮上添加一个下拉列表。同时确保data-activates属性值与<ul>标签id值相同。

你可以在<li class="divider"></li> tag.

Drop Me!

  <!-- Dropdown Trigger -->
  <a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>

  <!-- Dropdown Structure -->
  <ul id='dropdown1' class='dropdown-content'>
    <li><a href="#!">one</a></li>
    <li><a href="#!">two</a></li>
    <li class="divider"></li>
    <li><a href="#!">three</a></li>
  </ul>
        

Options

名称 描述
inDuration(展开时间) 展开下拉框所需要的时间 默认: 300ms
outDuration(闭合时间) 闭合下拉框所需要的时间 默认: 225ms
constrain_width(限制宽度) 如果为true,则下拉框的宽度与触发按钮的宽度一致 默认: true
hover(悬浮) 为true,则当鼠标划过即展开下拉框 默认: false
gutter(边距) 设定选项与下拉框之间的边距 默认: 0
belowOrigin(下方位置) 为true,则下拉框的位置完全在触发按钮的下方 默认: false

只需添加一个data属性就可以用。如果你想在外部控制,那么就是用jquery插件的方式,看下面的代码例子。


  <a class='dropdown-button btn' data-beloworigin="true" href='#' data-activates='dropdown1'>Drop Me!</a>
        

初始化

只需要在你动态添加此模块的时候初始化它。


  $('.dropdown-button').dropdown({
    inDuration: 300,
    outDuration: 225,
    constrain_width: false, // Does not change width of dropdown to that of the activator
    hover: true, // Activate on hover
    gutter: 0, // Spacing from edge
    belowOrigin: false // Displays dropdown below the button
    }
  );