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

updated demo

Browse Source
This commit is contained in:
Federico Zivolo 2014-09-26 13:29:07 +02:00
parent 8671429577
commit db3e1e9fcb
4 changed files with 578 additions and 477 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -509,7 +509,7 @@
<h1 id="icons">Icons</h1> <h1 id="icons">Icons</h1>
<p>Material Design for Bootstrap includes 490 original Material Design icons!<br> <p>Material Design for Bootstrap includes 490 original Material Design icons!<br>
These icons are extracted from the original Google sources and are licensed under BSD license.<br> These icons are extracted from the original Google sources and are licensed under BSD license.<br>
Them are provided as an iconic font easy to use. They are provided as an iconic font for easy use.
</p> </p>
<p>Variations are available for every icon, included for the original Bootstrap icons.<br> <p>Variations are available for every icon, included for the original Bootstrap icons.<br>
<br>Example:<br><br> <br>Example:<br><br>
@ -1879,6 +1879,7 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<h2>Panels</h2> <h2>Panels</h2>

962
material/material.css
View File

File diff suppressed because it is too large Load Diff

38
material/material.js
View File

@ -4,14 +4,16 @@ $(function (){
ripples.init(".btn:not(.btn-link), .navbar a, .nav-tabs a, .withripple"); ripples.init(".btn:not(.btn-link), .navbar a, .nav-tabs a, .withripple");
var initInputs = function() {
// Add fake-checkbox to material checkboxes // Add fake-checkbox to material checkboxes
$(".checkbox > label > input").after("<span class=check></span>"); $(".checkbox > label > input").not(".bs-material").addClass("bs-material").after("<span class=check></span>");
// Add fake-radio to material radios // Add fake-radio to material radios
$(".radio > label > input").after("<span class=ripple></span><span class=circle></span><span class=check></span>"); $(".radio > label > input").not(".bs-material").addClass("bs-material").after("<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").not(".bs-material").each( function() {
if ($(this).is(".bs-material")) { return; }
$(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")) {
@ -19,7 +21,7 @@ $(function (){
$(this).attr("placeholder", null).removeClass("floating-label"); $(this).attr("placeholder", null).removeClass("floating-label");
$(this).after("<div class=floating-label>" + placeholder + "</div>"); $(this).after("<div class=floating-label>" + placeholder + "</div>");
} }
if ($(this).val() === "") { if ($(this).is(":empty") || $(this).val() === null || $(this).val() == "undefined" || $(this).val() === "") {
$(this).addClass("empty"); $(this).addClass("empty");
} }
@ -30,15 +32,27 @@ $(function (){
} }
}); });
$(document).on("keyup change", ".form-control", function() { };
if ($(this).val() !== "") { initInputs();
$(this).removeClass("empty");
} else { // Support for "arrive.js" to dynamically detect creation of elements
$(this).addClass("empty"); // include it before this script to take advantage of this feature
} // https://github.com/uzairfarooq/arrive/
if (document.arrive) {
document.arrive("input, textarea, select", function() {
initInputs();
}); });
$(document).on("keydown change", ".form-control", function() { }
$(this).removeClass("empty");
$(document).on("keyup change", ".form-control", function() {
var self = $(this);
setTimeout(function() {
if (self.val() === "") {
self.addClass("empty");
} else {
self.removeClass("empty");
}
}, 1);
}); });
$(document) $(document)
.on("focus", ".form-control-wrapper.fileinput", function() { .on("focus", ".form-control-wrapper.fileinput", function() {

2
material/ripples.js
View File

@ -57,7 +57,7 @@ var ripples = {
$ripple.setAttribute("style", $ripple.getAttribute("style") + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";")); $ripple.setAttribute("style", $ripple.getAttribute("style") + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";"));
// Dirty fix for Firefox... seems like absolute elements inside <A> tags do not trigger the "click" event // Dirty fix for Firefox... seems like absolute elements inside <A> tags do not trigger the "click" event
if (/firefox/i.test(navigator.userAgent)) { if (/firefox|crios|safari|ip(ad|hone|od)/i.test(navigator.userAgent)) {
$el.click(); $el.click();
} }