mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-07-12 09:12:17 +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>"); $(withRipple).append("<div class=ripple-wrapper><div class=ripple></div></div>");
// Add fake-checkbox to material checkboxes // 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 // 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 // Add elements for material inputs
$("input.form-control, textarea.form-control, select.form-control").each( function() { $("input.form-control, textarea.form-control, select.form-control").each( function() {
@ -76,7 +76,7 @@ $(function (){
rippleOut($ripple, $rippleWrapper); rippleOut($ripple, $rippleWrapper);
} }
}) })
.on("mouseup", withRipple, function() { .on("mouseup mouseleave", withRipple, function() {
var $self = $(this), var $self = $(this),
$rippleWrapper = $self.find(".ripple-wrapper"), $rippleWrapper = $self.find(".ripple-wrapper"),
$ripple = $self.find(".ripple"); $ripple = $self.find(".ripple");
@ -89,23 +89,23 @@ $(function (){
var rippleOut = function($ripple, $rippleWrapper) { var rippleOut = function($ripple, $rippleWrapper) {
$ripple.attr("class", "ripple ripple-on ripple-out"); $ripple.attr("class", "ripple ripple-on ripple-out");
$rippleWrapper.fadeOut(200, function() { $rippleWrapper.fadeOut(800, function() {
$rippleWrapper.attr("class", "ripple-wrapper").attr("style", ""); $rippleWrapper.attr("class", "ripple-wrapper").attr("style", "");
$ripple.attr("class", "ripple").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() { $(document).on("click", ".checkbox label, .radio label", function() {
var $bubble = $(this).find(".bubble"), var $ripple = $(this).find(".ripple"),
timestamp = "t" + new Date().getTime(); timestamp = "t" + new Date().getTime();
$bubble.attr("class", "bubble"); $ripple.attr("class", "ripple");
$bubble.addClass("animate").addClass(timestamp); $ripple.addClass("animate").addClass(timestamp);
setTimeout(function() { setTimeout(function() {
if ($bubble.hasClass(timestamp)) { if ($ripple.hasClass(timestamp)) {
$bubble.removeClass("animate").removeClass(timestamp); $ripple.removeClass("animate").removeClass(timestamp);
} }
}, 200); }, 800);
}); });
$(document).on("change", ".form-control", function() { $(document).on("change", ".form-control", function() {