Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

jQuery勉強会#4

1.072 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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. おわり

×