札幌Web制作のシンクグラフィカ

段階的入力機能

ウィザード形式で段階的に入力を進めていく入力方式のアドオンです。

入力する段階(フェーズ)を複数に分けて、段階的にステップを踏んで入力を進めるための支援アドオンです。効能としては、きめ細かな説明などを盛り込んでも画面が騒がしく成らない点と、入力欄が多い場合は1ステップずつ入力してもらう事で、疲労感・見た目の多さを軽減することができます。

段階的入力のデモはデモページをご参照ください。

本機能を利用するためには入力フェーズ(段階)をclassがmfp_phaseというdivタグでラップします。

<div class="mfp_phase">1段階目の内容</div>
<div class="mfp_phase">2段階目の内容</div>
<div class="mfp_phase">3段階目の内容</div>

というカタチになります。
上記のように段階を作成すると、自動的に

このようなフェーズステータスが自動追加されます。
またmfp_phaseを指定する場合にsummaryを指定することでフェーズステータス次へ進むボタンなどに表記される文字列を調整することも可能です。

<div class="mfp_phase" summary="注文情報">1段階目の内容</div>
<div class="mfp_phase" summary="お届け先">2段階目の内容</div>
<div class="mfp_phase" summary="アンケート">3段階目の内容</div>

このようにsummaryを指定します。

本機能の詳細は同梱のPDFファイルをご参照ください。
本機能はアドオンとして提供されますのでconfig.cgiの以下の設定を行なってください。

#push @AddOns,'phase.js'; ## 段階的入力機能


push @AddOns,'phase.js'; ## 段階的入力機能

というように行頭の#を削除してください。