symfonyのフォームでYahoo UIの綺麗なボタンを使う
状況
- フォームのボタンをブラウザのデフォルトじゃなく、もうちょっと良いデザインにしたい
- Yahoo UIのボタンは、CSSでキレイにデザインされている。CSSや画像ファイルもyahoo.comのを使えるのでサーバにもやさしい
- symfonyで作ったフォームからYUI buttonを使いたい
symfonyでのフォームのsubmitについては、link_to()、button_to()、submit_image_tag()の3つがFormHelperに用意されています。
- submit_tag() は、ブラウザデフォルトのボタンを書くのでフォームでそのまま動く
- button_to() type=”button”は作れるけど、formの値を送るには自分でjavascript書く必要あり
- submit_image_tag() 画像用意すればキレイなsubmit用のボタンが使える
YUI buttonは、type=”button”を使うことを前提にしているのですが、type=”button”でformのサブミットをさせる(ボタンを押したらフォームの各値がリクエストに含まれる)ようにするためには、ボタンが所属するフォームを駆動するようなJavascriptが必要となります。
以上から、次のようにすることで、symfony+YUIでのCSSデザインボタンを作ることができました。
HTMLのほうは、2番目のパラメータにtypeを渡すことで、submit_tag()にもtype=”body”を上書きで指定することができます。
<?php echo submit_tag('実行する', array('type' => 'button', 'id' => 'compareButton')); ?>
YUI buttonのJavascriptでの定義のところでは、この「フォームを駆動するボタン」という設定ができるので、これを指定します。
<script type="text/javascript">
var oButton = new YAHOO.widget.Button(
"compareButton",
{
checked: false,
type: "submit"
}
);
</script>
type: “submit”がそれにあたります。
あとは、YUI buttonに必要な定義をします。
なんらかのスタイルをあてる。YUIで提供されているスキンか、自分で改造したスキンを指定することも可能
<body class="yui-skin-sam">
symfonyのconfig/view.ymlでは、関係のあるYUIのCSS/JSを読ませるようにします。
stylesheets: [main, http://yui.yahooapis.com/2.4.1/build/grids/grids-min.css, http://yui.yahooapis.com/2.4.1/build/button/assets/skins/sam/button.css] javascripts: [http://yui.yahooapis.com/2.4.1/build/yahoo-dom-event/yahoo-dom-event.js, http://yui.yahooapis.com/2.4.1/build/element/element-beta-min.js, http://yui.yahooapis.com/2.4.1/build/button/button.js]
このへんは、YUIのバージョン変わったり、圧縮版を使うかとか、yahoo.comの提供してくれているファイルを使うか、ローカルにコピーしたファイルを使うかとかで変わってくるでしょう。
