You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
98 lines
2.5 KiB
98 lines
2.5 KiB
/* ------------------------------------------------------------------------------ |
|
* |
|
* # Buttons and button dropdowns |
|
* |
|
* Specific JS code additions for components_buttons.html page |
|
* |
|
* Version: 1.0 |
|
* Latest update: Aug 1, 2015 |
|
* |
|
* ---------------------------------------------------------------------------- */ |
|
|
|
$(function() { |
|
|
|
|
|
// Buttons with progress/spinner |
|
// ------------------------------ |
|
|
|
// Initialize on button click |
|
$('.btn-loading').click(function () { |
|
var btn = $(this); |
|
btn.button('loading') |
|
setTimeout(function () { |
|
btn.button('reset') |
|
}, 3000) |
|
}); |
|
|
|
// Button with spinner |
|
Ladda.bind('.btn-ladda-spinner', { |
|
dataSpinnerSize: 16, |
|
timeout: 2000 |
|
}); |
|
|
|
// Button with progress |
|
Ladda.bind('.btn-ladda-progress', { |
|
callback: function(instance) { |
|
var progress = 0; |
|
var interval = setInterval(function() { |
|
progress = Math.min(progress + Math.random() * 0.1, 1); |
|
instance.setProgress(progress); |
|
|
|
if( progress === 1 ) { |
|
instance.stop(); |
|
clearInterval(interval); |
|
} |
|
}, 200); |
|
} |
|
}); |
|
|
|
|
|
|
|
// Animated dropdowns |
|
// ------------------------------ |
|
|
|
// CSS3 animations |
|
$('.dropdown-animated, .btn-group-animated').on('show.bs.dropdown', function(e){ |
|
$(this).find('.dropdown-menu').addClass('animated bounceIn').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() { |
|
$(this).removeClass('animated bounceIn') |
|
}); |
|
}); |
|
|
|
|
|
// |
|
// Velocity animations |
|
// |
|
|
|
// Open |
|
$('.dropdown-velocity, .btn-group-velocity').on('show.bs.dropdown', function(e){ |
|
$(this).find('.dropdown-menu').velocity('transition.slideUpIn', { |
|
duration: 200 |
|
}) |
|
}); |
|
|
|
// Close |
|
$('.dropdown-velocity, .btn-group-velocity').on('hide.bs.dropdown', function(e){ |
|
$(this).find('.dropdown-menu').velocity('transition.slideLeftOut', { |
|
duration: 200, |
|
complete: function() { |
|
$(this).removeAttr('style'); |
|
} |
|
}) |
|
}); |
|
|
|
|
|
// |
|
// jQuery animations |
|
// |
|
|
|
// Open |
|
$('.dropdown-fade, .btn-group-fade').on('show.bs.dropdown', function(e){ |
|
$(this).find('.dropdown-menu').fadeIn(250); |
|
}); |
|
|
|
// Close |
|
$('.dropdown-fade, .btn-group-fade').on('hide.bs.dropdown', function(e){ |
|
$(this).find('.dropdown-menu').fadeOut(250); |
|
}); |
|
|
|
});
|
|
|