大致是这样:

第一种方法:这种方法是使用5+的nativeUI原生动画

1)引入:mui.css或者mui.min.css

    mui.js或者mui.min.js也行

    mui.picker.min.js

代码:

  1. document.getElementById('触发对象的ID').addEventListener('tap', function() {
  2.  
  3.     if (mui.os.plus) {
  4.  
  5.       var a = [{
  6.  
  7.         title: "拍照" //这些都是可以点击的选项的内容
  8.  
  9.       }, {
  10.  
  11.         title: "从手机相册选择"
  12.  
  13.       }];
  14.  
  15.       plus.nativeUI.actionSheet({
  16.  
  17.         title: "修改用户头像", //这里就是这个弹窗的title
  18.  
  19.         cancel: "取消", //取消按钮
  20.  
  21.         buttons: a
  22.  
  23.       }, function(b) { /*actionSheet 按钮点击事件*/
  24.  
  25.         //这里面就是触发的事件,比如想做一个选择性别的弹窗,就可以通过a[b.index].title来获取当前点击了男还是女,注意,此处的b.index是从1开始的。要从0开始的话,要记得减1.
  26.  
  27.       })
  28.  
  29.     }
  30.  
  31.   }, false);

 第二种方法:使用mui自带的弹窗框actionsheet

 1.html

  1. <a href="#picture" class="mui-btn mui-btn-primary ">打开actionsheet</a>
  2.  
  3. <div id="picture" class="mui-popover mui-popover-action ">
  4. <ul class="mui-table-view">
  5. <li class="mui-table-view-cell">
  6. <a href="#">按钮1</a>
  7. </li>
  8. <li class="mui-table-view-cell">
  9. <a href="#">按钮2</a>
  10. </li>
  11. </ul>
  12. <ul class="mui-table-view">
  13. <li class="mui-table-view-cell">
  14. <a href="#picture"><b>取消</b></a>
  15. </li>
  16. </ul>
    </div>

2. js

  1. mui('#picture').on('tap', 'li>a', function() {
  2. mui.alert("你刚点击了\"" + this.innerHTML + "\"按钮");
  3. // mui("#picture").popover('toggle');//这是可以用来关闭底部弹窗的事件
  4. })

效果图:

MUI 底部弹出的选择框的更多相关文章

  1. pushbutton 移动端弹出列表选择框

    pushbutton 移动端弹出列表选择框 移动端从下往上推动画效果端弹出列表选择框,适应所有主流移动端机型,支持Node引入,require引入;如有用得不爽可以随时提意见,谢谢. demo地址: ...

  2. android 弹出日期选择框

    DatePickerDialog 在很多时候需要用户去设定时间,不可能让用户去在一个文本框中去输入时间,所以就需要有个日期弹出选择框,而这个框就是DatePickerDialog. 1.在API中的D ...

  3. layui文件上传中如何先判断后再弹出文件选择框

    前言:layui中的上传,如何在点击上传按钮前阻止file的默认打开文件选择框呢?我想点击后先判断下,如果判断结果不符合,就直接弹出提示框,而不是文件选择框,判断符合才进行文件选择.但是在layui的 ...

  4. js点击某个图标或按钮弹出文件选择框

    <HTML> <head> <script type="text/javascript" src="script/jquery-1.6.2. ...

  5. MUI 自定义从底部弹出的弹出框

    1)效果: 点击“点击就送”那个按钮之后,弹窗从底部弹出并自带蒙层,然后点击弹窗之外的灰色部分就从底部消失: 第一步:引入 mui.css或者mui.min.css 引入 mui.min.js或者mu ...

  6. [deviceone开发]-底部弹出选择

    一.简介 个人上传的第一个示例源码,两天空闲时间写的,一点简单组件,写的挺乱还没啥注释,仅供新手学习. 底部弹出选择,可滑动选择选项,如果停留在选项中间,可自动校正位置,加了一点简单的动画效果,需要的 ...

  7. 转 android 从底部弹出一个popuwindow,渐入渐出效果。我这里是用在购物车需要选择购买选项的操作。

    最近要改客户端,需要实现一个从底部弹出的popuwindow,像我这种渣渣android技术,能整出popuwindow但是整不出动画,百度之,记录一下. 从下面这个地址转的 http://blog. ...

  8. UIActionSheet底部弹出框

    <底部弹出框来提示用户信息>    1.遵循代理方法<UIActionSheetDelete>    2.调用放法 [UIActionSheet *sheet=[UIActio ...

  9. 通用的popupwindow底部弹出框

    前段时间做项目的时候,有几个底部弹出框,当时因为忙着赶进度所有就单独写了好几个popupwindow.后来就想着怎么实现一个通用的PopupWindow工具类 就是在要用到的时候创建该工具类的对象,并 ...

随机推荐

  1. combox的基本应用

    easyui-combox:控件的初始化: 可以在其中进行文字的筛选功能(过滤), 动态加载数据的方法. <!DOCTYPE html><html lang="en&quo ...

  2. 个人博客作业Week2 是否需要有代码规范

    问题:是否需要有代码规范 对于是否需要有代码规范,请考虑下列论点并反驳/支持: 1.这些规范都是官僚制度下产生的浪费大家的编程时间.影响人们开发效率, 浪费时间的东西. 2.我是个艺术家,手艺人,我有 ...

  3. 《linux内核设计与实现》第十八章

    第十八章 调试 调试工作艰难是内核级开发区别于用户级开发的一个显著特点. 一.准备开始 1.内和调试需要什么 一个bug(大部分bug通常都不是行为可靠而且定义明确的) 一个藏匿bug的内核版本(知道 ...

  4. 8 commands to check cpu information on Linux

    https://www.binarytides.com/linux-cpu-information/

  5. Maven 3.3全局配置

    Maven采用全局配置的方案: <?xml version="1.0" encoding="UTF-8"?> <!-- Licensed to ...

  6. Solution of wireless link "PCI unknown" on Centos 7.1

    Pick From http://www.blogjava.net/miaoyachun/archive/2015/09/17/427366.html After Centos 7.1 tobe in ...

  7. Java解析Excel

    前两天总结了些关于Excel和CSV结合TestNG进行数据驱动测试的例子,对于Excel存放TestCase和关键字如何进行解析,也做了对应的总结,希望在学习的路上勇往直前,有不对的地方,希望大家指 ...

  8. 【历史】- Windows NT 之父 - David Cutler

    David Cutler,大卫·卡特勒,一位传奇程序员,1988年去微软前号称硅谷最牛的内核开发人员,是VMS和Windows NT的首席设计师,被人们成为“操作系统天神”.他曾供职于杜邦.DEC等公 ...

  9. View.requestLayout

    参考:安卓高手之路之图形系统(6)requestLayout的流程 一.invalidate和postInvalidate 这两个方法都是在重绘当前控件的时候调用的.invalidate在UI线程中调 ...

  10. Spring MVC @ModelAttribute注解

    在一个Controller内,被@ModelAttribute标注的方法会在此controller的每个handler方法执行前被执行. 被@ModelAttribute标注的方法的参数绑定规则和普通 ...