回答編集履歴

2

kd001.html部分追加

2018/08/18 02:22

投稿

rururu3
rururu3

スコア5545

test CHANGED
@@ -335,3 +335,23 @@
335
335
  }
336
336
 
337
337
  ```
338
+
339
+
340
+
341
+ kd001.html
342
+
343
+ ```html
344
+
345
+ <ons-page id="page3-page">
346
+
347
+ <ons-toolbar>
348
+
349
+ <div class="left"><ons-back-button>Page 2</ons-back-button></div>
350
+
351
+ <div class="center"></div>
352
+
353
+ </ons-toolbar>
354
+
355
+ </ons-page>
356
+
357
+ ```

1

リンクで動くように

2018/08/18 02:21

投稿

rururu3
rururu3

スコア5545

test CHANGED
@@ -2,6 +2,12 @@
2
2
 
3
3
 
4
4
 
5
+ ※タブ部分は画像ないので変えてます
6
+
7
+ ※CSVデータがどんなのなのか不明なので適当にリンク先作ってます
8
+
9
+
10
+
5
11
  index.html
6
12
 
7
13
  ```html
@@ -32,7 +38,7 @@
32
38
 
33
39
  <link rel="stylesheet" href="css/style.css">
34
40
 
35
-
41
+ <script src="js/a1.js"></script>
36
42
 
37
43
  <script>
38
44
 
@@ -52,18 +58,28 @@
52
58
 
53
59
 
54
60
 
55
- if (page.matches('#first-page')) {
61
+ if (page.matches('#MENU1')) {
56
-
62
+
57
- titleElement.innerHTML = 'My app - Page 1';
63
+ titleElement.innerHTML = 'MENU1';
58
-
64
+
59
- } else if (page.matches('#second-page')) {
65
+ } else if (page.matches('#MENU2')) {
60
-
66
+
61
- titleElement.innerHTML = 'My app - Page 2';
67
+ titleElement.innerHTML = 'MENU2';
68
+
69
+ } else if (page.matches('#MENU3')) {
70
+
71
+ titleElement.innerHTML = 'MENU3';
72
+
73
+ } else if (page.matches('#MENU4')) {
74
+
75
+ titleElement.innerHTML = 'MENU4';
62
76
 
63
77
  }
64
78
 
65
79
  });
66
80
 
81
+
82
+
67
83
  </script>
68
84
 
69
85
  </head>
@@ -80,87 +96,113 @@
80
96
 
81
97
  <ons-tabbar position="auto">
82
98
 
83
- <ons-tab label="Tab 1" page="tab1.html" active>
99
+ <ons-tab page="MENU1.html" active>
100
+
101
+ <ons-icon icon="ion-home"></ons-icon>
84
102
 
85
103
  </ons-tab>
86
104
 
87
- <ons-tab label="Tab 2" page="tab2.html">
105
+ <ons-tab page="MENU2.html">
106
+
107
+ <ons-icon icon="ion-home"></ons-icon>
88
108
 
89
109
  </ons-tab>
90
110
 
111
+ <ons-tab page="MENU3.html">
112
+
113
+ <ons-icon icon="ion-home"></ons-icon>
114
+
115
+ </ons-tab>
116
+
117
+ <ons-tab page="MENU4.html">
118
+
119
+ <ons-icon icon="ion-home"></ons-icon>
120
+
121
+ </ons-tab>
122
+
91
123
  </ons-tabbar>
92
124
 
93
125
  </ons-page>
94
126
 
95
127
 
96
128
 
97
- <ons-template id="tab1.html">
129
+ <ons-template id="page1.html">
98
-
130
+
99
- <ons-page id="first-page">
131
+ <ons-page id="PAGE1">
132
+
100
-
133
+ <div id="k_list">
134
+
101
- <p style="text-align: center;">
135
+ <ul class="klist">
136
+
102
-
137
+ <div id="titlek"></div>
138
+
103
- </p>
139
+ </ul>
140
+
141
+ </div>
142
+
143
+ </ons-page>
144
+
145
+ </ons-template>
146
+
147
+
148
+
149
+ <!-- MENU1 -->
150
+
151
+ <ons-template id="MENU1.html">
152
+
153
+ <ons-page id="MENU1">
104
154
 
105
155
  <ons-navigator id="navigator" page="page1.html">
106
156
 
107
- </ons-navigator>
108
-
109
- </ons-page>
110
-
111
- </ons-template>
112
-
113
-
114
-
115
- <ons-template id="tab2.html">
116
-
117
- <ons-page id="second-page">
118
-
119
- <p style="text-align: center;">
120
-
121
- This is the second page.
122
-
123
- </p>
124
-
125
- </ons-page>
126
-
127
- </ons-template>
128
-
129
-
130
-
131
- <ons-template id="page1.html">
132
-
133
- <ons-page id="page1-page">
134
-
135
- <p style="text-align: center;">
136
-
137
- <ons-button onclick="document.querySelector('#navigator').pushPage('page2.html');">Push page2</ons-button>
138
-
139
- </p>
140
-
141
- </ons-page>
142
-
143
- </ons-template>
144
-
145
-
146
-
147
- <ons-template id="page2.html">
148
-
149
- <ons-page id="page2-page">
150
-
151
- <ons-toolbar>
152
-
153
- <div class="left"><ons-back-button>Page 2</ons-back-button></div>
154
-
155
- <div class="center"></div>
156
-
157
- </ons-toolbar>
158
-
159
- <ons-button onclick="document.querySelector('#navigator').pushPage('page3.html');">Push page3</ons-button>
160
-
161
- </ons-page>
162
-
163
- </ons-template>
157
+ </ons-navigator>
158
+
159
+ </ons-page>
160
+
161
+ </ons-template>
162
+
163
+
164
+
165
+ <!-- MENU2 -->
166
+
167
+ <ons-template id="MENU2.html">
168
+
169
+ <ons-page id="MENU2">
170
+
171
+ <div class="Menu2"></div>
172
+
173
+ </ons-page>
174
+
175
+ </ons-template>
176
+
177
+
178
+
179
+ <!-- MENU3 -->
180
+
181
+ <ons-template id="MENU3.html">
182
+
183
+ <ons-page id="MENU3">
184
+
185
+ <div class="Menu3"></div>
186
+
187
+ </ons-page>
188
+
189
+ </ons-template>
190
+
191
+
192
+
193
+ <!-- MENU4 -->
194
+
195
+ <ons-template id="MENU4.html">
196
+
197
+ <ons-page id="MENU4">
198
+
199
+ <div class="Menu4"></div>
200
+
201
+ </ons-page>
202
+
203
+ </ons-template>
204
+
205
+
164
206
 
165
207
  </body>
166
208
 
@@ -170,20 +212,126 @@
170
212
 
171
213
 
172
214
 
173
- page3.html
215
+ a1.js
174
-
216
+
175
- ```html
217
+ ```JavaScript
218
+
176
-
219
+ // This is a JavaScript file
220
+
221
+ //--------------------------------------------------------------------------------------------------------------------
222
+
223
+ // 一覧表示
224
+
225
+ //--------------------------------------------------------------------------------------------------------------------
226
+
177
- <ons-page id="page3-page">
227
+ window.onpageshow =function onLoad() {
228
+
178
-
229
+ getCSVFile_k();
230
+
231
+ }
232
+
233
+
234
+
235
+ //--------------------------------------------------------------------------------------------------------------------
236
+
237
+ //
238
+
239
+ //--------------------------------------------------------------------------------------------------------------------
240
+
241
+ function getCSVFile_k() {
242
+
243
+ var xhr = new XMLHttpRequest();
244
+
245
+ xhr.onload = function() {
246
+
247
+ createArray_k(xhr.responseText);
248
+
249
+ };
250
+
251
+ xhr.open("get", "DT/DT_KANZO_K.csv", true);
252
+
253
+ xhr.send(null);
254
+
255
+ }
256
+
257
+
258
+
259
+ function clickEvent(_href) {
260
+
179
- <ons-toolbar>
261
+ console.log(_href);
262
+
180
-
263
+ document.querySelector("#navigator").pushPage(_href);
264
+
265
+ }
266
+
267
+
268
+
269
+ //--------------------------------------------------------------------------------------------------------------------
270
+
271
+ // 一覧作成[K]
272
+
273
+ //--------------------------------------------------------------------------------------------------------------------
274
+
275
+ function createArray_k(csvData) {
276
+
277
+ var csvArrayk = [];
278
+
279
+ var tempArrayk = csvData.split("\n");
280
+
281
+ for(var i = 0; i<tempArrayk.length;++i){
282
+
283
+ csvArrayk[i] = tempArrayk[i].split(',');
284
+
285
+ };
286
+
287
+ var dtk = [];
288
+
289
+ var y = "";
290
+
291
+ var dd = 0;
292
+
293
+
294
+
295
+ for (var i=1; i<tempArrayk.length;++i){
296
+
181
- <div class="left"><ons-back-button>Page 2</ons-back-button></div>
297
+ if (y == "'"+ csvArrayk[i][1]+"'") {
298
+
182
-
299
+ continue;
300
+
301
+ }
302
+
303
+ else {
304
+
183
- <div class="center"></div>
305
+ y = "'"+ csvArrayk[i][1]+"'";
184
-
185
- </ons-toolbar>
306
+
186
-
187
- </ons-page>
307
+ if(csvArrayk[i][16]>0){
308
+
309
+ dd += 1
310
+
311
+ /*
312
+
313
+ dtk.push("<a href='kd001.html?" + y.slice(1,4) + "' id='ot" + dd + " target='_self' onclick= OnLinkClick("+ dd + ");>" +
314
+
315
+ "<li class='li_k'>" + y.slice(4,-1) + " <span id='r" + dd + "'><span id='yr" + dd + "'></span></li></a>");
316
+
317
+ */
318
+
319
+ var _href="kd001.html?1";
320
+
321
+ dtk.push("<a href='#' id='ot" + dd + "'" + ' onclick="clickEvent(\'' + _href + '\');">' +
322
+
323
+ "<li class='li_k'>" + y.slice(4,-1) + " <span id='r" + dd + "'><span id='yr" + dd + "'>aaa</span></li></a>");
324
+
325
+
326
+
327
+ document.getElementById("titlek").innerHTML = dtk.join('');
328
+
329
+ }
330
+
331
+ }
332
+
333
+ }
334
+
335
+ }
188
336
 
189
337
  ```