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

段階的入力機能の追加表示

秋定さん (2016-09-06 19:57:48) test-pages.net/form/form-basic.html

凄いプログラムをいつもありがとうございます。

段階的入力機能をONにしたときに、フォームの上部に表示されるフェーズステータスのことで質問です。

PDFの取説には「これらは手動で追加することもできます。」とありますが、追加するにはどうすればいいのでしょうか?
「確認画面」の後(右隣)に、「送信完了」と入れたいです。

お手数をおかけいたしますが、よろしくお願いいたします。

Re:段階的入力機能の追加表示

和田 (2016-09-13 06:33:12) www.synck.com

どうやって追加するのかうっすら憶えていないのですが
<ul id="mfp_phase_stat">
<li id="mfp_phase_0_label" class="mfp_active_phase">情報の入力</li>
<li class="mfp_phase_arrow">&gt;</li>
<li id="mfp_phase_confirm_label" class="mfp_inactive_phase">確認画面</li>
<li class="mfp_phase_arrow">&gt;</li>
<li id="mfp_phase_confirm_label" class="mfp_inactive_phase">送信完了</li>
</ul>
というタグをどこかに配置していただければ多分そのようになると思います。

Re:段階的入力機能の追加表示

秋定さん (2016-09-13 13:48:35) test-pages.net/form/form-basic.html

ご回答ありがとうございます。

いただいたタグを参考にして、なんとなく出来ました!
"&gt;"は非表示にしたかったので、追記していません。

var e = document.getElementById(’mfp_phase_stat’);
var elemLi = document.createElement(’li’);
elemLi.className = ’mfp_inactive_phase’;
elemLi.textContent = ’送信完了’;
e.appendChild(elemLi);