eformにプレビュー機能を付けてみた（その後）

eFormのプレビューを作ってみたのですが、その後、radioボタンやcheckboxボタンには対応していないと言うお叱りをいただいたのと、なんだかんだいろいろとおいら自身でなんかこー、しっくりいかなかったので、作り直してみた。

 今回の改良点。

テンプレートデザイナーと、プレビュー機能の完全分離。
まあ、言葉にするとすごい事をしたようだが、実際にはただ単にファイルを分けただけｗ
そうは言っても、フォーム部品を検索する部分は共有していたので、ファイルをただ単純に分けてもさほど変わりがなかったので、デザイナーでフォーム部品の情報をテンプレートに埋め込んで、プレビューでは検索はしないように変更してみました。
これで、いくらか、動作は軽くなるはずｗ

フォーム部品の情報を埋め込んだのにはもう一つ思惑があって、他の機能も付けられないかなーという思惑。
まあ、思惑と言うだけで進展が見込めるかどうかは未知数ｗ

まあ、能書きはこれくらいにして…。

プレビュー用のスクリプトは ここ(eformpreview2.js)　から。

eForm用のデザインテンプレートで呼び出すか、チャンクを展開してください。
チャンクを展開する場合は<script>タグによる明示を忘れないでください。
おいらは試してませんので、ご了承くださいｗ

次にすることは、このページの下の方の『テンプレート貼り付け欄』に、eFormで使うチャンクの内容を貼り付けてください。
さらに、その下にある『ボタンの文字列』欄に好きな文字列を入力してください。
プレビューを実行するためのボタンに表示する文字列になります。

以上が終わったら、さらに下にある2つのボタンのうち、お好みの方をクリックしてください。
『tableタグ式』と『divタグ式』。
プレビューエリアのひな形を作るベースになります。
どちらかのボタンをクリックするとプレビューを表示するためのひな形テンプレートがさらに下の欄に吐き出されます。
これをeFormのチャンクの適当な場所に貼り付けてください。
デザインは自由にしてかまいません。
ただし、id属性は一切変更しないでください。プレビューはid属性の項目を探して動作します。id属性に手を加えた場合はプレビューは正しく動作しませんので、あしからず。
radioボタンやcheckboxボタンを使う場合は、デザインの変更をお奨めします。
この2つについては、他のフォーム部品とは形式が異なるので、選択されない項目に関しては『display:none』で、隠しています。
当然、それの影響を受けてデザインは崩れますｗ
それから、グループ分けも出来ません。方法がないわけではないですが、htmlの作成の仕方が違うと判別する方法が異なってしまうためです。
なので、radioボタンや、checkboxボタンのグループ分けはデザイン上でごまかしてください（ヲイ）

毎度ながら、このスクリプトは自己責任で使ってくださいまし。どんな損害が発生しても、おいらは一切責任は負いません。