MUI框架 选择器的使用
js、css引用
<script type="text/javascript" src="librarys/mui/js/mui.min.js"></script>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="librarys/mui/css/mui.picker.min.css" />
<script type="text/javascript" src="librarys/mui/js/mui.picker.min.js"></script>
css
浮层样式
.mui-backdrop{
width: 100%;
height: 100%;
position: fixed;
bottom: 0;
background: rgba(0,0,0,.6);
}
html
<div><span>选择套餐</span><i placeholder="点击选择套餐" id="showUserPicker"></i></div>
js
document.querySelector('#showUserPicker').addEventListener("click", function() {
var roadPick = new mui.PopPicker();//获取弹出列表组建,假如是二联则在括号里面加入{layer:2}
roadPick.setData([{//设置弹出列表的信息,假如是二联,还需要一个children属性
value: "1",
text: "套餐一"
}, {
value: "2",
text: "套餐二"
}]);
roadPick.show(function(item) {//弹出列表并在里面写业务代码
var itemCallback=roadPick.getSelectedItems();
$('#showUserPicker').html(itemCallback[0].text);
});
});
MUI框架 选择器的使用的更多相关文章
- mui框架(二)
1.底部导航切换界面 HTML部分: <nav class="mui-bar mui-bar-tab"> <a id="defaultTab" ...
- 【MUI框架】学习笔记整理 Day 2
参考整理自MUI官网 http://dev.dcloud.net.cn/mui/ui/ (1)numbox(数字输入框) mui提供了数字输入框控件,可直接输入数字,也可以点击“+”.“-”按钮变换当 ...
- MUI框架-10-MUI 数据交互-跳转详情页面
MUI框架-10-MUI 数据交互-跳转详情页面 上一篇介绍了如何实现数据交互,给别人的 API 发送 ajax 请求,我们得到数据,再使用 art-template 模板引擎拼接 HTML,最终实现 ...
- MUI框架-05-用MUI做一个简单App
MUI框架-05-用MUI做一个简单App MUI 是一个前端框架,前端框架就像 Bootstrap,EasyUI,Vue ,为了做 app 呢,就有了更加高效的 MUI,我觉得前端框架有很多,也没有 ...
- mui框架中底部导航的跳转1
mui框架极大的方便了app的开发但是我们在做页面之间的切换时发现不能实现 a 链接的跳转,这是应为mui相关的一些控件是通过拦截a标签上的href来实现的,所以mui.js会阻止a标签上的href跳 ...
- MUI 框架微信支付
在MUI 框架中实现了支付宝支付后,以为MUI微信支付,也没什么大问题,结果这个问题困扰了我几天,后面再同事的提醒下终于弄出来了, 问题出在,开始使用Dcloud 公有证书 怎么也付不了....,后面 ...
- 用mui框架开发手机app项目实践中的那些事儿
http://www.yilingsj.com/xwzj/2015-04-29/260.html 最近在玩mui框架,坑的我是:西湖的水,全都是眼泪!!! 公司的手机app要进行改版,我率先想到的是j ...
- 跨平台移动端APP开发---简单高效的MUI框架
MUI是dcloud(数字天堂)公司旗下的一款跨平台开发移动APP的框架产品,在学习MUI框架之前,最先接触了Hbuilder代码编辑器,它带给我的第一感觉是快,这是HBuilder的最大优势,通过完 ...
- 初入APP(结合mui框架进行页面搭建)
前 言 博主最近在接触移动APP,学习了几个小技巧,和大家分享一下. 1. 状态栏设置 现在打开绝大多数APP,状态栏都是与APP一体,不仅美观,而且与整体协调.博主是个中度强迫症患者,顶部那个 ...
随机推荐
- js面试题——找到数组中的重复元素并判断重复次数且输出重复元素
var countArr = [1,2,3,4,5,6,3,4,3,3,7,8,9,32,1,11,2,3,3,3]; var res = {}; var maxnum=0; var max; fun ...
- gulp-load-task 解决 gulpfile.js 过大的问题
当我们在项目中使用gulp来实现前端自动化时,常常因任务太多导致gulpfile.js越来越臃肿,增加后期维护/变更成本.在计算机科学领域中,分治可以将我们的项目变得井然有序.所以,我们利用这个理念, ...
- jmeter-linux下运行
1.2 在命令行下运行脚本 将1.1中的脚本保存,在编辑是随时可以保存,保存后是一个jmx格式的文件(如图),这个就是要在命令行下运行的脚本(作为参数运行).这个脚本文件可以不包含1.1中第四和第五步 ...
- Web端测试和移动端测试
之前参加的项目有涉及Web端测试和移动端测试,简单的记录下他们之间的区别: 1.记录bug 在Web端可以通过系统自带的截图和QQ截图等方式来截取bug的图片,对于错误的地方可以用工具自带的标识来 ...
- ConcurrentHashMap的使用注意事项
有人说:虽然ConcurrentHashMap是线程安全的,但是在如下的代码中: ConcurrentHashMap<String,String> map; String getStrin ...
- DataTable自身查询方法
这里说到的查询有两种. 1.DataTable.Select 2.DataTable.Rows.Find a>先建立一个DataTable供使用吧. /// <summary> ...
- HUE配置文件hue.ini 的hbase模块详解(图文详解)(分HA集群和非HA集群)
不多说,直接上干货! 我的集群机器情况是 bigdatamaster(192.168.80.10).bigdataslave1(192.168.80.11)和bigdataslave2(192.168 ...
- WPF根据ScrollViewer的滚动条出现与否来设置触发器Trigger
先看一段代码 <Style.Triggers> <DataTrigger Binding="{Binding RelativeSource={RelativeSource ...
- Android JNI初体验
欢迎转载,转载请注明出处:http://www.cnblogs.com/lanrenxinxin/p/4696991.html 开始接触Android JNI层面的内容,推荐一本不错的入门级的书< ...
- sparkthriftserver启动及调优
Sparkthriftserver启用及优化 1. 概述 sparkthriftserver用于提供远程odbc调用,在远端执行hive sql查询.默认监听10000端口,Hiveserver2默 ...