mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-02-03 05:14:16 +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> <label for="inputFile" class="col-lg-2 control-label">File</label>
<div class="col-lg-10"> <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> <input type="file" id="inputFile" multiple>
</div> </div>
</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="#radio-button">Radio Button</li>
<li class="withripple" data-target="#toggle-button">Toggle 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="#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="#navbar">Navbar</li>
<li class="withripple" data-target="#progress-bar">Progress Bar</li> <li class="withripple" data-target="#progress-bar">Progress Bar</li>
<li class="withripple" data-target="#slider">Slider</li> <li class="withripple" data-target="#slider">Slider</li>
@ -522,6 +523,37 @@
</div> </div>
</div> </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"> <div class="well page" id="navbar">
<h1 class="header">Navbar</h1> <h1 class="header">Navbar</h1>

6
less/_buttons.less
View File

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

16
less/_inputs.less
View File

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

33
scripts/material.js
View File

@ -110,13 +110,17 @@
} }
else { else {
// If it has a label, based on the way the css is written with the adjacent sibling selector `~`, // 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. // we need the label to be *after* the input for it to work properly. (we use these infrequently now that
// See: http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector // .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"); var $label = $formGroup.find("label.floating-label");
if($label.length > 0){ 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(); $label.detach();
$input.after($label); $labelParent.append($label);
//$input.after($label);
} }
} }
@ -129,10 +133,10 @@
$formGroup.append("<span class='material-input'></span>"); $formGroup.append("<span class='material-input'></span>");
// Support for file input // Support for file input
if ($formGroup.next().is("[type=file]")) { if ($formGroup.find("input[type=file]").length > 0) {
$formGroup.addClass("fileinput"); $formGroup.addClass("is-fileinput");
var $nextInput = $formGroup.next().detach(); //var $nextInput = $formGroup.next().detach();
$input.after($nextInput); //$input.after($nextInput);
} }
}); });
}, },
@ -169,26 +173,27 @@
$formGroup.addClass("has-error"); $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 $(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 $(this).closest(".form-group").removeClass("is-focused"); // remove class from form-group
}) })
.on("change", ".form-group.fileinput [type=file]", function() { // set the fileinput readonly field with the name of the file
var $this = $(this); .on("change", ".form-group.is-fileinput input[type='file']", function() {
var $input = $(this);
var $formGroup = $input.closest(".form-group");
var value = ""; var value = "";
$.each(this.files, function(i, file) { $.each(this.files, function(i, file) {
value += file.name + ", "; value += file.name + ", ";
}); });
value = value.substring(0, value.length - 2); value = value.substring(0, value.length - 2);
var $formGroup = $this.closest(".form-group");
if (value) { if (value) {
$formGroup.removeClass("is-empty"); $formGroup.removeClass("is-empty");
} else { } else {
$formGroup.addClass("is-empty"); $formGroup.addClass("is-empty");
} }
$this.prev().val(value); $formGroup.find("input.form-control[readonly]").val(value);
}); });
}, },
"ripples": function(selector) { "ripples": function(selector) {

145
test.html
View File

@ -31,10 +31,6 @@
<div class="container-fluid"> <div class="container-fluid">
<div class="well bs-component">
<form class="form-horizontal">
<fieldset>
<legend>Legend</legend>
<!--<div class="form-group">--> <!--<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>-->
@ -45,46 +41,67 @@
<!--</div>--> <!--</div>-->
<!--</div>--> <!--</div>-->
<!--
<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>
<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"> <div class="form-group">
<label class="control-label floating-label" for="addon2">Input addons with floating label</label> <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"> <div class="input-group">
<span class="input-group-addon">$</span> <input type="text" readonly class="form-control" placeholder="Placeholder w/input-group...">
<input type="text" id="addon2" class="form-control">
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn btn-primary" type="button">Button</button> <button type="button" class="btn btn-fab btn-fab-mini btn-raised btn-sm">
<i class="mdi-editor-attach-file"></i>
</button>
</span> </span>
</div> </div>
</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> </div>
</div>
<!-- Twitter Bootstrap --> <!-- Twitter Bootstrap -->
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
@ -98,36 +115,40 @@
<!-- Sliders --> <!-- Sliders -->
<!--<script src="//cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.js"></script>--> <!--
<!--<script>--> <script src="//cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.js"></script>
<!--$(function () {--> <script>
<!--$.material.init();--> $(function () {
<!--$(".shor").noUiSlider({--> $.material.init();
<!--start: 40,--> $(".shor").noUiSlider({
<!--connect: "lower",--> start: 40,
<!--range: {--> connect: "lower",
<!--min: 0,--> range: {
<!--max: 100--> min: 0,
<!--}--> max: 100
<!--});--> }
});
<!--$(".svert").noUiSlider({--> $(".svert").noUiSlider({
<!--orientation: "vertical",--> orientation: "vertical",
<!--start: 40,--> start: 40,
<!--connect: "lower",--> connect: "lower",
<!--range: {--> range: {
<!--min: 0,--> min: 0,
<!--max: 100--> max: 100
<!--}--> }
<!--});--> });
<!--});--> });
<!--</script>--> </script>
-->
<!-- Dropdown.js --> <!-- Dropdown.js -->
<!--<script src="https://cdn.rawgit.com/FezVrasta/dropdown.js/master/jquery.dropdown.js"></script>--> <!--
<!--<script>--> <script src="https://cdn.rawgit.com/FezVrasta/dropdown.js/master/jquery.dropdown.js"></script>
<!--$("#dropdown-menu select").dropdown();--> <script>
<!--</script>--> $("#dropdown-menu select").dropdown();
</script>
-->
</body> </body>
</html> </html>