<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.css" rel="stylesheet" />
<link rel="stylesheet" href="../css/mui.min.css">
<link href="css/mui.picker.css" rel="stylesheet" />
<link href="css/mui.poppicker.css" rel="stylesheet" />
<style type="text/css">
.mui-content>.mui-table-view:first-child {
margin-top: 8px;
}

.mui-bar-nav {
box-shadow: 0 1px 6px #FAFAFA;
background-color: #fff;
}

.mui-content {
background-color: #F7F7F7;
}

body {
font-family: 'Helvetica Neue', Helvetica, sans-serif;
font-size: 13px;
}

.mui-icon-back:before,
.mui-icon-left-nav:before {
color: #CCCCCC;
}

.mui-table-view-cell input {
text-align: right;
padding: 0px;
width: 70%;
right: 30px;
margin-bottom: 0;
border: none;
position: absolute;
height: 25px;
background: none;
}

</style>
</head>

<body>
<header id="header" class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left a"></a>
<h1 class="mui-title">我的资料</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view ">
<li class="mui-table-view-cell" id="showUserPicker">
<label class="mui-navigate-right">性别</label>
<input type="text" name="" id="userPicker" value="" readonly="readonly" />
</li>
</ul>

</div>

<script src="js/mui.js"></script>
<script src="js/mui.picker.js"></script>
<script src="js/mui.poppicker.js"></script>
<script type="text/javascript">
mui.init()
var userPicker = new mui.PopPicker();
userPicker.setData([{
value: 'man',
text: '女'
}, {
value: 'women',
text: '男'
}]);
var showUserPickerButton = document.getElementById('showUserPicker');
showUserPickerButton.addEventListener('tap', function(event) {
userPicker.show(function(items) {
let sex = JSON.stringify(items[0]);
console.log(sex);
document.getElementById('userPicker').value = JSON.parse(sex).text;
});
}, false);

</script>
</body>

</html>

mui中一级联动的更多相关文章

  1. [原创]关于mybatis中一级缓存和二级缓存的简单介绍

    关于mybatis中一级缓存和二级缓存的简单介绍 mybatis的一级缓存: MyBatis会在表示会话的SqlSession对象中建立一个简单的缓存,将每次查询到的结果结果缓存起来,当下次查询的时候 ...

  2. mui中的关闭页面的几种方法

    一.总结: mui中关闭当前页面的几种方式: 1.swipeBack(暂未测试过) 2.keyEventBind(暂未测试过) 3.给标签的class加.mui-action-back(返回的是前一个 ...

  3. SSM-MyBatis-17：Mybatis中一级缓存（主要是一级缓存存在性的证明，增删改对一级缓存会造成什么影响）

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 缓存------------------------------------------> 很熟悉的一个 ...

  4. 关于mui 中popover与下拉刷新冲突问题

    最近用mui做app混合式开发时,作为一个后端开发,高前端确实有点吃了,期间遇到的问题肯定也不少.这两天app做更新,为了装逼,将更新的提示搞得好看些,用到了mui中的popover,结果把自己整死了 ...

  5. Mui中常见问题记录

    1.mui中A标签如果有这个class="mui-control-item"时,a标签点击链接是没有反应的,那么可以用以下方式实现 : mui.init(); mui('body' ...

  6. 关于mybatis中一级缓存和二级缓存的简单介绍

    关于mybatis中一级缓存和二级缓存的简单介绍 mybatis的一级缓存: MyBatis会在表示会话的SqlSession对象中建立一个简单的缓存,将每次查询到的结果结果缓存起来,当下次查询的时候 ...

  7. JavaWeb_(Hibernate框架)Hibernate中一级缓存

    Hibernate中一级缓存 Hibernate 中的缓存分为一级缓存和二级缓存,这两个级别的缓存都位于持久化层,并且存储的都是数据库数据的备份.其中一级缓存是 Hibernate 的内置缓存,在前面 ...

  8. 数据可视化之powerBI基础（十四）Power BI中创建联动切片器

    https://zhuanlan.zhihu.com/p/67564062 进行数据分析时,每个分析维度并不总是独立的,比如省份是一个维度,城市也是一个维度,而这两个维度之间是有逻辑关系的,那么在进行 ...

  9. Hibernate中一级缓存和二级缓存使用详解

    一.一级缓存二级缓存的概念解释 (1)一级缓存就是Session级别的缓存,一个Session做了一个查询操作,它会把这个操作的结果放在一级缓存中,如果短时间内这个 session(一定要同一个ses ...

随机推荐

  1. hibernate的查询缓存和二级缓存的配合使用

    我的上一篇博客Hibernate缓存体系之查询缓存(query cache),以及list和iterate方法的差别介绍了查询缓存的概念,以及list和iterate的差别.读者可能注意到:那篇博客測 ...

  2. jquery 深入学习笔记之中的一个 （事件绑定）

    [jquery 事件绑定] 1.加入元素事件绑定 (1) 加入事件为当前元素 $('p').on('click',function(){ //code here ... }); (2) 加入事件为未来 ...

  3. linux下提示command not found

    首先就要考虑root 的$PATH里是否已经包含了这些环境变量. 主要是这四个:/bin ,/usr/bin,/sbin,/usr/sbin. 四个主要存放的东东: ./bin: bin为binary ...

  4. Hadoop源代码分析(完整版)

    Hadoop源代码分析(一) 关键字: 分布式云计算 Google的核心竞争技术是它的计算平台.Google的大牛们用了下面5篇文章,介绍了它们的计算设施. GoogleCluster:http:// ...

  5. XHTML中button加入超链接以及使插入图片与屏幕一样大

    1.button加入超链接 (1)假设是在本页跳转到新页面.用 <span style="font-size:18px;"><input type="b ...

  6. Xamarin Android 记事本（三）删改

    这篇我就不做太多的说明了,数据操作之前也都举过例子了,这里就直接贴出删除和修改的代码. public override bool OnOptionsItemSelected(IMenuItem ite ...

  7. Hadoop集群搭建-虚拟机安装(转)(一)

    1.软件准备 a).操作系统:CentOS-7-x86_64-DVD-1503-01 b).虚拟机:VMware-workstation-full-9.0.2-1031769(英文原版先安装)  VM ...

  8. python 1: 解决linux系统下python中的matplotlib模块内的pyplot输出图片不能显示中文的问题

    问题: 我在ubuntu14.04下用python中的matplotlib模块内的pyplot输出图片不能显示中文,怎么解决呢? 解决: 1.指定默认编码为UTF-8: 在python代码开头加入如下 ...

  9. java上传文件，提交表单必须要设置enctype="multipart/form-data"

    表单中enctype="multipart/form-data"的意思,是设置表单的MIME编码.默认情况,这个编码格式是application/x-www-form-urlenc ...

  10. 数据库连接池-配置 wallfilter问题解决-UncategorizedSQLException

    wallFilter对sql有着严格的校验,会对有风险的sql过滤,抛出异常信息: org.springframework.jdbc.UncategorizedSQLException: ### Er ...