2009年11月05日

フォーム部品を選択するフィルター :input

人気ブログランキングにほんブログ村 IT技術ブログへ

ASCII.jp:jQueryによるフォームのデザインの基礎(後編)|Web制作の現場で使えるjQuery UIデザイン入門

上記リンクを参考に実際に書いてみた。

:inputフィルターはフォームの部品を一括して指定するフィルター。

input、textarea、select要素にwidth:180px、margin-bottom:10pxを設定しました。






コードは以下の通り。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#input :input").css("width","180px").css("marginBottom","10px");
})
</script>

<div id="input">
<form>
<input type="text" value="テキストフィールド" /><br />
<textarea>テキストエリア</textarea><br />
<select>
<option>選択1</option>
<option>選択1</option>
<option>選択1</option>
<option>選択1</option>
<option>選択1</option>
</select><br />
<input type="button" value="汎用ボタン"/><br />
<input type="submit"value="送信ボタン"/>
</form>
</div>


同じカテゴリー(jQuery)の記事画像
jQueryでIE6を透過PNGに対応させる
jQueryで作るロールオーバー
jQueryで作るオリジナルツールチップ
jQueryでのアニメーション animate()
jQueryのアニメーションfadeIn Out To
jQueryのアニメーションslideUp Down 他
同じカテゴリー(jQuery)の記事
 jQueryでIE6を透過PNGに対応させる (2009-12-16 20:34)
 jQueryで作るロールオーバー (2009-12-12 18:00)
 jQueryで作るオリジナルツールチップ (2009-12-11 23:44)
 jQueryで作るタブパネル (2009-12-10 18:00)
 jQueryで作るアコーディオンパネル (2009-12-09 18:00)
 jQueryでイメージギャラリーを作成。 (2009-11-29 17:58)

Posted by ヒダカ at 18:00│Comments(0)jQuery
上の画像に書かれている文字を入力して下さい
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。