`

AmazeUI 下拉组件

 
阅读更多 
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>下拉组件</title>
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link rel="icon" type="image/png" href="assets/i/favicon.png">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Amaze UI"/>
<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileColor" content="#0e90d2">
<link rel="stylesheet" href="assets/css/amazeui.min.css">
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="assets/ie8/jquery.min.js"></script>
<script src="assets/ie8/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
</head>
<body style="margin: 100px;">
<!--下拉列表-->
<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>
<!--上拉列表-->
<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>
<!--下拉内容-->
<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>
<!--下拉宽度适应-->
<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>
<!--通过 JS-->
<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">...</div>
  </div>
</div>
<script>
  $(function() {
    $('#doc-dropdown-js').dropdown({justify: '#doc-dropdown-justify-js'});
  });
</script>
<div style="height: 100px;"></div>
<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>
</body>
</html>

 

效果图：

 

  • 大小: 6.6 KB
分享到：
| AmazeUI 按钮交互
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    AmazeUI 下拉选框

    你可以在提供的博文链接（https://onestopweb.iteye.com/blog/2278105）中找到更多关于AmazeUI下拉选框的示例代码和实践教程，学习如何在实际项目中应用。 10. **源码解析** 通过查看AmazeUI的源码，我们可以深入...

    AmazeUI框架

    AmazeUI提供了强大的表格组件，支持排序、分页、筛选等多种功能，可以方便地创建美观且实用的管理面板。 2. **admin-index.html**: 这是后台管理系统的首页，通常包含系统概览、快捷操作和通知等信息。AmazeUI的...

    amazeUI的使用

    - 组件丰富：AmazeUI包含了大量的预封装组件，如导航、表单、按钮、模态框、下拉菜单等，方便快速开发。 - 主题定制：AmazeUI支持自定义主题，可以通过修改CSS变量来改变整体风格。 2. **组件详解**： - **导航*...

    基于AmazeUI的漂亮后台模板

    AmazeUI包含了大量的组件和模块，如导航、表单、按钮、图标等，方便开发者构建各类页面。 二、模板设计特点 1. 简洁美观：这套后台模板以简洁明快的设计风格为主，注重用户体验，色彩搭配得当，布局清晰，符合现代...

    AmazeUI 弹出窗

    6. **插件扩展**：AmazeUI弹出窗可以与其他组件（如表单、下拉菜单等）结合使用，提供更丰富的功能。 7. **源码分析**：通过阅读源码，开发者可以了解其内部工作原理，以便进行深度定制或优化。 在实际应用中，...

    Amaze UI Admin后台管理系统模板

    Amaze UI提供了丰富的组件，如按钮、表格、下拉菜单、日期选择器等，大大简化了开发工作。 6. **HTML后台管理模板**：作为HTML模板，它可以直接用于构建Web应用的后端界面，无需复杂的前端框架配置，降低了开发难度...

    基于amazeui商城销售管理后台模板html源码

    4. **模块化组件**: AmazeUI提供了一系列可复用的组件，如按钮、表单、网格、导航、下拉菜单等，这些组件遵循移动优先的原则，简化了开发流程，提高了代码复用性和可维护性。 5. **Bootstrap启发**: 虽然AmazeUI...

    AmazeUI-2.2.1

    这两个文件可能包含AmazeUI的各种小部件，如按钮、下拉菜单、弹出框、时间线等，展示了如何在实际项目中使用这些组件。 4. **admin-form.html**: 这个文件可能展示了AmazeUI的表单（Form）组件，包括输入框、选择器...

    简单AmazeUI框架DEMO

    2. **组件丰富**：AmazeUI提供了多种常见UI组件，如导航、按钮、表单、下拉菜单、模态框、滑块、提示信息等，这些组件既美观又实用，大大简化了前端开发工作。 3. **主题定制**：AmazeUI支持自定义主题，开发者可以...

    react-使用AmazeUI的React版本打造的一套适用于博客和论坛的界面

    当AmazeUI与React结合时，我们可以利用React的组件化思想和AmazeUI的组件库，打造出一套适用于博客和论坛的高效、易用的界面。 首先，我们需要理解React的基本概念。React是Facebook推出的一个用于构建用户界面的...

    AmazeUI-2.5.0.zip

    版本号为2.5.0的AmazeUI包含丰富的组件，使得Web开发更加高效和便捷。下面将详细阐述AmazeUI的关键特性和在压缩包中的文件所代表的知识点。 1. **CSS组件**：AmazeUI 提供了近20个CSS组件，这些组件涵盖了布局、...

    AmazeUI 框架源码

    3. **组件丰富**：AmazeUI提供了丰富的组件库，包括导航、表单、按钮、网格系统、下拉菜单、模态框、轮播图等，这些组件都经过精心设计，易于集成到项目中，大大提升了开发效率。 4. **兼容性**：AmazeUI对浏览器的...

    Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件，更有多个包含不同主题的 Web 组件

    CSS（Cascading Style Sheets）是网页样式设计的核心，Amaze UI 的 CSS 组件涵盖了布局、表单、按钮、图标、导航等多个方面。例如： 1. **布局组件**：提供栅格系统，使得网页内容能够灵活地适应不同屏幕尺寸，实现...

    AmazeUI模板Web组件示例_AmazeUI博客blog简洁个人主页登录login前端框架.rar

    AmazeUI提供的组件丰富多样，包括按钮、表单、网格、下拉菜单、轮播图、提示框等，这些都使得开发者能够快速构建功能完备且具有良好用户体验的网页。其响应式设计使得网站能在不同设备上自适应显示，无论是在桌面、...

    Python+Flask(1)-AmazeUI后台管理开发框架

    AmazeUI提供了丰富的组件，如按钮、表单、下拉菜单等，可以帮助我们快速构建后台管理界面。在实际开发中，还可以结合数据库操作（如SQLAlchemy）实现数据的增删改查功能，以及使用Flask的Session和LoginManager模块...

    AmazeUI-2.3.0

    3. `widget.html`和`widget.basic.html`："Widget"指的是可复用的组件，这些文件可能是AmazeUI提供的小部件示例，如按钮、表单元素、下拉菜单等，`basic.html`可能是基础样式或功能的展示。 4. `admin-form.html`：...

    amazeui 移动网站开发框架

    AmazeUI的组件包括但不限于按钮、表单、表格、下拉菜单、轮播图、侧滑导航等，这些组件都是经过精心设计和优化的，旨在提供一致的用户体验。 `admin-table.html`、`admin-index.html`、`admin-form.html`这三份文件...

    AmazeUI后台管理框架

    AmazeUI的核心组件包括布局、表单、按钮、图标、下拉菜单、弹出层、滚动条等，这些都经过精心设计和优化，确保在各种设备上都能提供一致的体验。框架提供的CSS和JS经过gzip压缩后，大小控制在100kB左右，大大减少了...

    Amaze UI仿电脑版微信聊天界面代码

    5. **JavaScript组件**：Amaze UI 包含了许多JavaScript组件，如对话框、下拉菜单、轮播图等，这些组件在聊天界面中可能用于实现消息发送、表情选择、联系人列表等功能。JavaScript 还用于处理用户的交互事件，如...

Magicbox
Global site tag (gtag.js) - Google Analytics