大致是这样:

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

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

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

    mui.picker.min.js

代码:

 document.getElementById('触发对象的ID').addEventListener('tap', function() { 

     if (mui.os.plus) { 

       var a = [{ 

         title: "拍照"          //这些都是可以点击的选项的内容

       }, { 

         title: "从手机相册选择" 

       }]; 

       plus.nativeUI.actionSheet({ 

         title: "修改用户头像",           //这里就是这个弹窗的title

         cancel: "取消",                     //取消按钮

         buttons: a 

       }, function(b) { /*actionSheet 按钮点击事件*/ 

         //这里面就是触发的事件,比如想做一个选择性别的弹窗,就可以通过a[b.index].title来获取当前点击了男还是女,注意,此处的b.index是从1开始的。要从0开始的话,要记得减1.

       }) 

     } 

   }, false);

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

 1.html

<a href="#picture" class="mui-btn mui-btn-primary ">打开actionsheet</a>

<div id="picture" class="mui-popover mui-popover-action ">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#">按钮1</a>
</li>
<li class="mui-table-view-cell">
<a href="#">按钮2</a>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#picture"><b>取消</b></a>
</li>
</ul>
</div>

2. js

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

效果图:

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. 小学生四则运算App实验成果

    组名:会飞的小鸟 组员:徐侃 陈志棚  罗伟业 刘芮熔 —成员分工: —①刘芮熔:设置安卓包.界面的代码,界面的排序. —②陈志棚:加减乘除的判断异常处理,例如除数不能为零的异常处理等问题. —③徐侃 ...

  2. Maven项目中添加JDBC驱动

    在pom.xml配置文件中添加: <dependency> <groupId>mysql</groupId> <artifactId>mysql-con ...

  3. debug网页时小问题The source attachment does not contain the source for the file

    第一次debug总是出现下图问题,提示我没加源码... The source attachment does not contain the source for the file ... 解决方法: ...

  4. shell脚本--文件包含

    首先介绍一下shell中包含文件的方法,在C,C++,PHP中都是用include来包含文件,Go和Java使用import来包含(导入)包,而在shell中,很简单,只需要一个点“.”,然后跟着文件 ...

  5. 链表数据结构(C/C++语言实现)

    注意:没有使用malloc和free:加了一个头文件,用于清屏和暂停:还有就是一个错误特别容易被忽略,那就是主函数中声明了LinkList p,然后就直接创建链表,忘了给p分配空间.一定要先初始化链表 ...

  6. PHP利用GD库处理图片方法实现

    这里写的是完成每个功能的函数,可以复制单个函数直接使用,这里的每个函数都是另外一篇PHP常用类------图片处理类Image当中的方法进行细化,可以参考一下 废话不多说,直接付代码吧! 添加水印(文 ...

  7. PAT 1047 编程团体赛

    https://pintia.cn/problem-sets/994805260223102976/problems/994805277163896832 编程团体赛的规则为:每个参赛队由若干队员组成 ...

  8. JEECG--去掉(增加)登陆页面验证码功能 - CSDN博客

    JEECG--去掉(增加)登陆页面验证码功能 - CSDN博客https://blog.csdn.net/KooKing_L/article/details/79711379

  9. WinForm(WPF) splash screen demo with C#

    https://www.codeproject.com/Articles/21062/Splash-Screen-Control https://www.codeproject.com/Article ...

  10. C语言复制文件的两种简单的方法【从根本解决问题】

    网上的方法大致有这样几种: 1.使用操作系统提供的复制文件的API 2.使用C语言本身提供的复制文件的函数 3.直接读写文件,从文件角度来操作,从而直接将一个文件复制 这里我们使用的就是这第三种. 复 ...