2009年11月02日
フォームで使う命令change() 部品の内容の変更を察知
ASCII.jp：jQueryによるフォームのデザインの基礎（前編）｜Web制作の現場で使えるjQuery UIデザイン入門
上記リンクを参考に実際に書いてみた。
change()命令はフォーム部品の内容が変わったのを察知する。
セレクトボックスから色を選ぶと「SAMPLE」がその色に変わるようにしています。
これはchange()が内容の変更を察知したときに、色に対応したoptionのvalueでp要素のcssを変更しているためです。
コードは以下の通り。
上記リンクを参考に実際に書いてみた。
change()命令はフォーム部品の内容が変わったのを察知する。
セレクトボックスから色を選ぶと「SAMPLE」がその色に変わるようにしています。
これはchange()が内容の変更を察知したときに、色に対応したoptionのvalueでp要素のcssを変更しているためです。
コードは以下の通り。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#change select").change(function(){
$("#change p").css("color",$(this).val());
});
})
</script>
<div id="change">
<form>
<select>
<option value="black">黒</option>
<option value="red">赤</option>
<option value="blue">青</option>
<option value="green">緑</option>
</select>
<p style="font-size:50px;">SAMPLE</p>
</form>
</div>
jQueryでIE6を透過PNGに対応させる
jQueryで作るロールオーバー
jQueryで作るオリジナルツールチップ
jQueryで作るタブパネル
jQueryで作るアコーディオンパネル
jQueryでイメージギャラリーを作成。
jQueryで作るロールオーバー
jQueryで作るオリジナルツールチップ
jQueryで作るタブパネル
jQueryで作るアコーディオンパネル
jQueryでイメージギャラリーを作成。
Posted by ヒダカ at 15:13│Comments(0)
│jQuery
