mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-07-15 10:42:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

updated to latest release.

Browse Source
This commit is contained in:
Fez Vrasta 2014-08-18 16:27:39 +02:00
parent f882ad1f3c
commit eeade31592
1 changed files with 14 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
material/material.js
View File

@ -1,29 +1,26 @@
/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */ /* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
$(function (){ $(function (){
// with ripple elements
var withRipple = ".btn:not('.btn-link'), .navbar a, .nav-tabs a";
// Add ripple elements to material buttons // Add ripple elements to material buttons
$(".btn:not('.btn-link'), .navbar a").each( function(){ $(withRipple).append("<svg class=ripple-wrapper><defs></defs><g><ellipse rx=20 ry=20 class=ripple></ellipse></g></svg>");
$(this).append("<svg class=ripple-wrapper><defs></defs><g><ellipse rx=20 ry=20 class=ripple></ellipse></g></svg>");
});
// Add fake-checkbox to material checkboxes // Add fake-checkbox to material checkboxes
$(".checkbox label input").each( function() { $(".checkbox label input").after("<span class=\"bubble\"></span><span class=\"check\"></span><span class=\"box\"></span>");
$(this).after("<span class=\"bubble\"></span><span class=\"check\"></span><span class=\"box\"></span>");
});
// Add fake-radio to material radios // Add fake-radio to material radios
$(".radio label input").each( function() { $(".radio label input").after("<span class=\"bubble\"></span><span class=\"circle\"></span><span class=\"check\"></span>");
$(this).after("<span class=\"bubble\"></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").each( function() { $("input.form-control, textarea.form-control").each( function() {
$(this).wrap("<div class=\"form-control-wrapper\"></div>"); $(this).wrap("<div class=form-control-wrapper></div>");
$(this).after("<span class=\"form-control-highlight\"></span><span class=\"form-control-bar\"></span>"); $(this).after("<span class=material-input></span>");
if ($(this).hasClass("floating-label")) { if ($(this).hasClass("floating-label")) {
$(this) var placeholder = $(this).attr("placeholder");
.removeClass("floating-label") $(this).attr("placeholder", null).removeClass("floating-label");
.after("<span class=\"floating-label\">" + $(this).attr("placeholder") + "</span>").attr("placeholder", null); $(this).after("<div class=floating-label>" + placeholder + "</div>");
} }
if ($(this).val() === "") { if ($(this).val() === "") {
$(this).addClass("empty"); $(this).addClass("empty");
@ -39,7 +36,7 @@ $(function (){
}); });
// Material buttons engine // Material buttons engine
$(document).on("mousedown", ".btn:not('.btn-link'), .navbar a", function(e){ $(document).on("mousedown", withRipple, function(e){
// Cache elements // Cache elements
var $self = $(this), var $self = $(this),
$rippleWrapper = $self.find(".ripple-wrapper"), $rippleWrapper = $self.find(".ripple-wrapper"),
@ -64,7 +61,7 @@ $(function (){
$rippleWrapper.attr("class", "ripple-wrapper").data("animating", false).trigger("rippleEnd"); $rippleWrapper.attr("class", "ripple-wrapper").data("animating", false).trigger("rippleEnd");
}, 500); }, 500);
}) })
.on("rippleEnd", ".btn:not('.btn-link'), .navbar a", function() { .on("rippleEnd", withRipple, function() {
if (!mouseDown) { if (!mouseDown) {
var $self = $(this), var $self = $(this),
$rippleWrapper = $self.find(".ripple-wrapper"), $rippleWrapper = $self.find(".ripple-wrapper"),
@ -73,7 +70,7 @@ $(function (){
rippleOut($ripple, $rippleWrapper); rippleOut($ripple, $rippleWrapper);
} }
}) })
.on("mouseup", ".btn:not('.btn-link'), .navbar a", function() { .on("mouseup", 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");