mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-07-12 01:02:19 +03:00
Code Issues Packages Projects Releases Wiki Activity

Update material.js

Browse Source
This commit is contained in:
Fez Vrasta 2014-08-20 12:57:36 +02:00
parent 364c7e629c
commit d97b023c41
1 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
material/material.js
View File

@ -8,10 +8,10 @@ $(function (){
$(withRipple).append("<div class=ripple-wrapper><div class=ripple></div></div>");
// Add fake-checkbox to material checkboxes
$(".checkbox label input").after("<span class=\"bubble\"></span><span class=\"check\"></span><span class=\"box\"></span>");
$(".checkbox label input").after("<span class=ripple></span><span class=check></span><span class=box></span>");
// Add fake-radio to material radios
$(".radio label input").after("<span class=\"bubble\"></span><span class=\"circle\"></span><span class=\"check\"></span>");
$(".radio label input").after("<span class=ripple></span><span class=circle></span><span class=check></span>");
// Add elements for material inputs
$("input.form-control, textarea.form-control, select.form-control").each( function() {
@ -76,7 +76,7 @@ $(function (){
rippleOut($ripple, $rippleWrapper);
}
})
.on("mouseup", withRipple, function() {
.on("mouseup mouseleave", withRipple, function() {
var $self = $(this),
$rippleWrapper = $self.find(".ripple-wrapper"),
$ripple = $self.find(".ripple");
@ -89,23 +89,23 @@ $(function (){
var rippleOut = function($ripple, $rippleWrapper) {
$ripple.attr("class", "ripple ripple-on ripple-out");
$rippleWrapper.fadeOut(200, function() {
$rippleWrapper.fadeOut(800, function() {
$rippleWrapper.attr("class", "ripple-wrapper").attr("style", "");
$ripple.attr("class", "ripple").attr("style", "");
});
};
// Material inputs engine (bubble effect)
// Material inputs engine (ripple effect)
$(document).on("click", ".checkbox label, .radio label", function() {
var $bubble = $(this).find(".bubble"),
var $ripple = $(this).find(".ripple"),
timestamp = "t" + new Date().getTime();
$bubble.attr("class", "bubble");
$bubble.addClass("animate").addClass(timestamp);
$ripple.attr("class", "ripple");
$ripple.addClass("animate").addClass(timestamp);
setTimeout(function() {
if ($bubble.hasClass(timestamp)) {
$bubble.removeClass("animate").removeClass(timestamp);
if ($ripple.hasClass(timestamp)) {
$ripple.removeClass("animate").removeClass(timestamp);
}
}, 200);
}, 800);
});
$(document).on("change", ".form-control", function() {