Mais conteúdo relacionado
Semelhante a jQuery勉強会#4 (20)
Mais de Ryo Maruyama (14)
jQuery勉強会#4
- 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>
- 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>
- 17. 使ったもの(1)
• 関数 → JavaScriptの処理をまとめたもの
• $().click(myFunction) → クリックされたら関
数myFunctionを実行
• $().val() → ユーザからの入力値を取得
• $( <div /> ) → div要素を作成
• $().addClass( hoge ) → クラスhogeを追加
• $().text( hello ) → テキストhelloを設定