2010/07/04

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を修正すればOKです。
  2. In-Field
    type="text"のvalue値にサンプル内容を表示できます。
    CSSの設定さえクリアすれば簡単に導入できます。
後は、validatorだけですが時間がないので後日追記します。
スポンサーリンク

スポンサーリンク