jQuery勉強会#4

jQuery勉強会#4

2012/11/05
丸山亮@h13i32maru

自己紹介

• 丸山亮@h13i32maru
• JavaScript結構好きなプログラマー
• 今はPython少しずつ勉強中
• 焼鳥と牛たんが好物

https://twitter.com/h13i32maru

今日はjQueryで動くもの
を作ってみよう！！！

今日のゴール

• jQueryでGrowl風通知機能を作ってみよう
• GrowlとはMacでよく使われる通知アプリ

・文字を入力してOKを押すと通知が表示される
・おまけ：通知の色を選択できる
(Warning, Success, Error, Info)

やること
1.HTML読み込み完了に処理(関数)を設定
2.OKボタンのクリックに処理(関数)を設定
3.入力されている文字を取得する
4.要素を動的に作成
5.要素にクラスとテキストを設定
6.通知領域に要素を追加する
7.1秒後に通知をフェードアウトする
8.フェードアウトが終わったら通知を削除する

HTMLを準備
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Growl</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="jquery-1.8.2.min.js"></script>
<script>
//ここに書いていく
</script>
</head>

<body>
<div id="content">
<input id="message-text" type="text"/>
<button id="ok-button" class="btn btn-inverse">OK</button>
<div>
<label class="radio inline"><input type="radio" name="color" value="alert-warning" checked/>Warning</label>
<label class="radio inline"><input type="radio" name="color" value="alert-success"/>Success</label>
<label class="radio inline"><input type="radio" name="color" value="alert-error"/>Error</label>
<label class="radio inline"><input type="radio" name="color" value="alert-info"/>Info</label>
</div>
</div>
<div id="growl"/>
</body>
</html>

HTML読み込み完了に処理を設定
<script>
$(function(){
alert('hello');
});
</script>

OKボタンのクリックに処理を設定
<script>
$(function(){
var addMessage = function(){
alert('hello');
};

$('#ok-button').click(addMessage);
});
</script>

入力されている文字を取得
<script>
$(function(){
var message = $('#message-text').val();
alert(message);
};

});
</script>

要素を動的に作成
<script>
$(function(){
var messageElement = $('<div />');
alert(messageElement);
};

});
</script>

要素にクラスとテキストを設定
<script>
$(function(){
messageElement.addClass('alert').text(message);
};

});
</script>

通知領域に要素を追加する
<script>
$(function(){
$('#growl').append(messageElement);
};

});
</script>

1秒後に通知をフェードアウトする
<script>
$(function(){
messageElement.delay(1000).fadeOut(600);
};

});
</script>

フェードアウトが終わったら通知を削除する
<script>
$(function(){
messageElement.delay(1000).fadeOut(600, function(){
$(this).remove();
});
};

});
</script>

使ったもの(1)

• 関数 → JavaScriptの処理をまとめたもの
• $().click(myFunction) → クリックされたら関
数myFunctionを実行

• $().val() → ユーザからの入力値を取得
• $( <div /> ) → div要素を作成
• $().addClass( hoge ) → クラスhogeを追加
• $().text( hello ) → テキストhelloを設定

使ったもの(2)

• $().append(element) → element要素を挿入
• $().delay(1000) → 1000ミリ秒後に実行
• $().fadeOut() → フェードアウトして非表示に
する

• $().remove() → 親要素から削除

jQuery勉強会#4

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to jQuery勉強会#4

Similar to jQuery勉強会#4 (20)

More from Ryo Maruyama

More from Ryo Maruyama (14)

Recently uploaded

Recently uploaded (15)

jQuery勉強会#4