simpleNote/add.html at master · ataraxia82/simpleNote · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

        <!-- mui -->
        <link type="text/css" rel="stylesheet" href="css/mui.min.css"/>
        <link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
		<style type="text/css">
	    	.mui-btn-block{
	    		border-color: #000;
	    	}
	    	.mui-btn-primary{
	    		background-color: #000;
	    	}
	    	.mui-pull-left{
	    		color: #000;
	    	}
	    </style>
        <script type="text/javascript" src="js/mui.js"></script>
	    <script type="text/javascript" charset="utf-8">
			mui.init({
//			    beforeback: function() {
//			　　　　 //获得父页面的webview
//			        var index = plus.webview.currentWebview().opener();
//			　　　　 //触发父页面的自定义事件(refresh),从而进行刷新
//			        mui.fire(index, 'refresh');
//			        //返回true,继续页面关闭逻辑
//			        return true;
//			    }
			});
	    </script>
    </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">
	            <div class="mui-input-row">
	                <input type="text" data-options='{}' class="mui-input-clear" placeholder="请选择时间" id="notetime">
	                </input>
	            </div>
	            <div class="mui-input-row">
	                <textarea rows="14" placeholder="请输入内容" id="noteinfo"></textarea>
	            </div>
	            <div class="mui-button-row">
	                <button class="mui-btn mui-btn-block mui-btn-primary addItemBtn">添加</button>
	            </div>
	        </div>
    	</div>
    </body>

    <script src="js/websql.js"></script>
	<script src="js/mui.picker.min.js"></script>
	<script>
		var h = function(){
			var t = document.querySelector('#notetime');
			var i = document.querySelector('#noteinfo');

			//如果是点击进入详情 则初始化数据
			var self = plus.webview.currentWebview();
		   	if(self.target) {
		   		var ti = document.querySelector('.mui-title');
		   		ti.innerText = '详情';

		   		var b = document.querySelector('.addItemBtn');
		   		b.innerText = '修改';

				var date = new Date(self.notetime * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
		        Y = date.getFullYear() + '-';
		        M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
		        D = date.getDate() < 10 ? '0'+(date.getDate())  + ' ' : date.getDate() + ' ';
		        h = date.getHours() < 10 ? '0'+(date.getHours() + ':') : date.getHours() + ':';
		        m = date.getMinutes() < 10 ? '0'+(date.getMinutes()) : date.getMinutes();
		        var ntime = Y+M+D+h+m;

		        //填入数据
		   		t.value = ntime;
		   		i.value = self.noteinfo;
		   	}

			var dt = document.querySelector('.mui-input-clear');
			dt.addEventListener('tap', function() {
				var _self = this;
				if(_self.picker) {
					_self.picker.show(function (rs) {
						result.innerText = '选择结果: ' + rs.text;
						_self.picker.dispose();
						_self.picker = null;
					});
				} else {
					var optionsJson = this.getAttribute('data-options') || '{}';
					var options = JSON.parse(optionsJson);
					var id = this.getAttribute('id');
					/*
					 * 首次显示时实例化组件
					 * 示例为了简洁，将 options 放在了按钮的 dom 上
					 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
					 */
					_self.picker = new mui.DtPicker(options);
					_self.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 的第二个字母），用法同年
						 */
						var today = new Date();
						today.setHours(0, 0, 0, 0);
						var tt = Date.parse(today)/1000;
						var d = new Date(rs.text);
						d.setHours(0, 0, 0, 0);
						var dd = Date.parse(d)/1000;
						if(dd < tt){
							mui.toast("不能选择之前日期！");
							_self.picker.dispose();
							_self.picker = null;
							return;
						}

						t.value = rs.text;
						/*
						 * 返回 false 可以阻止选择框的关闭
						 * return false;
						 */
						/*
						 * 释放组件资源，释放后将将不能再操作组件
						 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
						 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
						 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
						 */
						_self.picker.dispose();
						_self.picker = null;
					});
				}

			}, false);

			var btn = document.querySelector('.addItemBtn');
			btn.addEventListener('tap', function() {
				//如果是修改
			    var notetime = t.value;
			    var noteinfo = i.value.replace(/\n/g, '<br/>');

			    var d = new Date(notetime);
			    var ntime = Date.parse(d)/1000;
			    d.setHours(0, 0, 0, 0);
			    var ndate = Date.parse(d)/1000;

			    if(!notetime){
			        mui.toast('请选择时间！');
			    } else if(!noteinfo){
			        mui.toast('请输入内容！');
			    } else{
			    	//获取父页面
					var index = plus.webview.currentWebview().opener();

					mui.fire(index,'refresh',{
						id: self.target,
		                notetime:notetime,
					    noteinfo:noteinfo,
					    ndate:ndate,
					    ntime:ntime,
					    oldtime:self.notetime
					});
					//清空数据
					t.value = '';
					i.value = '';
					//返回
					mui.back();
			    }
			}, false);
		};

		mui.plusReady(h);
	</script>
</html>