JS Tutorial
- Overview
- Documents
Bootstrap Filestyle is a plugin for jquery-based component library could Twitter Bootstrap, used to style the file fields of the forms.
This plugin has an interesting way to present a form for sending files so attractive, while being simple and efficient.
Source: markusslima.github.io
1. INCLUDE CSS AND JS FILES
<link href="css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" charset="utf-8"></script> <script type="text/javascript" src="js/bootstrap.min.js" charset="utf-8"></script> <script type="text/javascript" src="js/bootstrap-filestyle.min.js" charset="utf-8"></script>
2. VIA HTML
<input type="file" class="filestyle" data-classButton="btn btn-primary" data-input="false">
3. VIA JAVASCRIPT
$(":file").filestyle();
4. OPTIONS
input - Enables or disables the input text. Type: Boolean, Default: true
Via JavaScript:
$(":file").filestyle({input: false});
Via data attributes:
<input type="file" class="filestyle" data-input="false">
icon - Enables or disables the button icon. Type: Boolean, Default: true
Via JavaScript:
$(":file").filestyle({icon: false});
Via data attributes:
<input type="file" class="filestyle" data-icon="false">
buttonText - Changes the button text. Type: String, Default: "Choose file"
Via JavaScript:
$(":file").filestyle({buttonText: "Find file"});
Via data attributes:
<input type="file" class="filestyle" data-buttonText="Find file">
classButton - Change classes bootstrap button. Type: String, Default: "btn"
Via JavaScript:
$(":file").filestyle({classButton: "btn btn-primary"});
Via data attributes:
<input type="file" class="filestyle" data-classButton="btn btn-primary">
classInput - Change classes bootstrap input text. Type: String, Default: "input-large"
Via JavaScript:
$(":file").filestyle({classInput: "input-small"});
Via data attributes:
<input type="file" class="filestyle" data-classInput="input-small">
classIcon - Change classes bootstrap icons. Type: String, Default: "icon-folder-open"
Via JavaScript:
$(":file").filestyle({classIcon: "icon-plus"});
Via data attributes:
<input type="file" class="filestyle" data-classIcon="icon-plus">
disabled - Disabled button. Type: Bool, Default: false
Via JavaScript:
$(":file").filestyle({disabled: true});
Via data attributes:
<input type="file" class="filestyle" data-disabled="true">
5. METHODS
clear - Clear selected files.
$(":file").filestyle('clear');
destroy - Destroy a filestyle completely.
$(":file").filestyle('destroy');
disabled - Disabled a filestyle.
// get
$(":file").filestyle('disabled');
// set
$(":file").filestyle({'disabled': true});
input - Set or get the value of the input option.
// get
$(":file").filestyle('input');
// set
$(":file").filestyle({'input': false});
icon - Set or get the value of the icon option.
// get
$(":file").filestyle('icon');
// set
$(":file").filestyle({'icon': false});
buttonText - Set or get the text of the button.
// get
$(":file").filestyle('buttonText');
// set
$(":file").filestyle({'buttonText': 'Loading...'});
classButton - Set or get the class of the button.
// get
$(":file").filestyle('classButton');
// set
$(":file").filestyle({'classButton': 'btn btn-danger'});
classIcon - Set or get the class of the icon.
// get
$(":file").filestyle('classIcon');
// set
$(":file").filestyle({'classIcon': 'icon-plus'});
classInput - Set or get the class of the input text.
// get
$(":file").filestyle('classInput');
// set
$(":file").filestyle({'classInput': 'input-small'});
