ページ分割を行うには?

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