質問編集履歴

1

HTML/CSS/JS追記しました

2017/11/25 15:35

投稿

nnahito
nnahito

スコア2004

test CHANGED
File without changes
test CHANGED
@@ -103,3 +103,349 @@
103
103
 
104
104
 
105
105
  どのようにすれば縮小がうまくいくか、ご存じの方がいらっしゃいましたらご教示いただけますと幸いです。
106
+
107
+
108
+
109
+
110
+
111
+ # 追記
112
+
113
+ HTML/CSS/JSの全文
114
+
115
+
116
+
117
+ 呼んでいるJSライブラリ
118
+
119
+
120
+
121
+ - jQuery
122
+
123
+ - riot ( http://riotjs.com/ja/ )
124
+
125
+ - lattice ( https://github.com/nnahito/lattice )
126
+
127
+
128
+
129
+ ```html
130
+
131
+ <!DOCTYPE html>
132
+
133
+ <html lang="ja">
134
+
135
+
136
+
137
+ <head>
138
+
139
+ <title></title>
140
+
141
+ <meta charset="UTF-8">
142
+
143
+
144
+
145
+ <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
146
+
147
+ <script src="lattice.js?a"></script>
148
+
149
+
150
+
151
+ <style>
152
+
153
+
154
+
155
+ div{
156
+
157
+ margin: 5px;
158
+
159
+ }
160
+
161
+
162
+
163
+ #element {
164
+
165
+ border: 1px #e0e0e0 solid;
166
+
167
+ table-layout: fixed;
168
+
169
+ }
170
+
171
+
172
+
173
+ #element td{
174
+
175
+ border: 1px #e0e0e0 solid;
176
+
177
+ width: 50px !important;
178
+
179
+ height: 50px;
180
+
181
+ text-align: center;
182
+
183
+ vertical-align: middle;
184
+
185
+ }
186
+
187
+
188
+
189
+ .no-place{
190
+
191
+ background-color: #e0e0e0;
192
+
193
+ }
194
+
195
+
196
+
197
+ </style>
198
+
199
+
200
+
201
+ </head>
202
+
203
+
204
+
205
+ <body>
206
+
207
+
208
+
209
+ <div>
210
+
211
+ <button id="add_row">行を追加</button>
212
+
213
+ <button id="add_col">列を追加</button>
214
+
215
+ <button id="del_row">行を削除</button>
216
+
217
+ <button id="del_col">列を削除</button>
218
+
219
+ <br>
220
+
221
+ <button id="get_table">中身を取得</button>
222
+
223
+ <br>
224
+
225
+ <label>
226
+
227
+ <input type="checkbox" id="no-place">灰色にする
228
+
229
+ </label>
230
+
231
+ </div>
232
+
233
+
234
+
235
+ <hr>
236
+
237
+
238
+
239
+ <table id="element">
240
+
241
+
242
+
243
+ </table>
244
+
245
+
246
+
247
+ <hr>
248
+
249
+ <div id="out_json_text"></div>
250
+
251
+
252
+
253
+
254
+
255
+ <script>
256
+
257
+ var $Lattice;
258
+
259
+
260
+
261
+
262
+
263
+ $(document).ready(function(){
264
+
265
+
266
+
267
+ $Lattice = new Lattice('#element', 'a', 100, 100);
268
+
269
+ $Lattice.initialize();
270
+
271
+
272
+
273
+ // ウインドウのサイズ
274
+
275
+ let window_width = $(window).width();
276
+
277
+
278
+
279
+ // セルの幅
280
+
281
+ let cell_width = $('#element td').width();
282
+
283
+
284
+
285
+ // テーブルの幅
286
+
287
+ table_width = cell_width * 100;
288
+
289
+
290
+
291
+ // テーブルの幅を拡張
292
+
293
+ $('#element').css('width', table_width);
294
+
295
+
296
+
297
+ // 横スクロールの幅取得
298
+
299
+ let scrollsize = document.body.scrollWidth;
300
+
301
+
302
+
303
+ let zoom = window_width / scrollsize;
304
+
305
+
306
+
307
+ // 画面いっぱいになるまで、ズームアウト
308
+
309
+ //$('#element').css('transform', 'scale('+ zoom +', 1)');
310
+
311
+ //
312
+
313
+ // console.log(scrollsize);
314
+
315
+ // console.log(window_width);
316
+
317
+ // console.log(zoom);
318
+
319
+
320
+
321
+ });
322
+
323
+
324
+
325
+
326
+
327
+ /**
328
+
329
+ * 行を追加
330
+
331
+ */
332
+
333
+ $('#add_row').on('click', function(){
334
+
335
+ $Lattice.addRow();
336
+
337
+ });
338
+
339
+
340
+
341
+
342
+
343
+ /**
344
+
345
+ * 列を追加
346
+
347
+ */
348
+
349
+ $('#add_col').on('click', function(){
350
+
351
+ $Lattice.addCol();
352
+
353
+ });
354
+
355
+
356
+
357
+
358
+
359
+ /**
360
+
361
+ * 行を削除
362
+
363
+ */
364
+
365
+ $('#del_row').on('click', function(){
366
+
367
+ $Lattice.removeRow();
368
+
369
+ });
370
+
371
+
372
+
373
+
374
+
375
+ /**
376
+
377
+ * 列を削除
378
+
379
+ */
380
+
381
+ $('#del_col').on('click', function(){
382
+
383
+ $Lattice.removeCol();
384
+
385
+ });
386
+
387
+
388
+
389
+
390
+
391
+ /**
392
+
393
+ * データを保存
394
+
395
+ */
396
+
397
+ $('#get_table').on('click', function(){
398
+
399
+ let json = $Lattice.get();
400
+
401
+
402
+
403
+ $('#out_json_text').text(JSON.stringify(json));
404
+
405
+ });
406
+
407
+
408
+
409
+
410
+
411
+ /**
412
+
413
+ * セルがクリックされたとき
414
+
415
+ */
416
+
417
+ $(document).on('click', '#element td', function(){
418
+
419
+
420
+
421
+ // 灰色にするボタン
422
+
423
+ if ( $('#no-place').prop('checked') ){
424
+
425
+ $(this).addClass('no-place');
426
+
427
+ } else {
428
+
429
+ $(this).removeClass('no-place');
430
+
431
+ }
432
+
433
+
434
+
435
+
436
+
437
+
438
+
439
+ });
440
+
441
+ </script>
442
+
443
+
444
+
445
+ </body>
446
+
447
+ </html>
448
+
449
+
450
+
451
+ ```