jQuery勉強会#4

951 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
951
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery勉強会#4

  1. 1. jQuery勉強会#4 2012/11/05 丸山亮@h13i32maru
  2. 2. 自己紹介• 丸山 亮@h13i32maru• JavaScript結構好きなプログラマー• 今はPython少しずつ勉強中• 焼鳥と牛たんが好物 https://twitter.com/h13i32maru
  3. 3. 今日はjQueryで動くもの を作ってみよう!!!
  4. 4. 今日のゴール• jQueryでGrowl風通知機能を作ってみよう• GrowlとはMacでよく使われる通知アプリ
  5. 5. ・文字を入力してOKを押すと通知が表示される・おまけ:通知の色を選択できる     (Warning, Success, Error, Info)
  6. 6. やること1.HTML読み込み完了に処理(関数)を設定2.OKボタンのクリックに処理(関数)を設定3.入力されている文字を取得する4.要素を動的に作成5.要素にクラスとテキストを設定6.通知領域に要素を追加する7.1秒後に通知をフェードアウトする8.フェードアウトが終わったら通知を削除する
  7. 7. 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>
  8. 8. HTML読み込み完了に処理を設定<script>//ここに書いていく$(function(){ alert(hello);});</script>
  9. 9. OKボタンのクリックに処理を設定<script>//ここに書いていく$(function(){ var addMessage = function(){ alert(hello); }; $(#ok-button).click(addMessage);});</script>
  10. 10. 入力されている文字を取得<script>//ここに書いていく$(function(){ var addMessage = function(){ var message = $(#message-text).val(); alert(message); }; $(#ok-button).click(addMessage);});</script>
  11. 11. 要素を動的に作成<script>//ここに書いていく$(function(){ var addMessage = function(){ var message = $(#message-text).val(); var messageElement = $(<div />); alert(messageElement); }; $(#ok-button).click(addMessage);});</script>
  12. 12. 要素にクラスとテキストを設定<script>//ここに書いていく$(function(){ var addMessage = function(){ var message = $(#message-text).val(); var messageElement = $(<div />); messageElement.addClass(alert).text(message); alert(messageElement); }; $(#ok-button).click(addMessage);});</script>
  13. 13. 通知領域に要素を追加する<script>//ここに書いていく$(function(){ var addMessage = function(){ var message = $(#message-text).val(); var messageElement = $(<div />); messageElement.addClass(alert).text(message); $(#growl).append(messageElement); alert(messageElement); }; $(#ok-button).click(addMessage);});</script>
  14. 14. 1秒後に通知をフェードアウトする<script>//ここに書いていく$(function(){ var addMessage = function(){ var message = $(#message-text).val(); var messageElement = $(<div />); messageElement.addClass(alert).text(message); $(#growl).append(messageElement); messageElement.delay(1000).fadeOut(600); alert(messageElement); }; $(#ok-button).click(addMessage);});</script>
  15. 15. フェードアウトが終わったら通知を削除する<script>//ここに書いていく$(function(){ var addMessage = function(){ var message = $(#message-text).val(); var messageElement = $(<div />); messageElement.addClass(alert).text(message); $(#growl).append(messageElement); messageElement.delay(1000).fadeOut(600, function(){ $(this).remove(); }); }; $(#ok-button).click(addMessage);});</script>
  16. 16. 完成!!!
  17. 17. 使ったもの(1)• 関数 → JavaScriptの処理をまとめたもの• $().click(myFunction) → クリックされたら関 数myFunctionを実行• $().val() → ユーザからの入力値を取得• $( <div /> ) → div要素を作成• $().addClass( hoge ) → クラスhogeを追加• $().text( hello ) → テキストhelloを設定
  18. 18. 使ったもの(2)• $().append(element) → element要素を挿入• $().delay(1000) → 1000ミリ秒後に実行• $().fadeOut() → フェードアウトして非表示に する• $().remove() → 親要素から削除
  19. 19. おわり

×