Web:: jQuery+pluginを使ったリッチフォーム

jQuery+pluginを使ったリッチフォームを作る際、結構苦しんだのでメモ。

1. jqTransform
   inputタグをリッチにしてくれるプラグイン。
   そのまま使うとtype="button"が効かないので、要注意！
   ★type="button"を有効にする方法
   jquery.jqtransform.jsのButtonsブロックを修正。
   .mouse(function～)
   .click(this.onclick);　←追加
   ★type="text"のwidthを変更
   cssのwidthを指定するとfirefox 3.6.6では有効ですが、IE・Safari・Chromeでは×！
   size属性を指定するとOK。
   ★type="button"のレイアウト崩れ対応
   IEのみですが、type="button"のvalue値が日本語だと横幅が短い状態でレイアウトが崩れます。
   前後に<nobr>～</nobr>を挟むことで解消できます。
   ★type="text"のレイアウト崩れ対応
   Firefoxのみですが、type="text"にフォーカスすると入力文字の位置がずれます。
   cssの.jqTransformInputInner div input部を修正。
   font-sizeとpadding-topを修正すればＯＫです。
   
2. In-Field
   type="text"のvalue値にサンプル内容を表示できます。
   CSSの設定さえクリアすれば簡単に導入できます。

後は、validatorだけですが時間がないので後日追記します。