mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-09-21 19:39:10 +03:00
Code Issues Packages Projects Releases Wiki Activity

added file input support

Browse Source
This commit is contained in:
Federico Zivolo 2014-09-18 10:40:57 +02:00
parent 1566d7044a
commit d2ce2c6b85
5 changed files with 61 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
css-compiled/material.css
View File

@ -1798,6 +1798,17 @@ select.form-control.focus {
opacity: 0;
}
}
.form-control-wrapper input[type=file] {
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
legend {
border-bottom: 0;
}

7
demo/index.html
View File

@ -1284,6 +1284,13 @@
</div>
</div>
</div>
<div class="form-group">
<label for="inputFile" class="col-lg-2 control-label">File</label>
<div class="col-lg-10">
<input type="text" readonly class="form-control floating-label" placeholder="Browse...">
<input type="file" id="inputFile" multiple>
</div>
</div>
<div class="form-group">
<label for="textArea" class="col-lg-2 control-label">Textarea</label>
<div class="col-lg-10">

14
less/inputs.less
View File

@ -205,3 +205,17 @@ select.form-control {
@-ms-keyframes input-highlight {.keyframe-input-highlight()}
@-o-keyframes input-highlight {.keyframe-input-highlight()}
@keyframes input-highlight {.keyframe-input-highlight()}
// Input files (kinda hack)
.form-control-wrapper input[type=file] {
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}

2
less/test.css
View File

@ -1,4 +1,4 @@
/* Generated by less 1.7.0 */
/* Generated by less 1.7.5 */
.btn-default {
color: #000000;
}

29
scripts/material.js
View File

@ -22,6 +22,12 @@ $(function (){
if ($(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("keyup change", ".form-control", function() {
@ -31,8 +37,29 @@ $(function (){
$(this).addClass("empty");
}
});
$(document).on("keydown", ".form-control", function() {
$(document).on("keydown change", ".form-control", function() {
$(this).removeClass("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);
});
});