jquery - ウィザード フォーム クローム エクステンション

Question

ここ数日、Chrome 拡張機能で jquery を使用してウィザード フォームを実装しようとしてきましたが、(私にとっては) 不可能に思えます。次のようないくつかのライブラリを適応させようとしました

http://st3ph.github.io/jquery.easyWizard/

と

http://www.dbarnes.info/jWizard/

Chrome拡張機能でウィザードフォームを実装する方法を教えてもらえますか? またはいくつかの例をください。

どうもありがとうございます

Answer 1

あなたが引用したライブラリは見ていませんが、非常に簡単なアプローチは次のとおりです。

<div id="one">Panel 1 form content<button id="button_one">Next</button></div>
<div id="two">Panel 2 form content<button id="button_two">Next</button></div>
<div id="three">Panel 3 form content<button id="button_three">Next</button></div>

最初の div 以外をすべて非表示にすることから始めます。div 1 を非表示にして div 2 を表示するように、button_one のクリック ハンドラーを設定します。最後のパネルには、すべてのコンテンツまたはやりたいことを送信する「完了」ボタンがある場合があります。これが機能するようになると、トランジション、タブの動作、より優れた CSS に慣れることができます。

ちなみに、Chrome 拡張機能を試す前に、まず通常の Web ページでプロトタイピングを検討する必要があります。「Chrome 拡張機能」は非常に広範であり、それ自体ではあまり意味がありません。ポップアップであったり、特定の Web ページを強化するように設計されていたり、任意の Web ページのオーバーレイであったりします。あなたの質問からはわかりません。そのため、通常の Web ページで機能する非常に単純なものを用意し、それを拡張機能に適応させるのが良い理由です。ここで説明する単純なアプローチは、プロジェクトの優れた基盤となるはずです。