Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie jQuery勉強会#4
Ähnlich wie jQuery勉強会#4 (20)
Mehr von Ryo Maruyama
Kürzlich hochgeladen
Kürzlich hochgeladen (7)
jQuery勉強会#4
- 1. jQuery勉強会#4 2012/11/05 丸山亮@h13i32maru
- 2. 自己紹介 • 丸山 亮@h13i32maru • JavaScript結構好きなプログラマー • 今はPython少しずつ勉強中 • 焼鳥と牛たんが好物 https://twitter.com/h13i32maru
- 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>
- 9. OKボタンのクリックに処理を設定 <script> //ここに書いていく $(function(){ var addMessage = function(){ alert('hello'); }; $('#ok-button').click(addMessage); }); </script>
- 10. 入力されている文字を取得 <script> //ここに書いていく $(function(){ var addMessage = function(){ var message = $('#message-text').val(); alert(message); }; $('#ok-button').click(addMessage); }); </script>
- 11. 要素を動的に作成 <script> //ここに書いていく $(function(){ var addMessage = function(){ var message = $('#message-text').val(); var messageElement = $('<div />'); alert(messageElement); }; $('#ok-button').click(addMessage); }); </script>
- 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. 通知領域に要素を追加する <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. 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. フェードアウトが終わったら通知を削除する <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. 完成！！！
- 17. 使ったもの(1) • 関数 → JavaScriptの処理をまとめたもの • $().click(myFunction) → クリックされたら関 数myFunctionを実行 • $().val() → ユーザからの入力値を取得 • $( <div /> ) → div要素を作成 • $().addClass( hoge ) → クラスhogeを追加 • $().text( hello ) → テキストhelloを設定
- 18. 使ったもの(2) • $().append(element) → element要素を挿入 • $().delay(1000) → 1000ミリ秒後に実行 • $().fadeOut() → フェードアウトして非表示に する • $().remove() → 親要素から削除
- 19. おわり