MUI 底部弹出的选择框
大致是这样:
第一种方法:这种方法是使用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 底部弹出的选择框的更多相关文章
- pushbutton 移动端弹出列表选择框
pushbutton 移动端弹出列表选择框 移动端从下往上推动画效果端弹出列表选择框,适应所有主流移动端机型,支持Node引入,require引入;如有用得不爽可以随时提意见,谢谢. demo地址: ...
- android 弹出日期选择框
DatePickerDialog 在很多时候需要用户去设定时间,不可能让用户去在一个文本框中去输入时间,所以就需要有个日期弹出选择框,而这个框就是DatePickerDialog. 1.在API中的D ...
- layui文件上传中如何先判断后再弹出文件选择框
前言:layui中的上传,如何在点击上传按钮前阻止file的默认打开文件选择框呢?我想点击后先判断下,如果判断结果不符合,就直接弹出提示框,而不是文件选择框,判断符合才进行文件选择.但是在layui的 ...
- js点击某个图标或按钮弹出文件选择框
<HTML> <head> <script type="text/javascript" src="script/jquery-1.6.2. ...
- MUI 自定义从底部弹出的弹出框
1)效果: 点击“点击就送”那个按钮之后,弹窗从底部弹出并自带蒙层,然后点击弹窗之外的灰色部分就从底部消失: 第一步:引入 mui.css或者mui.min.css 引入 mui.min.js或者mu ...
- [deviceone开发]-底部弹出选择
一.简介 个人上传的第一个示例源码,两天空闲时间写的,一点简单组件,写的挺乱还没啥注释,仅供新手学习. 底部弹出选择,可滑动选择选项,如果停留在选项中间,可自动校正位置,加了一点简单的动画效果,需要的 ...
- 转 android 从底部弹出一个popuwindow,渐入渐出效果。我这里是用在购物车需要选择购买选项的操作。
最近要改客户端,需要实现一个从底部弹出的popuwindow,像我这种渣渣android技术,能整出popuwindow但是整不出动画,百度之,记录一下. 从下面这个地址转的 http://blog. ...
- UIActionSheet底部弹出框
<底部弹出框来提示用户信息> 1.遵循代理方法<UIActionSheetDelete> 2.调用放法 [UIActionSheet *sheet=[UIActio ...
- 通用的popupwindow底部弹出框
前段时间做项目的时候,有几个底部弹出框,当时因为忙着赶进度所有就单独写了好几个popupwindow.后来就想着怎么实现一个通用的PopupWindow工具类 就是在要用到的时候创建该工具类的对象,并 ...
随机推荐
- combox的基本应用
easyui-combox:控件的初始化: 可以在其中进行文字的筛选功能(过滤), 动态加载数据的方法. <!DOCTYPE html><html lang="en&quo ...
- 个人博客作业Week2 是否需要有代码规范
问题:是否需要有代码规范 对于是否需要有代码规范,请考虑下列论点并反驳/支持: 1.这些规范都是官僚制度下产生的浪费大家的编程时间.影响人们开发效率, 浪费时间的东西. 2.我是个艺术家,手艺人,我有 ...
- 《linux内核设计与实现》第十八章
第十八章 调试 调试工作艰难是内核级开发区别于用户级开发的一个显著特点. 一.准备开始 1.内和调试需要什么 一个bug(大部分bug通常都不是行为可靠而且定义明确的) 一个藏匿bug的内核版本(知道 ...
- 8 commands to check cpu information on Linux
https://www.binarytides.com/linux-cpu-information/
- Maven 3.3全局配置
Maven采用全局配置的方案: <?xml version="1.0" encoding="UTF-8"?> <!-- Licensed to ...
- 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 ...
- Java解析Excel
前两天总结了些关于Excel和CSV结合TestNG进行数据驱动测试的例子,对于Excel存放TestCase和关键字如何进行解析,也做了对应的总结,希望在学习的路上勇往直前,有不对的地方,希望大家指 ...
- 【历史】- Windows NT 之父 - David Cutler
David Cutler,大卫·卡特勒,一位传奇程序员,1988年去微软前号称硅谷最牛的内核开发人员,是VMS和Windows NT的首席设计师,被人们成为“操作系统天神”.他曾供职于杜邦.DEC等公 ...
- View.requestLayout
参考:安卓高手之路之图形系统(6)requestLayout的流程 一.invalidate和postInvalidate 这两个方法都是在重绘当前控件的时候调用的.invalidate在UI线程中调 ...
- Spring MVC @ModelAttribute注解
在一个Controller内,被@ModelAttribute标注的方法会在此controller的每个handler方法执行前被执行. 被@ModelAttribute标注的方法的参数绑定规则和普通 ...