<!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. 算法和流程控制 --《高性能JavaScript》

    总结: 1.for, while, do-while循环性能相当,并没有一种循环类型明显快于或满于其他类型. 2.避免使用for-in循环,除非要遍历一个属性数量未知的对象. 3.改善循环性能的最佳形 ...

  2. Jenkins+appium+testng持续集成

    Create maven project in eclipseAdd Appium , Selenium dependancyAdd Test in TestNG testCreate TestNG ...

  3. GDI泄露+改EXE名

    CDC 应该是成对使用 GetDC and ReleaseDC(不用new and delete) 泄露 1.改变生产exe名称:工程->设置->连接->输出文件名:Release/ ...

  4. Python 005- 使用Pyecharts来绘制各种各样的图形

    本文转载自:https://blog.csdn.net/qq_39143076/article/details/79065448,如有侵权,请联系删除啊 如何做Python 的数据可视化? pyech ...

  5. HDU 6155 Subsequence Count 线段树维护矩阵

    Subsequence Count Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 256000/256000 K (Java/Oth ...

  6. jquery和CSS3带倒影的3D万花筒旋转动画特效效果演示

    <!DOCTYPE html> <html> <head> <title></title> <meta charset='utf-8' ...

  7. Hive JOIN的基本操作 及 内部实现

    1.HIVE基本操作: [一起学Hive]之十一-Hive中Join的类型和用法 注:HIve不支持非等值连接: 什么是等值连接: //Oracle SQL 不等值连接 //通过不等值连接查找7788 ...

  8. VK Cup 2016 - Round 1 (Div. 2 Edition) C. Bear and Forgotten Tree 3

    C. Bear and Forgotten Tree 3 time limit per test 2 seconds memory limit per test 256 megabytes input ...

  9. FAT和FAT32文件系统的原理

    [转自] http://www.sjhf.net/Article/sjhfdoc/200404/1.html 一.硬盘的物理结构:     硬盘存储数据是根据电.磁转换原理实现的.硬盘由一个或几个表面 ...

  10. HDU3667 Transportation —— 最小费用流（费用与流量平方成正比）

    题目链接:https://vjudge.net/problem/HDU-3667 Transportation Time Limit: 2000/1000 MS (Java/Others)    Me ...