質問編集履歴

2

onsen ui を使用した場合のページのhtmlを掲載しました。

2020/03/29 01:24

投稿

hitomi_
hitomi_

スコア10

test CHANGED
File without changes
test CHANGED
@@ -4,134 +4,518 @@
4
4
 
5
5
 
6
6
 
7
+ ```javascript
8
+
9
+ <html lang="ja">
10
+
11
+ <head>
12
+
13
+ <meta charset="utf-8">
14
+
15
+ <meta name="viewport" content="width=device-width, user-scalable=no">
16
+
17
+ <link rel="stylesheet" href="css/style.css">
18
+
19
+ </head>
20
+
21
+ <body data-role="none" class="body">
22
+
23
+ <header class="header">
24
+
25
+ <img src="img/header.png" class="header-image">
26
+
27
+ </header>
28
+
29
+ <div class="siteContent">
30
+
31
+ <div class="input_data_your_data">
32
+
33
+ <h3 data-role="none">アカウント情報の入力</h3>
34
+
35
+ <div class="contact-form">
36
+
37
+ <!-- Form -->
38
+
39
+ <div class="bottom_space">
40
+
41
+ <form data-role="none" id="account" method="post" action="#">
42
+
43
+ <table data-role="none" class="your_form_table" id="your-form-table">
44
+
45
+ <tr data-role="none" class="your_form_tr">
46
+
47
+ <th data-role="none" class="your_form_left">
48
+
49
+ <label data-role="none" for="service_name">
50
+
51
+ サービス名
52
+
53
+ </label>
54
+
55
+ </th>
56
+
57
+ <td data-role="none" class="your_form_right">
58
+
59
+ <input data-role="none" type="text" name="service_name_0" id="service_name_0" class="your_input_text">
60
+
61
+ </td>
62
+
63
+ </tr>
64
+
65
+ <tr data-role="none">
66
+
67
+ <td data-role="none" class="your_bar" colspan="2"></td>
68
+
69
+ </tr>
70
+
71
+ <tr data-role="none" class="your_form_tr">
72
+
73
+ <th data-role="none" class="your_form_left">
74
+
75
+ <label data-role="none" for="service_id">
76
+
77
+ ログインID
78
+
79
+ </label>
80
+
81
+ </th>
82
+
83
+ <td data-role="none" class="your_form_right">
84
+
85
+ <input data-role="none" type="text" name="service_id_0" id="service_id_0" class="your_input_text">
86
+
87
+ </td>
88
+
89
+ </tr>
90
+
91
+ <tr data-role="none">
92
+
93
+ <td data-role="none" class="your_bar" colspan="2"></td>
94
+
95
+ </tr>
96
+
97
+ <tr data-role="none" class="your_form_tr">
98
+
99
+ <th data-role="none" class="your_form_left">
100
+
101
+ <label data-role="none" for="service_pass">
102
+
103
+ パスワード
104
+
105
+ </label>
106
+
107
+ </th>
108
+
109
+ <td data-role="none" class="your_form_right">
110
+
111
+ <input data-role="none" type="text" name="service_pass_0" id="service_pass_0" class="your_input_text">
112
+
113
+ </td>
114
+
115
+ </tr>
116
+
117
+ </table>
118
+
119
+ <input data-role="none" class="btn-flat-double-border-tsuika" id="account_0" type="button" onClick="Add(this);" value="登録する">
120
+
121
+ </form>
122
+
123
+ <div data-role="none" id="addtable">
124
+
125
+ </div>
126
+
127
+ <div class="bottom_space">
128
+
129
+ <input data-role="none" class="btn-flat-double-border-tsuika" id="add" type="button" onclick="AddTable();" value="アカウントを追加する">
130
+
131
+ </div>
132
+
133
+ <div>
134
+
135
+ <a data-role="none" href="your_data.html" class="btn-circle-border-simple">
136
+
137
+ 戻る
138
+
139
+ </a>
140
+
141
+ </div>
142
+
143
+ </div>
144
+
145
+ </div>
146
+
147
+ </div>
148
+
149
+ </div>
150
+
151
+ <script language="javascript" type="text/javascript">
152
+
153
+ var i = 0 ;
154
+
155
+ //読み込み時処理
156
+
157
+ document.addEventListener('DOMContentLoaded', function() {
158
+
159
+ Load();
160
+
161
+ }, false);
162
+
163
+ document.addEventListener('deviceready', function() {
164
+
165
+ Load();
166
+
167
+ }, false);
168
+
169
+
170
+
171
+ function Load(){
172
+
173
+ //ローカルストレージの読み込み
174
+
175
+ var argument_service_name = localStorage.getItem('service_name_' + i );
176
+
177
+ var argument_service_id = localStorage.getItem('service_id_' + i );
178
+
179
+ var argument_service_pass = localStorage.getItem('service_pass_' + i );
180
+
181
+ //変数に中身があるか確認
182
+
183
+ while(argument_service_name !== null) {
184
+
185
+ //ローカルストレージから挿入
186
+
187
+ document.getElementById('service_name_' + i ).value = argument_service_name;
188
+
189
+ document.getElementById('service_id_' + i ).value = argument_service_id;
190
+
191
+ document.getElementById('service_pass_' + i ).value = argument_service_pass;
192
+
193
+ //次のテーブルを作成、カウントアップ
194
+
195
+ AddTable();
196
+
197
+ //ローカルストレージの再読み込み
198
+
199
+ argument_service_name = localStorage.getItem('service_name_' + i );
200
+
201
+ argument_service_id = localStorage.getItem('service_id_' + i );
202
+
203
+ argument_service_pass = localStorage.getItem('service_pass_' + i );
204
+
205
+ }
206
+
207
+ }
208
+
209
+
210
+
211
+ //アカウント入力欄を追加する
212
+
213
+ function AddTable(){
214
+
215
+ i ++;
216
+
217
+ var newForm = document.createElement('form');
218
+
219
+ newForm.id = 'account_' + i;
220
+
221
+ newForm.className = 'data-role-none';
222
+
223
+
224
+
225
+ var service_name = document.createElement('input');
226
+
227
+ service_name.type = 'text';
228
+
229
+ service_name.id = 'service_name_' + i;
230
+
231
+ service_name.className = 'data-role-none';
232
+
233
+ service_name.className = 'your_input_text';
234
+
235
+
236
+
237
+ var service_id = document.createElement('input');
238
+
239
+ service_id.type = 'text';
240
+
241
+ service_id.id = 'service_id_' + i;
242
+
243
+ service_id.className = 'data-role-none';
244
+
245
+ service_id.className = 'your_input_text';
246
+
247
+
248
+
249
+ var service_pass = document.createElement('input');
250
+
251
+ service_pass.type = 'text';
252
+
253
+ service_pass.id = 'service_pass_' + i;
254
+
255
+ service_pass.className = 'data-role-none';
256
+
257
+ service_pass.className = 'your_input_text';
258
+
259
+
260
+
261
+ var div = document.createElement('div');
262
+
263
+ div.className = 'data-role-none';
264
+
265
+ div.className = 'bottom_space';
266
+
267
+
268
+
269
+ var table = document.createElement('table');
270
+
271
+ table.className = 'data-role-none';
272
+
273
+ table.className = 'your_form_table';
274
+
275
+ table.id = 'your_form_table'
276
+
277
+
278
+
279
+ var tr1 = document.createElement('tr');
280
+
281
+ tr1.className = 'your_form_tr';
282
+
283
+ tr1.className = 'data-role-none';
284
+
285
+ var tr2 = document.createElement('tr');
286
+
287
+ tr2.className = 'data-role-none';
288
+
289
+ tr2.className = 'your_form_tr';
290
+
291
+ var tr3 = document.createElement('tr');
292
+
293
+ tr3.className = 'data-role-none';
294
+
295
+ tr3.className = 'your_form_tr';
296
+
297
+
298
+
299
+ var th1 = document.createElement('th');
300
+
301
+ th1.className = 'data-role-none';
302
+
303
+ th1.className = 'your_form_left';
304
+
305
+ var th2 = document.createElement('th');
306
+
307
+ th2.className = 'data-role-none';
308
+
309
+ th2.className = 'your_form_left';
310
+
311
+ var th3 = document.createElement('th');
312
+
313
+ th3.className = 'data-role-none';
314
+
315
+ th3.className = 'your_form_left';
316
+
317
+
318
+
319
+ var td1 = document.createElement('td');
320
+
321
+ td1.className = 'data-role-none';
322
+
323
+ td1.className = 'your_form_right';
324
+
325
+ var td2 = document.createElement('td');
326
+
327
+ td2.className = 'data-role-none';
328
+
329
+ td2.className = 'your_form_right';
330
+
331
+ var td3 = document.createElement('td');
332
+
333
+ td3.className = 'data-role-none';
334
+
335
+ td3.className = 'your_form_right';
336
+
337
+
338
+
339
+ var lavel1 = document.createElement('lavel');
340
+
341
+ lavel1.className = 'lavel1'
342
+
343
+ var lavel2 = document.createElement('lavel');
344
+
345
+ lavel2.className = 'lavel2'
346
+
347
+ var lavel3 = document.createElement('lavel');
348
+
349
+ lavel3.className = 'lavel3'
350
+
351
+
352
+
353
+ var tr_bar1 = document.createElement('tr');
354
+
355
+ var td_bar1 = document.createElement('td');
356
+
357
+ td_bar1.className = 'data-role-none';
358
+
359
+ td_bar1.className = 'your_bar';
360
+
361
+ td_bar1.colSpan = '2';
362
+
363
+
364
+
365
+ var tr_bar2 = document.createElement('tr');
366
+
367
+ var td_bar2 = document.createElement('td');
368
+
369
+ td_bar2.className = 'data-role-none';
370
+
371
+ td_bar2.className = 'your_bar';
372
+
373
+ td_bar2.colSpan = '2';
374
+
375
+
376
+
377
+ var button = document.createElement('input');
378
+
379
+ button.className = 'data-role-none';
380
+
381
+ button.className = 'btn-flat-double-border-tsuika';
382
+
383
+ button.type = 'button';
384
+
385
+ button.id = 'account_' + i;
386
+
387
+ button.value = '登録する'
388
+
389
+ button.onclick = function(){
390
+
391
+ Add(this);
392
+
393
+ };
394
+
395
+
396
+
397
+ var parent = document.getElementById('addtable');
398
+
399
+
400
+
401
+ parent.appendChild(div);
402
+
403
+ div.appendChild(newForm);
404
+
405
+ newForm.appendChild(table);
406
+
407
+
408
+
409
+ table.appendChild(tr1);
410
+
411
+ tr1.appendChild(th1);
412
+
413
+ th1.appendChild(lavel1);
414
+
415
+ lavel1.innerHTML = "サービス名";
416
+
417
+ tr1.appendChild(td1);
418
+
419
+ td1.appendChild(service_name);
420
+
421
+ table.appendChild(tr_bar1);
422
+
423
+ tr_bar1.appendChild(td_bar1);
424
+
425
+
426
+
427
+ table.appendChild(tr2);
428
+
429
+ tr2.appendChild(th2);
430
+
431
+ th2.appendChild(lavel2);
432
+
433
+ lavel2.innerHTML = "ログインID";
434
+
435
+ tr2.appendChild(td2);
436
+
437
+ td2.appendChild(service_id);
438
+
439
+ table.appendChild(tr_bar2);
440
+
441
+ tr_bar2.appendChild(td_bar2);
442
+
443
+
444
+
445
+ table.appendChild(tr3);
446
+
447
+ tr3.appendChild(th3);
448
+
449
+ th3.appendChild(lavel3);
450
+
451
+ lavel3.innerHTML = "パスワード";
452
+
453
+ tr3.appendChild(td3);
454
+
455
+ td3.appendChild(service_pass);
456
+
457
+
458
+
459
+ newForm.appendChild(button);
460
+
461
+ }
462
+
463
+
464
+
465
+ //ローカルストレージに保存する
466
+
467
+ function Add(account_no) {
468
+
469
+ //フォームナンバーを変数に入れる
470
+
471
+ var idNo = account_no.id;//これだと「submit_0」
472
+
473
+ idNo = idNo.replace(/[^0-9]/g, '');//数字を取り出す
474
+
475
+
476
+
477
+ //ローカルストレージに保存する
478
+
479
+ var serviceName = document.getElementById('service_name_' + idNo).value;
480
+
481
+ var serviceId = document.getElementById('service_id_' + idNo).value;
482
+
483
+ var servicePass = document.getElementById('service_pass_' + idNo).value;
484
+
485
+
486
+
487
+ localStorage.setItem('service_name_' + idNo, serviceName);
488
+
489
+ localStorage.setItem('service_id_' + idNo, serviceId);
490
+
491
+ localStorage.setItem('service_pass_' + idNo, servicePass);
492
+
493
+
494
+
495
+ callDialog();
496
+
497
+ }
498
+
499
+ function callDialog(){
500
+
501
+ ons.notification.toast('Hi there!', { timeout: 1000, animation: 'ascend' });
502
+
503
+ }
504
+
505
+ </script>
506
+
507
+ </body>
508
+
509
+ </html>
510
+
511
+ ```
512
+
513
+
514
+
7
515
  OnsenUI以外のtoastでtoastrを使ってみましたが下記のエラーが出てしまいます。
8
516
 
9
517
  ReferenceError: Can't find variable: toastr
10
518
 
11
- ```javascript
12
-
13
- <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
14
-
15
- <link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" />
16
-
17
- <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
18
-
19
-
20
-
21
- <script language="javascript" type="text/javascript">
22
-
23
- //ローカルストレージに保存する
24
-
25
- function Add(account_no) {
26
-
27
- //フォームナンバーを変数に入れる
28
-
29
- var idNo = account_no.id;//これだと「submit_0」
30
-
31
- idNo = idNo.replace(/[^0-9]/g, '');//数字を取り出す
32
-
33
-
34
-
35
- //ローカルストレージに保存する
36
-
37
- var serviceName = document.getElementById('service_name_' + idNo).value;
38
-
39
- var serviceId = document.getElementById('service_id_' + idNo).value;
40
-
41
- var servicePass = document.getElementById('service_pass_' + idNo).value;
42
-
43
-
44
-
45
- localStorage.setItem('service_name_' + idNo, serviceName);
46
-
47
- localStorage.setItem('service_id_' + idNo, serviceId);
48
-
49
- localStorage.setItem('service_pass_' + idNo, servicePass);
50
-
51
-
52
-
53
- //オンラインストレージに登録
54
-
55
- var account = monaca.cloud.Collection("Account");
56
-
57
- console.log(idNo);
58
-
59
-
60
-
61
- account.findOneMine(monaca.cloud.Criteria("idno==?", [idNo]), {propertyNames: ["idno", "service_name", "service_id", "service_pass"]})
62
-
63
- .done(function(item)
64
-
65
- {
66
-
67
- if(item != null){
68
-
69
- item.service_name = serviceName;
70
-
71
- item.service_id = serviceId;
72
-
73
- item.service_pass = servicePass;
74
-
75
- item.update('success')
76
-
77
- .done(function(result)
78
-
79
- {
80
-
81
- console.log('Updating success');
82
-
83
- callDialog();
84
-
85
- })
86
-
87
- .fail(function(err)
88
-
89
- {
90
-
91
- console.log("Err#" + err.code +": " + err.message);
92
-
93
- });
94
-
95
- } else {
96
-
97
- account.insert({ idno: idNo, service_name: serviceName, service_id: serviceId, service_pass: servicPass})
98
-
99
- .done(function(insertedItem)
100
-
101
- {
102
-
103
- console.log('Insert is success!');
104
-
105
- })
106
-
107
- .fail(function(err)
108
-
109
- {
110
-
111
- console.log('Insert failed!');
112
-
113
- })
114
-
115
- }
116
-
117
- })
118
-
119
- .fail(function(err)
120
-
121
- {
122
-
123
- });
124
-
125
- function callDialog(){
126
-
127
- toastr.info('登録完了'); 
128
-
129
-  }
130
-
131
- </script>
132
-
133
- ```
134
-
135
519
 
136
520
 
137
521
  同じく、iziToastを試しても同じエラーが出ました。

1

環境を追記しました

2020/03/29 01:24

投稿

hitomi_
hitomi_

スコア10

test CHANGED
@@ -1 +1 @@
1
- Onsen UIのtoastをスクロールしてもページ下部に表示させたい
1
+ toastをスクロールしても常に画面下部に表示たい
test CHANGED
@@ -140,4 +140,10 @@
140
140
 
141
141
 
142
142
 
143
+ 環境:monacaIDE monacaデバッガー iphone7
144
+
145
+
146
+
143
- どのような方法でも良いので、スクロールしても画面下部に表示されるtoastの実装の仕方を教えてください。お願いします。
147
+ どのような方法でも良いので、スクロールしても画面下部に表示されるtoastの実装の仕方を教えてください。
148
+
149
+ お願いします。