<!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. eclipse中progress一直在刷新问题处理

  2. 优化你的服务器Apache、MySQL、PHP

    硬件上的考虑其实起50%的作用,当然是越快越好.如果不知道哪个快,就换成越贵越好.可实际上不可能做到这些,因为银子有限,所以按照这个顺序考虑:内存越大越好->硬盘SCSI好于SATA->C ...

  3. plsql 无需配置客户端连接.

    plsql 无需配置客户端连接. (DESCRIPTION=(ADDRESS_LIST=(ADDRESS=(PROTOCOL=TCP)(HOST=192.168.0.5)(PORT=1521)))(C ...

  4. Java Unit Testing - JUnit & TestNG

    转自https://www3.ntu.edu.sg/home/ehchua/programming/java/JavaUnitTesting.html yet another insignifican ...

  5. cmd下并行执行appium +maven+Testng test

    1: first: open two command wins to start appium: appium -p 4725 -bp 4726 -U EP7333W0UR appium -p 472 ...

  6. 理解和使用WPF 验证机制

    博客 学院 下载 更多 写博客 发布Chat 登录注册 理解和使用WPF 验证机制 原创 2013年06月20日 11:15:37 7404 首先建立一个demo用以学习和实验WPF Data Val ...

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

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

  8. spin_lock、spin_lock_irq、spin_lock_irqsave区别

    void spin_lock(spinlock_t *lock); void spin_lock_irq(spinlock_t *lock); void spin_lock_irqsave(spinl ...

  9. 深入浅出Oracle学习笔记：Undo

    undo的作用是:解决oracle多用户读写一致性,以及操作可撤销或者回滚. 1.undo表空间是从10g开始进行自动管理的,几个参数如下: undo_management:回滚段手动管理还是自动管理 ...

  10. 用JS或jQuery访问页面内的iframe

    用JS或jQuery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的!假设有两个页面,在相同域下.index.html 文件内含有一个iframe: <!DOCTYPE ...