質問編集履歴
1
進歩状況を反映
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -328,7 +328,7 @@
|
|
|
328
328
|
|
|
329
329
|
|
|
330
330
|
|
|
331
|
-
JavaScriptによる実装の途中
|
|
331
|
+
JavaScriptによる実装の途中(随時更新)
|
|
332
332
|
|
|
333
333
|
表示・非表示はjQueryとは違って`.hidden { display: none }`というクラスを使って行う予定
|
|
334
334
|
|
|
@@ -408,17 +408,107 @@
|
|
|
408
408
|
|
|
409
409
|
|
|
410
410
|
|
|
411
|
-
// ページ
|
|
411
|
+
// 最後のページ
|
|
412
412
|
|
|
413
413
|
var last = Math.ceil( length / split );
|
|
414
414
|
|
|
415
|
+
// 現在のページ
|
|
416
|
+
|
|
415
417
|
var current = 1;
|
|
416
418
|
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
419
|
+
|
|
420
|
+
|
|
421
|
+
// ページ送り用のノードを作成
|
|
422
|
+
|
|
423
|
+
var pagenations = document.createDocumentFragment();
|
|
424
|
+
|
|
425
|
+
|
|
426
|
+
|
|
427
|
+
// ページ送りをノードに追加
|
|
428
|
+
|
|
429
|
+
var pagenation = document.createElement( 'div' );
|
|
430
|
+
|
|
431
|
+
pagenation.className = 'list-pagenation';
|
|
432
|
+
|
|
433
|
+
pagenations.appendChild( pagenation );
|
|
434
|
+
|
|
435
|
+
|
|
436
|
+
|
|
437
|
+
// 前へ戻るボタンをページ送りに追加
|
|
438
|
+
|
|
439
|
+
var page_prev = document.createElement( 'span' );
|
|
440
|
+
|
|
441
|
+
page_prev.className = 'list-prev';
|
|
442
|
+
|
|
443
|
+
page_prev.appendChild( document.createTextNode( 'Prev' ) );
|
|
444
|
+
|
|
445
|
+
pagenation.appendChild( page_prev );
|
|
446
|
+
|
|
447
|
+
|
|
448
|
+
|
|
449
|
+
// 次へ進むボタンをページ送りに追加
|
|
450
|
+
|
|
451
|
+
var page_next = document.createElement( 'span' );
|
|
452
|
+
|
|
453
|
+
page_next.className = 'list-next';
|
|
454
|
+
|
|
455
|
+
page_next.appendChild( document.createTextNode( 'Next' ) );
|
|
456
|
+
|
|
457
|
+
pagenation.appendChild( page_next );
|
|
458
|
+
|
|
459
|
+
|
|
460
|
+
|
|
461
|
+
// カウンターをノードに追加
|
|
462
|
+
|
|
463
|
+
var page_counter = document.createElement( 'span' );
|
|
464
|
+
|
|
465
|
+
page_counter.className = 'counter';
|
|
466
|
+
|
|
467
|
+
pagenations.appendChild( page_counter );
|
|
468
|
+
|
|
469
|
+
|
|
470
|
+
|
|
471
|
+
// 現在のページをカウンターに追加
|
|
472
|
+
|
|
473
|
+
var page_current = document.createElement( 'span' );
|
|
474
|
+
|
|
475
|
+
page_current.className = 'current';
|
|
476
|
+
|
|
477
|
+
page_current.appendChild( document.createTextNode( current ) );
|
|
478
|
+
|
|
479
|
+
page_counter.appendChild( page_current );
|
|
480
|
+
|
|
481
|
+
|
|
482
|
+
|
|
483
|
+
// ページ表示の区切りをカウンターに追加
|
|
484
|
+
|
|
485
|
+
var partition = document.createTextNode( '/' );
|
|
486
|
+
|
|
487
|
+
page_counter.appendChild( partition );
|
|
488
|
+
|
|
489
|
+
|
|
490
|
+
|
|
491
|
+
// 最後のページをカウンターに追加
|
|
492
|
+
|
|
493
|
+
var page_last = document.createElement( 'span' );
|
|
494
|
+
|
|
495
|
+
page_last.className = 'last';
|
|
496
|
+
|
|
497
|
+
page_last.appendChild( document.createTextNode( last ) );
|
|
498
|
+
|
|
499
|
+
page_counter.appendChild( page_last );
|
|
500
|
+
|
|
501
|
+
|
|
502
|
+
|
|
503
|
+
var list_parent = list[0].parentNode;
|
|
504
|
+
|
|
505
|
+
list_parent.insertBefore( pagenations, list[0] );
|
|
506
|
+
|
|
507
|
+
|
|
508
|
+
|
|
509
|
+
// 課題1: ページ送りを各リストの直前に挿入する
|
|
510
|
+
|
|
511
|
+
// 課題2: 変数 last の値を各リストと連動した形で反映させる
|
|
422
512
|
|
|
423
513
|
}
|
|
424
514
|
|