qdqtrj
/
dyyj-app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css" />
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<style>
			h5 {
				padding-top: 15px;
			}
			
			.field-contain label {
				width: auto;
				padding-right: 0;
			}
			
			.field-contain input[type='text'] {
				width: 40px;
				height: 30px;
				padding: 5px 0;
				float: none;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">血压录入</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded">
				<br />
				<h5 style="clear: left;">高血压（mmHg）：<span id='block-range-val'>120</span></h5>
				<div class="mui-input-row mui-input-range">
					<input type="range" id='block-range' value="120" min="80" max="180">
				</div>
				<h5 style="clear: left;">低血压（mmHg）：<span id='block-range2-val'>80</span></h5>
				<div class="mui-input-row mui-input-range">
					<input type="range" id='block-range2' value="80" min="50" max="120">
				</div>
				<h5 style="clear: left;">脉搏（搏/分）：<span id='block-range3-val'>40</span></h5>
				<div class="mui-input-row mui-input-range">
					<input type="range" id='block-range3' value="40" min="15" max="80">
				</div>
				
				<h5 style="clear: left;">测量时间：</h5>
				<div class="">
					<button id='result' data-options='{}' class="btn mui-btn mui-btn-block">选择日期时间 ...</button>
				</div>
				<h5 style="clear: left;">补充：</h5>
				<div class="mui-input-row" style="margin: 10px 5px;">
					<textarea id="textarea" rows="5" placeholder="备注：今天有啥特殊情况，比如情绪不佳等"></textarea>
				</div>
				
				<center>
					<button type="button" class="mui-btn mui-btn-success" 
						style="font-size:20px;width: 80%;height:43px;margin-bottom:30px;" onclick="return false;">保&nbsp;&nbsp;&nbsp;存</button>
				</center>
			</div>
		</div>
	</body>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/mui.picker.min.js"></script>
	<script>
		mui.init({
			swipeBack: true //启用右滑关闭功能
		});
		//监听input事件，获取range的value值，也可以直接element.value获取该range的值
		var rangeList = document.querySelectorAll('input[type="range"]');
		for (var i = 0, len = rangeList.length; i < len; i++) {
			rangeList[i].addEventListener('input', function() {
				if (this.id.indexOf('field') >= 0) {
					document.getElementById(this.id + '-input').value = this.value;
				} else {
					document.getElementById(this.id + '-val').innerHTML = this.value;
				}
			});
		}
		  
		(function($) {
			$.init();
			var result = $('#result')[0];
			var btns = $('.btn');
			btns.each(function(i, btn) {
				btn.addEventListener('tap', function() {
					var optionsJson = this.getAttribute('data-options') || '{}';
					var options = JSON.parse(optionsJson);
					var id = this.getAttribute('id');
					/*
					 * 首次显示时实例化组件
					 * 示例为了简洁，将 options 放在了按钮的 dom 上
					 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
					 */
					var picker = new $.DtPicker(options);
					picker.show(function(rs) {
						/*
						 * rs.value 拼合后的 value
						 * rs.text 拼合后的 text
						 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
						 * rs.m 月，用法同年
						 * rs.d 日，用法同年
						 * rs.h 时，用法同年
						 * rs.i 分（minutes 的第二个字母），用法同年
						 */
						result.innerText = /*'选择结果: ' +*/ rs.text;
						/* 
						 * 返回 false 可以阻止选择框的关闭
						 * return false;
						 */
						/*
						 * 释放组件资源，释放后将将不能再操作组件
						 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
						 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
						 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
						 */
						picker.dispose();
					});
				}, false);
			});
		})(mui);
	</script>

</html>