-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
145 lines (113 loc) · 5.04 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Demo for Bootstrap File Input styler</title>
<meta name="description" content="Demo of Bootstrap File Input which standardizes all file inputs to look like Twitter Bootstrap buttons">
<meta name="author" content="Gregory Pike">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- Place favicon.ico and apple-touch-icon.png in the root of your domain and delete these references -->
<!--[if IE]><![endif]--><!-- Used to speed CSS loading -->
<link rel="stylesheet" href="http://necolas.github.com/normalize.css/2.0.1/normalize.css">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet">
<link rel="stylesheet" href="demo-style.css">
<!-- <link rel="stylesheet" href="bootstrap.file-input.css?v=1.0"> -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<body onload="prettyPrint()">
<!-- BEGIN DEMO -->
<div class="container">
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Twitter Bootstrap File Input</a>
</div>
</div>
</nav>
<div class="jumbotron">
<h1>Check it out</h1>
<input type="file">
<p>File input fields look differently in all browsers. It's a pain in the arse to design something that looks nice in all browsers and it sucks that support for this is not available in <a href="http://twitter.github.com/bootstrap/">Twitter Bootstrap.</a></p>
<p>This jQuery plugin is designed to make all file input fields look like standard Twitter Bootstrap buttons</p>
</div>
<h3>Why should you want this plugin?</h3>
<p>If you use Twitter Bootstrap then you know how awesome it is for styling a website with minimal effort.</p>
<ul>
<li>Standardize your file input with a button that looks the same in all browsers</li>
<li>Drop it in and walk away. No additional tags or attributes necessary.</li>
</ul>
<h3>Usage</h3>
<h6>Dependencies:</h6>
<ul>
<li><code>jQuery</code> <small><a href="http://jquery.com/">http://jquery.com/</a></small></li>
<li><code>Twitter Bootstrap</code> <small><a href="http://twitter.github.com/bootstrap/">http://twitter.github.com/bootstrap/</a></small></li>
<li><code>Bootstrap File Input</code> <small><a href="bootstrap.file-input.js">bootstrap.file-input.js</a></small></li>
</ul>
<h6>Calling Bootstrap File Input</h6>
<pre class="prettyprint">
$('input[type=file]').bootstrapFileInput();
$('.file-inputs').bootstrapFileInput();
</pre>
<h6>Examples</h6>
<input type="file" title="Search for a file to add" class="btn-primary">
<pre class="prettyprint">
<!-- Change the wording using a title tag -->
<input type="file" title="Search for a file to add"></pre>
<input type="file" data-bfi-disabled>
<pre class="prettyprint">
<!-- Disable the styling -->
<input type="file" data-bfi-disabled></pre>
<input type="file" data-filename-placement="inside">
<pre class="prettyprint">
<!-- Display filename inside the button instead of its label -->
<input type="file" data-filename-placement="inside"></pre>
<h6>Compliance</h6>
<p>Tested in Chrome, Firefox, Opera, and even Internet Explorer 8.</p>
<h3>Access</h3>
<p>Attributes used on the file input elements. At the moment all file inputs at the time of load have use of these attributes.</p>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Attribute</th>
<th>Type</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>title</code></td>
<td><small>String</small></td>
<td>The text that will appear in the button</td>
</tr>
<tr>
<td><code>data-bfi-disabled</code></td>
<td><small>No value required</small></td>
<td>When this attributes exists it prevents the file input from being styled</td>
</tr>
<tr>
<td><code>data-filename-placement</td>
<td><small>String ['<em>outside</em>', '<em>inside</em>']<br/>Default: '<em>outside</em>'</small></td>
<td>Defines where the selected file name will be displayed :
<ul>
<li><em>outside</em> to place it right after the button (DEFAULT)</li>
<li><em>intside</em> to place it inside the button, instead of the title</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
<!-- END DEMO -->
<!-- JAVASCRIPT -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script src="bootstrap.file-input.js"></script>
<script>
$(document).ready(function(){
$('input[type=file]').bootstrapFileInput();
});
</script>
</body>
</html>