ボタンをクリックした時に一瞬だけメッセージを表示する
Result
jQuery
(function($) {
$.fn.flash_message = function(options) {
//デフォルト値
options = $.extend({
text: 'Done',
time: 750,
how: 'before',
class_name: ''
}, options);
return $(this).each(function() {
//指定したセレクタを探して取得
if ($(this).parent().find('.flash_message').get(0)) return;
var message = $('<span />', {
'class': 'flash_message ' + options.class_name,
text: options.text
//フェードイン表示
}).hide().fadeIn('fast');
$(this)[options.how](message);
//delayさせてからフェードアウト
message.delay(options.time).fadeOut('normal', function() {
$(this).remove();
});
});
};
})(jQuery);
//設定
$('.add-item').click(function() {
$('#status-area').flash_message({
text: 'カートに入れました!',
how: 'append'
});
});
css
#status-area .flash_message {
padding: 5px;
color: green;
font-weight:bold;
}
html
<button class="add-item">この商品をカートに入れておく</button>
<div id="status-area"></div>
via
jQuery_Flash_Messages