ページ分割を行うには?
- 詳細
- カテゴリ: テンプレート
- 作成日:2016-08-30
PCサイトでは1ページで表示されている長い入力フォームなどをスマホサイトでは擬似的に複数ページに分割することが可能です。
ただし、あくまで擬似的なページ分割のため、ページ切り替え時に入力項目のバリデーションチェックなどを行うことはできません。
下記リンク先のようなHTMLを想定します。
サンプル1
スマホ画面でページ分割したい部分を決定し、クラスを付与します。
5項目目でページを分割することを想定する場合、以下のようにgc-scriptを記述します。
<gc-script>
//prevAll()はセレクタ自身を含まないため.andSelf()でセレクタ自身を取得する
$('table.example tr.question5').prevAll().andSelf().addClass('page1');
//5項目目以降は2ページ目にするため別のクラスを付与
$('table.example tr.question5').nextAll().addClass('page2');
//送信ボタンは2ページ目になるためクラス付与
$('div.buttons').addClass('page2');
//分割したページを制御するため、ボタンを追加します。
//次へボタンを追加
$('table.example').after($('<p class="next page1">次へ</p>'));
//戻るボタンを追加
$('div.buttons').prepend($('<p class="back">戻る</p>'));
</gc-script>
追加したボタンでページ制御ができるようにスクリプトを記述します。
<script>
//次へボタン押下時の挙動
$('p.next').click(function(){
//複数要素に影響させるため、クラスセレクタで指定
//1ページ目の要素を非表示にする
$('.page1').css('display' , 'none');
//2ページ目の要素を表示する
$('.page2').css('display' , 'table');
//対象がtableではなくブロック要素の場合には"table"ではなく"block"を指定してください。
});
//戻るボタン押下時の挙動
$('p.back').click(function(){
//複数要素に影響させるため、クラスセレクタで指定
//1ページ目の要素を表示する
$('.page1').css('display' , 'table');
//対象がtableではなくブロック要素の場合には"table"ではなく"block"を指定してください。
//2ページ目の要素を非表示にする
$('.page2').css('display' , 'none');
});
</script>
上記処理実装後のHTMLは以下のようになります。
サンプル2