記事

CakePHP 2.0とTwitter Bootstrapでフォームをデザイン

  • このエントリーをはてなブックマークに追加

Twitter Bootstrap、非常に便利で気に入っています。
でも、CakePHPとはちょっと相性が悪いようです。

CakePHPのFormヘルパーでフォームを出力すると、

<div class="input text required">
	<label for="ModelName">Name</label>
	<input name="data[Model][name]" maxlength="255" type="text" id="ModelName"/>
</div>

みたいな感じで出力されます。
Twitter Bootstrap的には

<div class="control-group">
	<label class="control-label" for="input01">Text input</label>
	<div class="controls">
		<input type="text" id="input01">
		<p class="help-inline">エラーメッセージなど</p>
	</div>
</div>

こんな感じで出力されて欲しいわけです。

というわけで、無理矢理Twitter Bootstrap仕様にテンプレートを書いてみました。

<div class="control-group<?php if($this->Form->error('name')) echo ' error' ?>">
	<label for="ModelName">名称</label>
	<?php echo $this->Form->input('name', array('label' => false, 'div' => 'controls', 'error' => array('attributes' => array('wrap' => 'span', 'class' => 'help-inline')))); ?>
</div>

ポイントは$this->Form->inputのオプション。
‘error’ の部分で、確かCakePHP 1.3の頃は

<?php echo $this->Form->input('name', array('label' => false, 'div' => 'controls', 'error' => array('wrap' => 'span', 'class' => 'help-inline'))); ?>

こんな感じでいけたはずだったのが、’attributes’が必要になっとるのですね。

もう一つ、エラーが発生した場合に、’control-group’というクラスがついているdivに’error’ってクラスを追加。

本当はヘルパーを自作するなりすればいいのだと思いますが、とりあえずはこの方法で。

ちなみにこちらにJavaScriptを使ってクラスをごにょごにょするスクリプトが配布されておりますが、色々と問題があったので却下。

  • このエントリーをはてなブックマークに追加
2012年2月
« 1月   3月 »
 12345
6789101112
13141516171819
20212223242526
272829  

フォトライブラリー

コメント

  1. yasuoogle より:

    この記事の部分困っていてすごい参考になりました。ありがとうございます!

    1. Coban より:

      お役に立てて良かったです!
      k1LowさんがTwitterBootstrapというプラグインを紹介してくださいました。
      こちらの方が便利なようです。

      使ってみてレポートしますねー。

  2. k1LoW より:

    まさにTwitterBootstrapというCakePHP Pluginがありますので、それを利用するのがお勧めですよ。
    https://github.com/slywalker/TwitterBootstrap

    1. Coban より:

      なるほど!そんなプラグインが出てるんですね!
      早速使ってみます!
      情報ありがとうございました!

コメントを残す

%d人のブロガーが「いいね」をつけました。