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

Added file input variation samples

Browse Source
This commit is contained in:
Kevin Ross 2015-11-17 10:18:37 -06:00
parent d6f7d631e4
commit e503baf285
6 changed files with 159 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bootstrap-elements.html
View File

@ -1909,7 +1909,7 @@
<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="text" readonly class="form-control" placeholder="Browse...">
<input type="file" id="inputFile" multiple>
</div>
</div>

32
index.html
View File

@ -53,6 +53,7 @@
<li class="withripple" data-target="#radio-button">Radio Button</li>
<li class="withripple" data-target="#toggle-button">Toggle Button</li>
<li class="withripple" data-target="#input">Input</li>
<li class="withripple" data-target="#fileinput">File Input</li>
<li class="withripple" data-target="#navbar">Navbar</li>
<li class="withripple" data-target="#progress-bar">Progress Bar</li>
<li class="withripple" data-target="#slider">Slider</li>
@ -522,6 +523,37 @@
</div>
</div>
</div>
<div class="well page" id="fileinput">
<h1 class="header">File Input</h1>
<div class="form-group">
<label class="control-label" for="inputFile2">Static label</label>
<input type="file" id="inputFile2" multiple>
<input type="text" readonly class="form-control" placeholder="Browse2...">
</div>
<div class="form-group">
<!--<label class="control-label" for="inputFile3">File</label>-->
<input type="file" id="inputFile3" multiple>
<input type="text" readonly class="form-control" placeholder="Placeholder only...">
</div>
<div class="form-group">
<input type="file" id="inputFile4" multiple>
<div class="input-group">
<input type="text" readonly class="form-control" placeholder="Placeholder w/input-group...">
<span class="input-group-btn">
<button type="button" class="btn btn-fab btn-fab-mini btn-raised btn-sm">
<i class="mdi-editor-attach-file"></i>
</button>
</span>
</div>
</div>
</div>
<div class="well page" id="navbar">
<h1 class="header">Navbar</h1>

6
less/_buttons.less
View File

@ -54,7 +54,8 @@
}
.btn {
.btn,
.input-group-btn .btn {
&.btn-flat {
background: none;
box-shadow: none;
@ -92,7 +93,8 @@
&:active {
.shadow-z-1-hover();
}
&, .ripple-wrapper {
&,
.ripple-wrapper {
border-radius: 100%;
}
&.btn-fab-mini {

16
less/_inputs.less
View File

@ -265,14 +265,14 @@ select.form-control {
// Input files (kinda hack)
.form-group input[type=file] {
opacity: 0;
//position: absolute;
//top: 0;
//right: 0;
//bottom: 0;
//left: 0;
//width: 100%;
//height: 100%;
//z-index: 100;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
// Ugly override of Bootstrap border

33
scripts/material.js
View File

@ -110,13 +110,17 @@
}
else {
// If it has a label, based on the way the css is written with the adjacent sibling selector `~`,
// we need the label to be *after* the input for it to work properly.
// See: http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector
// we need the label to be *after* the input for it to work properly. (we use these infrequently now that
// .is-focused and .is-empty is standardized on the .form-group.
// @see: http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector
// Attach it to the same parent, regardless (not necessarily after input) which could cause problems,
// but this is up to the user.
var $label = $formGroup.find("label.floating-label");
if($label.length > 0){
console.debug("FIXME moving label"); // FIXME not sure we want to do this for input-groups
var $labelParent = $label.parent(); // likely the form-group, but may not be in the case of input-groups
$label.detach();
$input.after($label);
$labelParent.append($label);
//$input.after($label);
}
}
@ -129,10 +133,10 @@
$formGroup.append("<span class='material-input'></span>");
// Support for file input
if ($formGroup.next().is("[type=file]")) {
$formGroup.addClass("fileinput");
var $nextInput = $formGroup.next().detach();
$input.after($nextInput);
if ($formGroup.find("input[type=file]").length > 0) {
$formGroup.addClass("is-fileinput");
//var $nextInput = $formGroup.next().detach();
//$input.after($nextInput);
}
});
},
@ -169,26 +173,27 @@
$formGroup.addClass("has-error");
}
})
.on("focus", ".form-control, .form-group.fileinput", function() {
.on("focus", ".form-control, .form-group.is-fileinput", function() {
$(this).closest(".form-group").addClass("is-focused"); // add class to form-group
})
.on("blur", ".form-control, .form-group.fileinput", function() {
.on("blur", ".form-control, .form-group.is-fileinput", function() {
$(this).closest(".form-group").removeClass("is-focused"); // remove class from form-group
})
.on("change", ".form-group.fileinput [type=file]", function() {
var $this = $(this);
// set the fileinput readonly field with the name of the file
.on("change", ".form-group.is-fileinput input[type='file']", function() {
var $input = $(this);
var $formGroup = $input.closest(".form-group");
var value = "";
$.each(this.files, function(i, file) {
value += file.name + ", ";
});
value = value.substring(0, value.length - 2);
var $formGroup = $this.closest(".form-group");
if (value) {
$formGroup.removeClass("is-empty");
} else {
$formGroup.addClass("is-empty");
}
$this.prev().val(value);
$formGroup.find("input.form-control[readonly]").val(value);
});
},
"ripples": function(selector) {

169
test.html
View File

@ -31,60 +31,77 @@
<div class="container-fluid">
<div class="well bs-component">
<form class="form-horizontal">
<fieldset>
<legend>Legend</legend>
<!--<div class="form-group">-->
<!--<label for="inputFile" class="col-lg-2 control-label">File</label>-->
<!--<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 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 class="control-label floating-label" for="addon2">Input addons with floating label</label>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" id="addon2" class="form-control">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Button</button>
</span>
</div>
</div>
<!--<h2>File inputs</h2>-->
<!--<div class="form-group">-->
<!--<label class="control-label floating-label" for="faddon1">Input group with file</label>-->
<!--<div class="input-group">-->
<!--<span class="input-group-addon"><i class="mdi-editor-attach-file"></i></span>-->
<!--<input type="text" class="form-control" id="faddon1">-->
<!--</div>-->
<!--</div>-->
<!--<div class="form-group">-->
<!--<label for="f1" class="control-label floating-label">Browse...(floating label)</label>-->
<!--<input type="file" id="f1" class="form-control">-->
<!--<p class="help-block">Example block-level help text here.</p>-->
<!--</div>-->
<!--<div class="form-group">-->
<!--<label for="f2" class="form-control">Browse...(static label)</label>-->
<!--<input type="file" id="f2" class="form-control">-->
<!--<p class="help-block">Example block-level help text here.</p>-->
<!--</div>-->
</fieldset>
</form>
<!--
<div class="fileinput input-group fileinput-new" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput">
<i class="glyphicon glyphicon-file fileinput-exists"></i>
<span class="fileinput-filename"></span>
</div>
</div>
<span class="input-group-addon btn btn-default btn-file">
<span class="fileinput-new">Select file</span>
<span class="fileinput-exists">Change</span>
<input type="hidden" value="" name=""><input type="file" name="">
</span>
<a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
-->
<div class="row">
<div class="form-group">
<label for="inputFile" class="col-lg-2 control-label">Static Label</label>
<div class="col-lg-10">
<input type="text" readonly class="form-control" placeholder="Browse...">
<input type="file" id="inputFile" multiple>
</div>
</div>
</div>
<!-- this works
<div class="form-group">
<input type="file" id="inputFile" multiple>
<input type="text" readonly class="form-control" placeholder="Browse...">
</div>
-->
<!--<h2>File inputs</h2>-->
<!-- http://codepen.io/kybarg/pen/PqaOOg -->
<div class="form-group">
<label class="control-label" for="inputFile2">Static label</label>
<input type="file" id="inputFile2" multiple>
<input type="text" readonly class="form-control" placeholder="Browse2...">
</div>
<div class="form-group">
<!--<label class="control-label" for="inputFile3">File</label>-->
<input type="file" id="inputFile3" multiple>
<input type="text" readonly class="form-control" placeholder="Placeholder only...">
</div>
<div class="form-group">
<input type="file" id="inputFile4" multiple>
<div class="input-group">
<input type="text" readonly class="form-control" placeholder="Placeholder w/input-group...">
<span class="input-group-btn">
<button type="button" class="btn btn-fab btn-fab-mini btn-raised btn-sm">
<i class="mdi-editor-attach-file"></i>
</button>
</span>
</div>
</div>
</div>
<!-- Twitter Bootstrap -->
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
@ -98,36 +115,40 @@
<!-- Sliders -->
<!--<script src="//cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.js"></script>-->
<!--<script>-->
<!--$(function () {-->
<!--$.material.init();-->
<!--$(".shor").noUiSlider({-->
<!--start: 40,-->
<!--connect: "lower",-->
<!--range: {-->
<!--min: 0,-->
<!--max: 100-->
<!--}-->
<!--});-->
<!--
<script src="//cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.js"></script>
<script>
$(function () {
$.material.init();
$(".shor").noUiSlider({
start: 40,
connect: "lower",
range: {
min: 0,
max: 100
}
});
<!--$(".svert").noUiSlider({-->
<!--orientation: "vertical",-->
<!--start: 40,-->
<!--connect: "lower",-->
<!--range: {-->
<!--min: 0,-->
<!--max: 100-->
<!--}-->
<!--});-->
<!--});-->
<!--</script>-->
$(".svert").noUiSlider({
orientation: "vertical",
start: 40,
connect: "lower",
range: {
min: 0,
max: 100
}
});
});
</script>
-->
<!-- Dropdown.js -->
<!--<script src="https://cdn.rawgit.com/FezVrasta/dropdown.js/master/jquery.dropdown.js"></script>-->
<!--<script>-->
<!--$("#dropdown-menu select").dropdown();-->
<!--</script>-->
<!--
<script src="https://cdn.rawgit.com/FezVrasta/dropdown.js/master/jquery.dropdown.js"></script>
<script>
$("#dropdown-menu select").dropdown();
</script>
-->
</body>
</html>