狠狠撸

箩蚕耻别谤测勉强会#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=/slideshow/jquery4/15016380/"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() → 親要素から削除

狠狠撸

箩蚕耻别谤测勉强会#4

Recommended

More Related Content

Viewers also liked (20)

Similar to 箩蚕耻别谤测勉强会#4 (20)

More from Ryo Maruyama (14)

Recently uploaded (6)

箩蚕耻别谤测勉强会#4