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

Added support for IE

Browse Source
This commit is contained in:
Fez Vrasta 2014-08-19 10:16:58 +02:00
parent ab266217c1
commit 2f1ee65db6
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
material/material.js
View File

@ -5,7 +5,7 @@ $(function (){
var withRipple = ".btn:not('.btn-link'), .navbar a, .nav-tabs a"; var withRipple = ".btn:not('.btn-link'), .navbar a, .nav-tabs a";
// Add ripple elements to material buttons // Add ripple elements to material buttons
$(withRipple).append("<svg class=ripple-wrapper><defs></defs><g><ellipse rx=20 ry=20 class=ripple></ellipse></g></svg>"); $(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=\"bubble\"></span><span class=\"check\"></span><span class=\"box\"></span>");
@ -14,7 +14,7 @@ $(function (){
$(".radio label input").after("<span class=\"bubble\"></span><span class=\"circle\"></span><span class=\"check\"></span>"); $(".radio label input").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, select.form-control").each( function() {
$(this).wrap("<div class=form-control-wrapper></div>"); $(this).wrap("<div class=form-control-wrapper></div>");
$(this).after("<span class=material-input></span>"); $(this).after("<span class=material-input></span>");
if ($(this).hasClass("floating-label")) { if ($(this).hasClass("floating-label")) {
@ -52,11 +52,17 @@ $(function (){
var relY = e.pageY - parentOffset.top; var relY = e.pageY - parentOffset.top;
// Move ripple to the click position // Move ripple to the click position
$ripple.attr({"cy":relY, "cx": relX}); $ripple.attr({"style": "top: " + relY + "px; left:" + relX + "px"});
// Start the animation // Start the animation
$rippleWrapper.attr("class", "ripple-wrapper").data("animating", true); $rippleWrapper.attr("class", "ripple-wrapper").data("animating", true);
$ripple.attr("class", "ripple ripple-on").css("transform", "scale(" + $rippleWrapper.width() / 20 + ")"); var scaleVal = "scale(" + Math.round($rippleWrapper.width() / 10) + ")";
$ripple.attr("class", "ripple ripple-on").css({
"-ms-transform": scaleVal,
"-moz-transform": scaleVal,
"-webkit-transform": scaleVal,
"transform": scaleVal
});
setTimeout(function() { setTimeout(function() {
$rippleWrapper.attr("class", "ripple-wrapper").data("animating", false).trigger("rippleEnd"); $rippleWrapper.attr("class", "ripple-wrapper").data("animating", false).trigger("rippleEnd");
}, 500); }, 500);