<!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>
效果图:
相关推荐
NULL 博文链接:https://onestopweb.iteye.com/blog/2278105
AmazeUI 需要的同学可以下载。
Android UI控件组件库集合【源码】 热门标签,流式布局,刮刮乐控件,侧滑控件,循环幻灯片控件,自动换行控件,下拉列表,圆角进度控件等常用UI控件组件合集
下拉菜单是app开发中最常用的内容选择组件,避免用户录入的同时保证了数据准确性。...该资源就是SwiftUI 下拉菜单组件的经典源码。配套文章和组件运行效果:https://blog.csdn.net/iCloudEnd/article/details/128639428
AndroidP横屏项目,修改SystemUI下拉栏全屏显示,并覆盖NavigationBar导航栏之上,原博客 https://blog.csdn.net/shusuanly/article/details/115264404
带有图标和checkbox的下拉组件;下拉列表项中标题前面带有不同类型的小图标;后面是checkbox多选框;点击checkbox选择;与select2有些相似;弹又有些不一样 更多组件...
非常棒的树形下拉组件,一个下拉框可以弹出树形结构。支持可编辑,支持ajax加载数据。适合组织机构的选择。更多组件下载请访问:http://www.quickui.net/
含checkbox的多选下拉组件,功能很强大。选中后鼠标移入有提示所有选项。更多组件下载请访问:http://www.quickui.net/
zzChosen是结合jQuery-easy-ui的下拉列表与chosen的优点自制的下拉组件,它有以下功能特点: 1、支持多选搜索;当选项比较多的时候,还可以看到所有已选的项。 2、支持中文的拼音全拼字母、拼音首字母进行搜索,字母...
div+js自定义无级下拉组件,自定义宽高
jquery UI 下拉菜单
一个不错的jquery下拉列表选择菜单,经过适当的修饰之后变的相当帅气,懒人之家推荐下载
vue + elementui自定义按首字母排序下拉列表组件,可点击字母定位到对应选项,支持选中事件,可扩展
这个组件在手机端的页面中,同样可以借助AmazeUI这个前端框架实现。与此同时,可以在导航栏的最右方加一个触发侧边导航栏offCanvas。不要再使用BootStrap那种,一旦点击就大幅度下拉的导航了,反正我个人觉得很蛋疼...
基于vue封装的轻量级下拉刷新组件
适用于 Vue 2 的无限下拉组件
jquery-casecader一个jquery级联下拉组件
在使用Element-ui组件做项目开发时候有可能会使用下拉框组件,如果下拉框组件的option选项是使用v-if指令遍历的, 这样也没有问题,但是如果加上multiple属性,也就是可以多选 就会出现下拉框验证时失效问题. 问题现象:...
树状层级下拉菜单组件,支持层级勾选