[jQuery] 少し発展して勉強してみた。

   

jQueryでフォーム

これまでは、HTMLやCSSを変化させることを簡単なんですが記述してきましたが、次はフォーム機能やアニメーションです。

メールアドレス;
例えば上記のようなフォームがよくWebサイトの中で見受けられます。これを動的に動かして行くのもjQueryで可能です。
[cc lang=”javascript”]
$(function(){
    $(“button”).click(function(){
        $(“p”).text( $(“input”).val() + “にメールを送信します”);
        $(“button”).text(“送信”);
     });
 });
[/cc]

基本は変わらず、指定したセレクタをボタンが押された際にどう変化するかを書いていきます。
「val()」はvalue属性を抜き出しています。

[cc lang=”javascript”]
$(function(){
     $(‘select’).change(fucntion(){
          if($(‘:selected’).attr(“value”) == “10代”){
                $(“input”).attr(“disabled”,”disabled”);
          } else{
                $(“input”).removeAttr(“disabled”);
          }
      });
});
[/cc]

年齢:


好きなお酒:
この場合選択した年齢が10代の場合は好きなお酒が記入できなくなるようにしています。

jQueryでアニメーション


jQueryを使えば、アニメーション効果をつけることも簡単にできます。
[主なアニメーション]
  •  show(): 徐々に表示をする。第一引数で速度を指定できる。
  •  hide():徐々に非表示にする。
  •  fadeIn() : フィードインで表示する。
  •  toggle():表示、非表示を徐々に切り替える
  • animate() : 任意のCSSプロパティの値を変更する

shwo(),hide(),toggle()は基本的な画面の表示、非表示を切り替えられます。
第一引数に”slow”,”fast”などの速度を指定できます。

[cc lang=”javascript”]
$(“button”).click(function(){
$(“p”).show( slow,function(){
// show() が終わった際に呼び出す処理を記載
     });
});
[/cc]

animate()はユーザーが独自にアニメーションを設定できます。
animate( CSSプロバティ、速度、動き、コールバック関数)
[cc lang=”javascript”]
$(function(){
$(“button”).click(fucntion(){
$(“p”).animate( { “marginLeft : “200px”} , “slow”,”swing”);
});
});
[/cc]

ライブラリを使えば、簡単に色々動的なコンテンツを作成することができます。
後、jQueryには多くのフラグインがあります。
フラグインを使えばさらにできることが広がります。凄い!!

[参考書籍]
Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)
Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)


Related Posts Plugin for WordPress, Blogger...