zoukankan      html  css  js  c++  java
  • amazeui学习笔记--js插件(UI增强4)--下拉组件Dropdown

    amazeui学习笔记--js插件(UI增强4)--下拉组件Dropdown

    一、总结

    1、am-dropdown(及其孩子):控制下拉列表的样式

    2、data-am-dropdown(及其孩子)控制下拉列表的事件,这部分事件当然可以用jquery来代替

    3、下拉列表样例

     1 <div class="am-dropdown" data-am-dropdown>
     2   <button class="am-btn am-btn-primary am-dropdown-toggle" data-am-dropdown-toggle>下拉列表 <span class="am-icon-caret-down"></span></button>
     3   <ul class="am-dropdown-content">
     4     <li class="am-dropdown-header">标题</li>
     5     <li><a href="#">快乐的方式不只一种</a></li>
     6     <li class="am-active"><a href="#">最荣幸是</a></li>
     7     <li><a href="#">谁都是造物者的光荣</a></li>
     8     <li class="am-disabled"><a href="#">就站在光明的角落</a></li>
     9     <li class="am-divider"></li>
    10     <li><a href="#">天空海阔 要做最坚强的泡沫</a></li>
    11   </ul>
    12 </div>

    am-dropdown样式:am-dropdown am-dropdown-content toggle header

    data-am-dropdown事件:data-am-dropdown data-am-dropdown-toggle

    二、下拉组件Dropdown

    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">
        <li class="am-dropdown-header">标题</li>
        <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 class="am-divider"></li>
        <li><a href="#">天空海阔 要做最坚强的泡沫</a></li>
      </ul>
    </div>

    上拉列表

    在 .am-dropdown 上添加 .am-dropdown-up 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">
        <li class="am-dropdown-header">标题</li>
        <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 class="am-divider"></li>
        <li><a href="#">天空海阔 要做最坚强的泡沫</a></li>
      </ul>
    </div>

    下拉内容

     Copy
    <div class="am-dropdown" data-am-dropdown>
      <button class="am-btn am-btn-success am-dropdown-toggle">Dropdown <span class="am-icon-caret-down"></span></button>
      <div class="am-dropdown-content">
        <h2>I am what I am</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>I am what I am</h2>
          <p>
            多么高兴 在琉璃屋中快乐生活
            对世界说 甚么是光明和磊落
            我就是我 是颜色不一样的烟火
          </p>
        </div>
      </div>
    </div>

    调用方式

    通过 Data API

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

    通过 JS

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

     Copy
    <div id="doc-dropdown-justify-js" style=" 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">...</div>
      </div>
    </div>
    <script>
      $(function() {
        $('#doc-dropdown-js').dropdown({justify: '#doc-dropdown-justify-js'});
      });
    </script>

    方法

    • $(element).dropdown(options) 激活下拉功能;
    • $(element).dropdown('toggle') 下拉状态交替;
    • $(element).dropdown('close') 隐藏下拉菜单;
    • $(element).dropdown('open') 显示下拉菜单。
     Copy
      
    <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');
        $('#doc-dropdown-toggle').on('click', function(e) {
          $dropdown.dropdown('toggle');
          return false;
        });
    
        $('#doc-dropdown-open').on('click', function(e) {
          data.active ? alert('已经打开了,施主又何必再纠缠呢!') : $dropdown.dropdown('open');
          return false;
        });
    
        $('#doc-dropdown-close').on('click', function(e) {
          data.active ? $dropdown.dropdown('close') : alert('没有开哪有关,没有失哪有得!');
          return false;
        });
    
        $dropdown.on('open.dropdown.amui', function (e) {
          console.log('open event triggered');
        });
      });
    </script>

    参数说明

    参数类型默认描述
    boundary 选择器 window 下拉内容边界,避免下拉内容超过边界被遮盖截断
    justify 选择器 undefined 下拉内容适应宽度的元素

    自定义事件

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

    事件名称描述
    open.dropdown.amui 调用显示下拉框方法时立即触发
    opened.dropdown.amui 下拉框显示完成时触发
    close.dropdown.amui 调用隐藏方法时触发
    closed.dropdown.amui 下拉框关闭完成时触发
     Copy
    $(function() {
      $dropdown.on('open.dropdown.amui', function (e) {
        console.log('open event triggered');
      });
    });
  • 相关阅读:
    基于ZYNQ XC7Z045 FFG 900的高性能计算模块
    linux TCP数据包封装在SKB的过程分析
    关于 linux中TCP数据包(SKB)序列号的小笔记
    TCP的TIME_WAIT状态
    Linux-2.6.25 TCPIP函数调用大致流程
    Linux 下不经过BIOS重启(i386)
    Linux块设备加密之dm-crypt分析
    Device Mapper 代码分析
    Linux 下的一个全新的性能测量和调式诊断工具 Systemtap, 第 3 部分: Systemtap
    Linux 下的一个全新的性能测量和调式诊断工具 Systemtap, 第 2 部分: DTrace
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9014666.html
Copyright © 2011-2022 走看看