ＴＯＭの部屋 - 管理人居室

前置き。
技術者たるもの、やはり技術を語れてなんぼだろう…という事で、技術的な情報で「なるほど」と思う事があったら、こまめに書き留めていくことにしようかと。

今回のお題は、Smartyでhtml_checkboxesを使ってチェックボックスを並べる時の話。

通常、html_checkboxesを使う場合は、以下のように使うかと思います。

{html_checkboxes name="prefecture" options=$action.checkboxes_prefecture selected=$action.prefecture separator=" "}

(アサインされた変数が$actionなのは、mapleを使った場合を想定しているからです。)

ただ、この場合、チェックボックスがずらっと並ぶ事になるので、例のように都道府県なんかだったりすると、ちょっと見映えがよろしくありません。

ちょっと調べてみると、「これだ！」という解決方法を発見しました。
→"smarty研究(1) フォーム部品関数は隠し属性assignで使いやすく！ | バシャログ"

つまり、一旦、配列にアサインし直してやれば、後はforeachを使ってループさせる部分を適当に変えてやれば、どんな見映えでも自由自在って事ですね。

{html_checkboxes name="prefecture" options=$action.checkboxes_prefecture selected=$action.prefecture assign="checkboxes"}

{foreach from=$checkboxes item="checkbox"}

<div class="checkbox">{$checkbox}</div>

{/foreach}

こんな具合…。ここでは、例としてチェックボックスひとつひとつをdivタグでくくるようにしています。こうすれば、後はcssで適当に見映えをキレイにしてやれば、等間隔に揃えるとかも簡単！

…と思って、mapleのテンプレートに適用してみたんですが、mapleだと基本的にアサインされる変数は全て自動的にエスケープされる為、そのままだとエスケープされた文字列が出力されてしまって、うまくいかない事が判明。(^^;

で、ちょっと試行錯誤して、次のようにしたら、いい感じで等間隔にチェックボックスを並べる事ができました。

{html_checkboxes name="prefecture" options=$action.checkboxes_prefecture selected=$action.prefecture assign="checkboxes"}

{foreach from=$checkboxes|smarty:nodefaults item="checkbox"}

<div style="width:150px;float:left;">{$checkbox|smarty:nodefaults}</div>

{/foreach}

フォームの内容をファイルやらDBやらに事前に置いておいて、そこから引っ張ってくるようにすれば、入力フォームの生成も簡単にできて、非常に楽でよいですね。(^-^)