mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-23 01:57:06 +03:00
refactor of Material.js
This commit is contained in:
FezVrasta
parent
5535e56ec0
commit
c26d5e3ce1
31
README.md
31
README.md
|
|
@ -95,6 +95,37 @@ Variations are available for every icon, including the original Bootstrap icons.
|
|||
The syntax to add a Material icon is:
|
||||
|
||||
<i class="icon icon-material-favorite"></i>
|
||||
|
||||
# Material.js
|
||||
|
||||
Material.js is a jQuery plugin that add some magic to your markup and allows Material Design for Bootstrap to style some elements like inputs, checkboxes, radios etc.
|
||||
|
||||
### Functions:
|
||||
|
||||
This plugin exposes some functions, them are:
|
||||
|
||||
`$.material.inits` is a shortcut to run all the following commands.
|
||||
`$.material.ripples()` will apply ripples.js to the default elements.
|
||||
`$.material.input()` will enable the MD style to the text inputs, and other kind of inputs (number, email, file etc).
|
||||
`$.material.checkbox():` will enable the MD style to the checkboxes (remember to follow the markup guidelines explained in the Inputs chapter.
|
||||
`$.material.radio():` will enable the MD style to the checkboxes (remember to follow the markup guidelines explained in the Inputs chapter.
|
||||
|
||||
### Apply Material.js only to specific elements:
|
||||
|
||||
Every function expects an optional value that will be used as selector for the function, for example
|
||||
`$.material.ripples("#selector, #foobar")` will apply Ripples.js only to `#selector` and `#foobar`.
|
||||
The functions that allows an optional selector are `$.material.ripples`, `$.material.input`, `$.material.checkbox` and `$.material.radio`.
|
||||
|
||||
You can even override the default values using the `$.material.options` function, the default values are:
|
||||
|
||||
$.material.options = {
|
||||
"withRipples": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple",
|
||||
"inputElements": "input.form-control, textarea.form-control, select.form-control",
|
||||
"checkboxElements": ".checkbox > label > input[type=checkbox]",
|
||||
"radioElements": ".radio > label > input[type=radio]"
|
||||
}
|
||||
|
||||
|
||||
|
||||
# Plugins
|
||||
|
||||
|
|
|
|||
186
dist/js/material.js
vendored
186
dist/js/material.js
vendored
|
|
@ -1,8 +1,16 @@
|
|||
/* globals ripples */
|
||||
/* globals jQuery, ripples */
|
||||
|
||||
$(function (){
|
||||
(function($) {
|
||||
// Selector to select only not already processed elements
|
||||
$.expr[":"].notmdproc = function(obj){
|
||||
if ($(obj).data("mdproc")) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
function isChar(evt) {
|
||||
function _isChar(evt) {
|
||||
if (typeof evt.which == "undefined") {
|
||||
return true;
|
||||
} else if (typeof evt.which == "number" && evt.which > 0) {
|
||||
|
|
@ -11,90 +19,92 @@ $(function (){
|
|||
return false;
|
||||
}
|
||||
|
||||
if (typeof ripples == "object") {
|
||||
ripples.init( ".btn:not(.btn-link)," +
|
||||
".card-image," +
|
||||
".navbar a:not(.withoutripple)," +
|
||||
".nav-tabs a:not(.withoutripple)," +
|
||||
".withripple" );
|
||||
}
|
||||
|
||||
var initInputs = function() {
|
||||
// Add fake-checkbox to material checkboxes
|
||||
$(".checkbox > label > input").not(".bs-material").addClass("bs-material").after("<span class=check></span>");
|
||||
|
||||
// Add fake-radio to material radios
|
||||
$(".radio > label > input").not(".bs-material").addClass("bs-material").after("<span class=circle></span><span class=check></span>");
|
||||
|
||||
// Add elements for material inputs
|
||||
$("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).after("<span class=material-input></span>");
|
||||
if ($(this).hasClass("floating-label")) {
|
||||
var placeholder = $(this).attr("placeholder");
|
||||
$(this).attr("placeholder", null).removeClass("floating-label");
|
||||
$(this).after("<div class=floating-label>" + placeholder + "</div>");
|
||||
}
|
||||
if ($(this).is(":empty") || $(this).val() === null || $(this).val() == "undefined" || $(this).val() === "") {
|
||||
$(this).addClass("empty");
|
||||
}
|
||||
|
||||
if ($(this).parent().next().is("[type=file]")) {
|
||||
$(this).parent().addClass("fileinput");
|
||||
var $input = $(this).parent().next().detach();
|
||||
$(this).after($input);
|
||||
}
|
||||
});
|
||||
$.material = {
|
||||
"options": {
|
||||
"withRipples": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple",
|
||||
"inputElements": "input.form-control, textarea.form-control, select.form-control",
|
||||
"checkboxElements": ".checkbox > label > input[type=checkbox]",
|
||||
"radioElements": ".radio > label > input[type=radio]"
|
||||
},
|
||||
"checkbox": function(selector) {
|
||||
// Add fake-checkbox to material checkboxes
|
||||
$((selector) ? selector : this.options.checkboxElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.after("<span class=check></span>");
|
||||
},
|
||||
"radio": function(selector) {
|
||||
// Add fake-radio to material radios
|
||||
$((selector) ? selector : this.options.radioElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.after("<span class=circle></span><span class=check></span>");
|
||||
},
|
||||
"input": function(selector) {
|
||||
$((selector) ? selector : this.options.inputElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.each( function() {
|
||||
var $this = $(this);
|
||||
$this.wrap("<div class=form-control-wrapper></div>");
|
||||
$this.after("<span class=material-input></span>");
|
||||
if ($this.hasClass("floating-label")) {
|
||||
var placeholder = $this.attr("placeholder");
|
||||
$this.attr("placeholder", null).removeClass("floating-label");
|
||||
$this.after("<div class=floating-label>" + placeholder + "</div>");
|
||||
}
|
||||
if ($this.is(":empty") || $this.val() === null || $this.val() == "undefined" || $this.val() === "") {
|
||||
$this.addClass("empty");
|
||||
}
|
||||
if ($this.parent().next().is("[type=file]")) {
|
||||
$this.parent().addClass("fileinput");
|
||||
var $input = $this.parent().next().detach();
|
||||
$this.after($input);
|
||||
}
|
||||
});
|
||||
|
||||
$(document)
|
||||
.on("change", ".checkbox input", function() { $(this).blur(); })
|
||||
.on("keydown", ".form-control", function(e) {
|
||||
if(_isChar(e)) {
|
||||
$(this).removeClass("empty");
|
||||
}
|
||||
})
|
||||
.on("keyup change", ".form-control", function() {
|
||||
var $this = $(this);
|
||||
if($this.val() === "") {
|
||||
$this.addClass("empty");
|
||||
}
|
||||
})
|
||||
.on("focus", ".form-control-wrapper.fileinput", function() {
|
||||
$(this).find("input").addClass("focus");
|
||||
})
|
||||
.on("blur", ".form-control-wrapper.fileinput", function() {
|
||||
$(this).find("input").removeClass("focus");
|
||||
})
|
||||
.on("change", ".form-control-wrapper.fileinput [type=file]", function() {
|
||||
var value = "";
|
||||
$.each($(this)[0].files, function(i, file) {
|
||||
console.log(file);
|
||||
value += file.name + ", ";
|
||||
});
|
||||
value = value.substring(0, value.length - 2);
|
||||
if (value) {
|
||||
$(this).prev().removeClass("empty");
|
||||
} else {
|
||||
$(this).prev().addClass("empty");
|
||||
}
|
||||
$(this).prev().val(value);
|
||||
});
|
||||
},
|
||||
"ripples": function(selector) {
|
||||
ripples.init((selector) ? selector : this.options.withRipples);
|
||||
},
|
||||
"init": function() {
|
||||
this.ripples();
|
||||
this.input();
|
||||
this.checkbox();
|
||||
this.radio();
|
||||
}
|
||||
};
|
||||
initInputs();
|
||||
|
||||
// Support for "arrive.js" to dynamically detect creation of elements
|
||||
// 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("change", ".checkbox input", function() {
|
||||
$(this).blur();
|
||||
});
|
||||
|
||||
$(document).on("keydown", ".form-control", function(e) {
|
||||
var $this = $(this);
|
||||
if(isChar(e)) {
|
||||
$this.removeClass("empty");
|
||||
}
|
||||
});
|
||||
$(document).on("keyup", ".form-control", function() {
|
||||
var $this = $(this);
|
||||
if($this.val() === "") {
|
||||
$this.addClass("empty");
|
||||
}
|
||||
});
|
||||
|
||||
$(document)
|
||||
.on("focus", ".form-control-wrapper.fileinput", function() {
|
||||
$(this).find("input").addClass("focus");
|
||||
})
|
||||
.on("blur", ".form-control-wrapper.fileinput", function() {
|
||||
$(this).find("input").removeClass("focus");
|
||||
})
|
||||
.on("change", ".form-control-wrapper.fileinput [type=file]", function() {
|
||||
var value = "";
|
||||
$.each($(this)[0].files, function(i, file) {
|
||||
console.log(file);
|
||||
value += file.name + ", ";
|
||||
});
|
||||
value = value.substring(0, value.length - 2);
|
||||
if (value) {
|
||||
$(this).prev().removeClass("empty");
|
||||
} else {
|
||||
$(this).prev().addClass("empty");
|
||||
}
|
||||
$(this).prev().val(value);
|
||||
});
|
||||
});
|
||||
})(jQuery);
|
||||
|
|
|
|||
2
dist/js/material.min.js
vendored
2
dist/js/material.min.js
vendored
|
|
@ -1 +1 @@
|
|||
$(function(){function a(a){return"undefined"==typeof a.which?!0:"number"==typeof a.which&&a.which>0?!a.ctrlKey&&!a.metaKey&&!a.altKey&&8!=a.which:!1}"object"==typeof ripples&&ripples.init(".btn:not(.btn-link),.card-image,.navbar a:not(.withoutripple),.nav-tabs a:not(.withoutripple),.withripple");var b=function(){$(".checkbox > label > input").not(".bs-material").addClass("bs-material").after("<span class=check></span>"),$(".radio > label > input").not(".bs-material").addClass("bs-material").after("<span class=circle></span><span class=check></span>"),$("input.form-control, textarea.form-control, select.form-control").not(".bs-material").each(function(){if(!$(this).is(".bs-material")){if($(this).wrap("<div class=form-control-wrapper></div>"),$(this).after("<span class=material-input></span>"),$(this).hasClass("floating-label")){var a=$(this).attr("placeholder");$(this).attr("placeholder",null).removeClass("floating-label"),$(this).after("<div class=floating-label>"+a+"</div>")}if(($(this).is(":empty")||null===$(this).val()||"undefined"==$(this).val()||""===$(this).val())&&$(this).addClass("empty"),$(this).parent().next().is("[type=file]")){$(this).parent().addClass("fileinput");var b=$(this).parent().next().detach();$(this).after(b)}}})};b(),document.arrive&&document.arrive("input, textarea, select",function(){b()}),$(document).on("change",".checkbox input",function(){$(this).blur()}),$(document).on("keydown",".form-control",function(b){var c=$(this);a(b)&&c.removeClass("empty")}),$(document).on("keyup",".form-control",function(){var a=$(this);""===a.val()&&a.addClass("empty")}),$(document).on("focus",".form-control-wrapper.fileinput",function(){$(this).find("input").addClass("focus")}).on("blur",".form-control-wrapper.fileinput",function(){$(this).find("input").removeClass("focus")}).on("change",".form-control-wrapper.fileinput [type=file]",function(){var a="";$.each($(this)[0].files,function(b,c){console.log(c),a+=c.name+", "}),a=a.substring(0,a.length-2),a?$(this).prev().removeClass("empty"):$(this).prev().addClass("empty"),$(this).prev().val(a)})});
|
||||
!function(a){function b(a){return"undefined"==typeof a.which?!0:"number"==typeof a.which&&a.which>0?!a.ctrlKey&&!a.metaKey&&!a.altKey&&8!=a.which:!1}a.expr[":"].notmdproc=function(b){return a(b).data("mdproc")?!1:!0},a.material={options:{withRipples:".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple",inputElements:"input.form-control, textarea.form-control, select.form-control",checkboxElements:".checkbox > label > input[type=checkbox]",radioElements:".radio > label > input[type=radio]"},checkbox:function(b){a(b?b:this.options.checkboxElements).filter(":notmdproc").data("mdproc",!0).after("<span class=check></span>")},radio:function(b){a(b?b:this.options.radioElements).filter(":notmdproc").data("mdproc",!0).after("<span class=circle></span><span class=check></span>")},input:function(c){a(c?c:this.options.inputElements).filter(":notmdproc").data("mdproc",!0).each(function(){var b=a(this);if(b.wrap("<div class=form-control-wrapper></div>"),b.after("<span class=material-input></span>"),b.hasClass("floating-label")){var c=b.attr("placeholder");b.attr("placeholder",null).removeClass("floating-label"),b.after("<div class=floating-label>"+c+"</div>")}if((b.is(":empty")||null===b.val()||"undefined"==b.val()||""===b.val())&&b.addClass("empty"),b.parent().next().is("[type=file]")){b.parent().addClass("fileinput");var d=b.parent().next().detach();b.after(d)}}),a(document).on("change",".checkbox input",function(){a(this).blur()}).on("keydown",".form-control",function(c){b(c)&&a(this).removeClass("empty")}).on("keyup change",".form-control",function(){var b=a(this);""===b.val()&&b.addClass("empty")}).on("focus",".form-control-wrapper.fileinput",function(){a(this).find("input").addClass("focus")}).on("blur",".form-control-wrapper.fileinput",function(){a(this).find("input").removeClass("focus")}).on("change",".form-control-wrapper.fileinput [type=file]",function(){var b="";a.each(a(this)[0].files,function(a,c){console.log(c),b+=c.name+", "}),b=b.substring(0,b.length-2),b?a(this).prev().removeClass("empty"):a(this).prev().addClass("empty"),a(this).prev().val(b)})},ripples:function(a){ripples.init(a?a:this.options.withRipples)},init:function(){this.ripples(),this.input(),this.checkbox(),this.radio()}}}(jQuery);
|
||||
|
|
|
|||
|
|
@ -2309,6 +2309,7 @@
|
|||
<script src="//cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
$.material.init();
|
||||
$(".slider").noUiSlider({
|
||||
start: 40,
|
||||
connect: "lower",
|
||||
|
|
|
|||
|
|
@ -1,8 +1,16 @@
|
|||
/* globals ripples */
|
||||
/* globals jQuery, ripples */
|
||||
|
||||
$(function (){
|
||||
(function($) {
|
||||
// Selector to select only not already processed elements
|
||||
$.expr[":"].notmdproc = function(obj){
|
||||
if ($(obj).data("mdproc")) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
function isChar(evt) {
|
||||
function _isChar(evt) {
|
||||
if (typeof evt.which == "undefined") {
|
||||
return true;
|
||||
} else if (typeof evt.which == "number" && evt.which > 0) {
|
||||
|
|
@ -11,90 +19,92 @@ $(function (){
|
|||
return false;
|
||||
}
|
||||
|
||||
if (typeof ripples == "object") {
|
||||
ripples.init( ".btn:not(.btn-link)," +
|
||||
".card-image," +
|
||||
".navbar a:not(.withoutripple)," +
|
||||
".nav-tabs a:not(.withoutripple)," +
|
||||
".withripple" );
|
||||
}
|
||||
|
||||
var initInputs = function() {
|
||||
// Add fake-checkbox to material checkboxes
|
||||
$(".checkbox > label > input").not(".bs-material").addClass("bs-material").after("<span class=check></span>");
|
||||
|
||||
// Add fake-radio to material radios
|
||||
$(".radio > label > input").not(".bs-material").addClass("bs-material").after("<span class=circle></span><span class=check></span>");
|
||||
|
||||
// Add elements for material inputs
|
||||
$("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).after("<span class=material-input></span>");
|
||||
if ($(this).hasClass("floating-label")) {
|
||||
var placeholder = $(this).attr("placeholder");
|
||||
$(this).attr("placeholder", null).removeClass("floating-label");
|
||||
$(this).after("<div class=floating-label>" + placeholder + "</div>");
|
||||
}
|
||||
if ($(this).is(":empty") || $(this).val() === null || $(this).val() == "undefined" || $(this).val() === "") {
|
||||
$(this).addClass("empty");
|
||||
}
|
||||
|
||||
if ($(this).parent().next().is("[type=file]")) {
|
||||
$(this).parent().addClass("fileinput");
|
||||
var $input = $(this).parent().next().detach();
|
||||
$(this).after($input);
|
||||
}
|
||||
});
|
||||
$.material = {
|
||||
"options": {
|
||||
"withRipples": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple",
|
||||
"inputElements": "input.form-control, textarea.form-control, select.form-control",
|
||||
"checkboxElements": ".checkbox > label > input[type=checkbox]",
|
||||
"radioElements": ".radio > label > input[type=radio]"
|
||||
},
|
||||
"checkbox": function(selector) {
|
||||
// Add fake-checkbox to material checkboxes
|
||||
$((selector) ? selector : this.options.checkboxElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.after("<span class=check></span>");
|
||||
},
|
||||
"radio": function(selector) {
|
||||
// Add fake-radio to material radios
|
||||
$((selector) ? selector : this.options.radioElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.after("<span class=circle></span><span class=check></span>");
|
||||
},
|
||||
"input": function(selector) {
|
||||
$((selector) ? selector : this.options.inputElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.each( function() {
|
||||
var $this = $(this);
|
||||
$this.wrap("<div class=form-control-wrapper></div>");
|
||||
$this.after("<span class=material-input></span>");
|
||||
if ($this.hasClass("floating-label")) {
|
||||
var placeholder = $this.attr("placeholder");
|
||||
$this.attr("placeholder", null).removeClass("floating-label");
|
||||
$this.after("<div class=floating-label>" + placeholder + "</div>");
|
||||
}
|
||||
if ($this.is(":empty") || $this.val() === null || $this.val() == "undefined" || $this.val() === "") {
|
||||
$this.addClass("empty");
|
||||
}
|
||||
if ($this.parent().next().is("[type=file]")) {
|
||||
$this.parent().addClass("fileinput");
|
||||
var $input = $this.parent().next().detach();
|
||||
$this.after($input);
|
||||
}
|
||||
});
|
||||
|
||||
$(document)
|
||||
.on("change", ".checkbox input", function() { $(this).blur(); })
|
||||
.on("keydown", ".form-control", function(e) {
|
||||
if(_isChar(e)) {
|
||||
$(this).removeClass("empty");
|
||||
}
|
||||
})
|
||||
.on("keyup change", ".form-control", function() {
|
||||
var $this = $(this);
|
||||
if($this.val() === "") {
|
||||
$this.addClass("empty");
|
||||
}
|
||||
})
|
||||
.on("focus", ".form-control-wrapper.fileinput", function() {
|
||||
$(this).find("input").addClass("focus");
|
||||
})
|
||||
.on("blur", ".form-control-wrapper.fileinput", function() {
|
||||
$(this).find("input").removeClass("focus");
|
||||
})
|
||||
.on("change", ".form-control-wrapper.fileinput [type=file]", function() {
|
||||
var value = "";
|
||||
$.each($(this)[0].files, function(i, file) {
|
||||
console.log(file);
|
||||
value += file.name + ", ";
|
||||
});
|
||||
value = value.substring(0, value.length - 2);
|
||||
if (value) {
|
||||
$(this).prev().removeClass("empty");
|
||||
} else {
|
||||
$(this).prev().addClass("empty");
|
||||
}
|
||||
$(this).prev().val(value);
|
||||
});
|
||||
},
|
||||
"ripples": function(selector) {
|
||||
ripples.init((selector) ? selector : this.options.withRipples);
|
||||
},
|
||||
"init": function() {
|
||||
this.ripples();
|
||||
this.input();
|
||||
this.checkbox();
|
||||
this.radio();
|
||||
}
|
||||
};
|
||||
initInputs();
|
||||
|
||||
// Support for "arrive.js" to dynamically detect creation of elements
|
||||
// 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("change", ".checkbox input", function() {
|
||||
$(this).blur();
|
||||
});
|
||||
|
||||
$(document).on("keydown", ".form-control", function(e) {
|
||||
var $this = $(this);
|
||||
if(isChar(e)) {
|
||||
$this.removeClass("empty");
|
||||
}
|
||||
});
|
||||
$(document).on("keyup", ".form-control", function() {
|
||||
var $this = $(this);
|
||||
if($this.val() === "") {
|
||||
$this.addClass("empty");
|
||||
}
|
||||
});
|
||||
|
||||
$(document)
|
||||
.on("focus", ".form-control-wrapper.fileinput", function() {
|
||||
$(this).find("input").addClass("focus");
|
||||
})
|
||||
.on("blur", ".form-control-wrapper.fileinput", function() {
|
||||
$(this).find("input").removeClass("focus");
|
||||
})
|
||||
.on("change", ".form-control-wrapper.fileinput [type=file]", function() {
|
||||
var value = "";
|
||||
$.each($(this)[0].files, function(i, file) {
|
||||
console.log(file);
|
||||
value += file.name + ", ";
|
||||
});
|
||||
value = value.substring(0, value.length - 2);
|
||||
if (value) {
|
||||
$(this).prev().removeClass("empty");
|
||||
} else {
|
||||
$(this).prev().addClass("empty");
|
||||
}
|
||||
$(this).prev().val(value);
|
||||
});
|
||||
});
|
||||
})(jQuery);
|
||||
|
|
|
|||
|
|
@ -1,42 +1,47 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
<head>
|
||||
|
||||
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="material/css/ripples.min.css" rel="stylesheet">
|
||||
<link href="material/css/material-wfont.min.css" rel="stylesheet">
|
||||
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="material/css/ripples.min.css" rel="stylesheet">
|
||||
<link href="material/css/material-wfont.min.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body>
|
||||
|
||||
<!-- Your site -->
|
||||
<!-- Your site -->
|
||||
|
||||
<h1>You can add your site here.</h1>
|
||||
<h1>You can add your site here.</h1>
|
||||
|
||||
<h2>To ensure that material-design theme is working, check out the buttons below.</h2>
|
||||
<h2>To ensure that material-design theme is working, check out the buttons below.</h2>
|
||||
|
||||
<h3 class="text-muted">If you can see the ripple effect on clicking them, then you are good to go!</h3>
|
||||
<h3 class="text-muted">If you can see the ripple effect on clicking them, then you are good to go!</h3>
|
||||
|
||||
|
||||
<p class="bs-component">
|
||||
<a href="javascript:void(0)" class="btn btn-default">Default</a>
|
||||
<a href="javascript:void(0)" class="btn btn-primary">Primary</a>
|
||||
<a href="javascript:void(0)" class="btn btn-success">Success</a>
|
||||
<a href="javascript:void(0)" class="btn btn-info">Info</a>
|
||||
<a href="javascript:void(0)" class="btn btn-warning">Warning</a>
|
||||
<a href="javascript:void(0)" class="btn btn-danger">Danger</a>
|
||||
<a href="javascript:void(0)" class="btn btn-link">Link</a>
|
||||
</p>
|
||||
<p class="bs-component">
|
||||
<a href="javascript:void(0)" class="btn btn-default">Default</a>
|
||||
<a href="javascript:void(0)" class="btn btn-primary">Primary</a>
|
||||
<a href="javascript:void(0)" class="btn btn-success">Success</a>
|
||||
<a href="javascript:void(0)" class="btn btn-info">Info</a>
|
||||
<a href="javascript:void(0)" class="btn btn-warning">Warning</a>
|
||||
<a href="javascript:void(0)" class="btn btn-danger">Danger</a>
|
||||
<a href="javascript:void(0)" class="btn btn-link">Link</a>
|
||||
</p>
|
||||
|
||||
<!-- Your site ends -->
|
||||
<!-- Your site ends -->
|
||||
|
||||
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
|
||||
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
|
||||
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
|
||||
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
|
||||
|
||||
<script src="material/js/ripples.min.js"></script>
|
||||
<script src="material/js/material.min.js"></script>
|
||||
<script src="material/js/ripples.min.js"></script>
|
||||
<script src="material/js/material.min.js"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$.material.init();
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,16 @@
|
|||
/* globals ripples */
|
||||
/* globals jQuery, ripples */
|
||||
|
||||
$(function (){
|
||||
(function($) {
|
||||
// Selector to select only not already processed elements
|
||||
$.expr[":"].notmdproc = function(obj){
|
||||
if ($(obj).data("mdproc")) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
function isChar(evt) {
|
||||
function _isChar(evt) {
|
||||
if (typeof evt.which == "undefined") {
|
||||
return true;
|
||||
} else if (typeof evt.which == "number" && evt.which > 0) {
|
||||
|
|
@ -11,90 +19,95 @@ $(function (){
|
|||
return false;
|
||||
}
|
||||
|
||||
if (typeof ripples == "object") {
|
||||
ripples.init( ".btn:not(.btn-link)," +
|
||||
".card-image," +
|
||||
".navbar a:not(.withoutripple)," +
|
||||
".nav-tabs a:not(.withoutripple)," +
|
||||
".withripple" );
|
||||
}
|
||||
|
||||
var initInputs = function() {
|
||||
// Add fake-checkbox to material checkboxes
|
||||
$(".checkbox > label > input").not(".bs-material").addClass("bs-material").after("<span class=check></span>");
|
||||
|
||||
// Add fake-radio to material radios
|
||||
$(".radio > label > input").not(".bs-material").addClass("bs-material").after("<span class=circle></span><span class=check></span>");
|
||||
|
||||
// Add elements for material inputs
|
||||
$("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).after("<span class=material-input></span>");
|
||||
if ($(this).hasClass("floating-label")) {
|
||||
var placeholder = $(this).attr("placeholder");
|
||||
$(this).attr("placeholder", null).removeClass("floating-label");
|
||||
$(this).after("<div class=floating-label>" + placeholder + "</div>");
|
||||
}
|
||||
if ($(this).is(":empty") || $(this).val() === null || $(this).val() == "undefined" || $(this).val() === "") {
|
||||
$(this).addClass("empty");
|
||||
}
|
||||
|
||||
if ($(this).parent().next().is("[type=file]")) {
|
||||
$(this).parent().addClass("fileinput");
|
||||
var $input = $(this).parent().next().detach();
|
||||
$(this).after($input);
|
||||
}
|
||||
});
|
||||
$.material = {
|
||||
"options": {
|
||||
"withRipples": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple",
|
||||
"inputElements": "input.form-control, textarea.form-control, select.form-control",
|
||||
"checkboxElements": ".checkbox > label > input[type=checkbox]",
|
||||
"radioElements": ".radio > label > input[type=radio]"
|
||||
},
|
||||
"checkbox": function(selector) {
|
||||
// Add fake-checkbox to material checkboxes
|
||||
$((selector) ? selector : this.options.checkboxElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.after("<span class=check></span>");
|
||||
},
|
||||
"radio": function(selector) {
|
||||
// Add fake-radio to material radios
|
||||
$((selector) ? selector : this.options.radioElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.after("<span class=circle></span><span class=check></span>");
|
||||
},
|
||||
"input": function(selector) {
|
||||
$((selector) ? selector : this.options.inputElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.each( function() {
|
||||
var $this = $(this);
|
||||
$this.wrap("<div class=form-control-wrapper></div>");
|
||||
$this.after("<span class=material-input></span>");
|
||||
if ($this.hasClass("floating-label")) {
|
||||
var placeholder = $this.attr("placeholder");
|
||||
$this.attr("placeholder", null).removeClass("floating-label");
|
||||
$this.after("<div class=floating-label>" + placeholder + "</div>");
|
||||
}
|
||||
if ($this.is(":empty") || $this.val() === null || $this.val() == "undefined" || $this.val() === "") {
|
||||
$this.addClass("empty");
|
||||
}
|
||||
if ($this.parent().next().is("[type=file]")) {
|
||||
$this.parent().addClass("fileinput");
|
||||
var $input = $this.parent().next().detach();
|
||||
$this.after($input);
|
||||
}
|
||||
});
|
||||
|
||||
$(document)
|
||||
.on("change", ".checkbox input", function() { $(this).blur(); })
|
||||
.on("keydown", ".form-control", function(e) {
|
||||
if(_isChar(e)) {
|
||||
$(this).removeClass("empty");
|
||||
}
|
||||
})
|
||||
.on("keyup change", ".form-control", function() {
|
||||
var $this = $(this);
|
||||
if($this.val() === "") {
|
||||
$this.addClass("empty");
|
||||
}
|
||||
})
|
||||
.on("focus", ".form-control-wrapper.fileinput", function() {
|
||||
$(this).find("input").addClass("focus");
|
||||
})
|
||||
.on("blur", ".form-control-wrapper.fileinput", function() {
|
||||
$(this).find("input").removeClass("focus");
|
||||
})
|
||||
.on("change", ".form-control-wrapper.fileinput [type=file]", function() {
|
||||
var value = "";
|
||||
$.each($(this)[0].files, function(i, file) {
|
||||
console.log(file);
|
||||
value += file.name + ", ";
|
||||
});
|
||||
value = value.substring(0, value.length - 2);
|
||||
if (value) {
|
||||
$(this).prev().removeClass("empty");
|
||||
} else {
|
||||
$(this).prev().addClass("empty");
|
||||
}
|
||||
$(this).prev().val(value);
|
||||
});
|
||||
},
|
||||
"ripples": function(selector) {
|
||||
ripples.init((selector) ? selector : this.options.withRipples);
|
||||
},
|
||||
"init": function() {
|
||||
this.ripples();
|
||||
this.input();
|
||||
this.checkbox();
|
||||
this.radio();
|
||||
}
|
||||
};
|
||||
initInputs();
|
||||
})(jQuery);
|
||||
|
||||
// Support for "arrive.js" to dynamically detect creation of elements
|
||||
// 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();
|
||||
});
|
||||
}
|
||||
//$.material.init();
|
||||
|
||||
$(document).on("change", ".checkbox input", function() {
|
||||
$(this).blur();
|
||||
});
|
||||
|
||||
$(document).on("keydown", ".form-control", function(e) {
|
||||
var $this = $(this);
|
||||
if(isChar(e)) {
|
||||
$this.removeClass("empty");
|
||||
}
|
||||
});
|
||||
$(document).on("keyup", ".form-control", function() {
|
||||
var $this = $(this);
|
||||
if($this.val() === "") {
|
||||
$this.addClass("empty");
|
||||
}
|
||||
});
|
||||
|
||||
$(document)
|
||||
.on("focus", ".form-control-wrapper.fileinput", function() {
|
||||
$(this).find("input").addClass("focus");
|
||||
})
|
||||
.on("blur", ".form-control-wrapper.fileinput", function() {
|
||||
$(this).find("input").removeClass("focus");
|
||||
})
|
||||
.on("change", ".form-control-wrapper.fileinput [type=file]", function() {
|
||||
var value = "";
|
||||
$.each($(this)[0].files, function(i, file) {
|
||||
console.log(file);
|
||||
value += file.name + ", ";
|
||||
});
|
||||
value = value.substring(0, value.length - 2);
|
||||
if (value) {
|
||||
$(this).prev().removeClass("empty");
|
||||
} else {
|
||||
$(this).prev().addClass("empty");
|
||||
}
|
||||
$(this).prev().val(value);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
2
template/material/js/material.min.js
vendored
2
template/material/js/material.min.js
vendored
|
|
@ -1 +1 @@
|
|||
$(function(){function a(a){return"undefined"==typeof a.which?!0:"number"==typeof a.which&&a.which>0?!a.ctrlKey&&!a.metaKey&&!a.altKey&&8!=a.which:!1}"object"==typeof ripples&&ripples.init(".btn:not(.btn-link),.card-image,.navbar a:not(.withoutripple),.nav-tabs a:not(.withoutripple),.withripple");var b=function(){$(".checkbox > label > input").not(".bs-material").addClass("bs-material").after("<span class=check></span>"),$(".radio > label > input").not(".bs-material").addClass("bs-material").after("<span class=circle></span><span class=check></span>"),$("input.form-control, textarea.form-control, select.form-control").not(".bs-material").each(function(){if(!$(this).is(".bs-material")){if($(this).wrap("<div class=form-control-wrapper></div>"),$(this).after("<span class=material-input></span>"),$(this).hasClass("floating-label")){var a=$(this).attr("placeholder");$(this).attr("placeholder",null).removeClass("floating-label"),$(this).after("<div class=floating-label>"+a+"</div>")}if(($(this).is(":empty")||null===$(this).val()||"undefined"==$(this).val()||""===$(this).val())&&$(this).addClass("empty"),$(this).parent().next().is("[type=file]")){$(this).parent().addClass("fileinput");var b=$(this).parent().next().detach();$(this).after(b)}}})};b(),document.arrive&&document.arrive("input, textarea, select",function(){b()}),$(document).on("change",".checkbox input",function(){$(this).blur()}),$(document).on("keydown",".form-control",function(b){var c=$(this);a(b)&&c.removeClass("empty")}),$(document).on("keyup",".form-control",function(){var a=$(this);""===a.val()&&a.addClass("empty")}),$(document).on("focus",".form-control-wrapper.fileinput",function(){$(this).find("input").addClass("focus")}).on("blur",".form-control-wrapper.fileinput",function(){$(this).find("input").removeClass("focus")}).on("change",".form-control-wrapper.fileinput [type=file]",function(){var a="";$.each($(this)[0].files,function(b,c){console.log(c),a+=c.name+", "}),a=a.substring(0,a.length-2),a?$(this).prev().removeClass("empty"):$(this).prev().addClass("empty"),$(this).prev().val(a)})});
|
||||
!function(a){function b(a){return"undefined"==typeof a.which?!0:"number"==typeof a.which&&a.which>0?!a.ctrlKey&&!a.metaKey&&!a.altKey&&8!=a.which:!1}a.expr[":"].notmdproc=function(b){return a(b).data("mdproc")?!1:!0},a.material={options:{withRipples:".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple",inputElements:"input.form-control, textarea.form-control, select.form-control",checkboxElements:".checkbox > label > input[type=checkbox]",radioElements:".radio > label > input[type=radio]"},checkbox:function(b){a(b?b:this.options.checkboxElements).filter(":notmdproc").data("mdproc",!0).after("<span class=check></span>")},radio:function(b){a(b?b:this.options.radioElements).filter(":notmdproc").data("mdproc",!0).after("<span class=circle></span><span class=check></span>")},input:function(c){a(c?c:this.options.inputElements).filter(":notmdproc").data("mdproc",!0).each(function(){var b=a(this);if(b.wrap("<div class=form-control-wrapper></div>"),b.after("<span class=material-input></span>"),b.hasClass("floating-label")){var c=b.attr("placeholder");b.attr("placeholder",null).removeClass("floating-label"),b.after("<div class=floating-label>"+c+"</div>")}if((b.is(":empty")||null===b.val()||"undefined"==b.val()||""===b.val())&&b.addClass("empty"),b.parent().next().is("[type=file]")){b.parent().addClass("fileinput");var d=b.parent().next().detach();b.after(d)}}),a(document).on("change",".checkbox input",function(){a(this).blur()}).on("keydown",".form-control",function(c){b(c)&&a(this).removeClass("empty")}).on("keyup change",".form-control",function(){var b=a(this);""===b.val()&&b.addClass("empty")}).on("focus",".form-control-wrapper.fileinput",function(){a(this).find("input").addClass("focus")}).on("blur",".form-control-wrapper.fileinput",function(){a(this).find("input").removeClass("focus")}).on("change",".form-control-wrapper.fileinput [type=file]",function(){var b="";a.each(a(this)[0].files,function(a,c){console.log(c),b+=c.name+", "}),b=b.substring(0,b.length-2),b?a(this).prev().removeClass("empty"):a(this).prev().addClass("empty"),a(this).prev().val(b)})},ripples:function(a){ripples.init(a?a:this.options.withRipples)},init:function(){this.ripples(),this.input(),this.checkbox(),this.radio()}}}(jQuery);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user