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>