<!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. 自己动手写CPU之第九阶段（7）——MIPS32中的LL、SC指令说明

    将陆续上传新书<自己动手写CPU>,今天是第46篇. 在MIPS32指令集中有两条特殊的存储载入指令:链接载入指令LL.条件存储指令SC,本次将介绍这两条指令.在兴许将实现这两条指令. 9 ...

  2. HUNNU-10307-最优分解问题

    点击打开题目连接 # include <queue> # include <cstdio> # include <cstring> # include <io ...

  3. Android经常使用的工具类

    主要介绍总结的Android开发中经常使用的工具类,大部分相同适用于Java. 眼下包含HttpUtils.DownloadManagerPro.ShellUtils.PackageUtils. Pr ...

  4. 设计模式学习笔记——Template Method模板方法模式

    可能是最简单的设计模式. 而且你我都用过而不自知. 因为,模板方法模式也者,就是面向对象中的继承.公用部分放在父类,子类继承父类,然后扩展.呵呵.

  5. hadoop 一些文件操作

    在HDFS上面,FileSystem创建目录 复制本地文件到HDFS 获取集群中的节点

  6. Struts2中Action接收参数

    Struts2中Action接收参数的方法主要有以下三种: Struts2中Action接收参数的方法主要有以下三种: 1.使用Action的属性接收参数:     a.定义:在Action类中定义属 ...

  7. CentOS 6.5 通过 PHP函数的sendmail 发送邮件

    非常多站点须要用到Sendmail函数发送激活邮件,在centos中内置了Sendmail模块,直接调用就可以,假设遇到问题,可採用例如以下两个步骤检測并解决: 1. 命令行输入:echo " ...

  8. 浅谈HTTPS连接

    相信很多朋友都遇到过网页被强插广告的情况,好端端一个干净的页面,动不动就被插了个屠龙宝刀点击就送的小窗口,看着就心烦.这种网页劫持强插广告的现象,在中国非常常见,往往是运营商进行HTTP劫持所造成的. ...

  9. update外联表，用另一个表数据更新本表数据

    update s set s.classbid = lc.itemidfrom    dbo.Lv_servers as s INNER JOIN dbo.Lv_LineChannel as lc O ...

  10. Linux时间子系统之三：时间的维护者：timekeeper【转】

    本文转载自:http://blog.csdn.net/droidphone/article/details/7989566 本系列文章的前两节讨论了用于计时的时钟源:clocksource,以及内核内 ...