mirror of
https://github.com/jasny/bootstrap.git
synced 2026-04-24 03:00:49 -04:00
Documented file upload + upload button
Added bootstrap-fileupload.js to Makefile Added jasny/fileupload.less to jasny/bootstrap.less
This commit is contained in:
Arnold Daniels
8
Makefile
8
Makefile
@@ -29,7 +29,7 @@ build:
|
||||
@cp -r fonts docs/assets/
|
||||
@cp js/tests/vendor/jquery.js docs/assets/js/
|
||||
@echo "Compiling documentation... ${CHECK} Done"
|
||||
@cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js js/bootstrap-inputmask.js js/bootstrap-rowlink.js js/bootstrap-affix.js > docs/assets/js/bootstrap.js
|
||||
@cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js js/bootstrap-inputmask.js js/bootstrap-rowlink.js js/bootstrap-fileupload.js js/bootstrap-affix.js > docs/assets/js/bootstrap.js
|
||||
@uglifyjs -nc docs/assets/js/bootstrap.js > docs/assets/js/bootstrap.min.tmp.js
|
||||
@echo "/**\n* Bootstrap.js by @fat & @mdo\n* Copyright 2012 Twitter, Inc.\n* http://www.apache.org/licenses/LICENSE-2.0.txt\n*/" > docs/assets/js/copyright.js
|
||||
@cat docs/assets/js/copyright.js docs/assets/js/bootstrap.min.tmp.js > docs/assets/js/bootstrap.min.js
|
||||
@@ -69,7 +69,7 @@ bootstrap:
|
||||
recess --compress ${BOOTSTRAP_LESS} ${JASNY_BOOTSTRAP_LESS} > bootstrap/css/bootstrap.min.css
|
||||
recess --compile ${BOOTSTRAP_RESPONSIVE_LESS} ${JASNY_BOOTSTRAP_RESPONSIVE_LESS} > bootstrap/css/bootstrap-responsive.css
|
||||
recess --compress ${BOOTSTRAP_RESPONSIVE_LESS} ${JASNY_BOOTSTRAP_RESPONSIVE_LESS} > bootstrap/css/bootstrap-responsive.min.css
|
||||
cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js js/bootstrap-inputmask.js js/bootstrap-rowlink.js js/bootstrap-affix.js > bootstrap/js/bootstrap.js
|
||||
cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js js/bootstrap-inputmask.js js/bootstrap-rowlink.js js/bootstrap-fileupload.js js/bootstrap-affix.js > bootstrap/js/bootstrap.js
|
||||
uglifyjs -nc bootstrap/js/bootstrap.js > bootstrap/js/bootstrap.min.tmp.js
|
||||
echo "/*!\n* Bootstrap.js by @fat & @mdo\n* Copyright 2012 Twitter, Inc.\n* http://www.apache.org/licenses/LICENSE-2.0.txt\n*/" > bootstrap/js/copyright.js
|
||||
cat bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js > bootstrap/js/bootstrap.min.js
|
||||
@@ -84,13 +84,13 @@ jasny-bootstrap:
|
||||
mkdir -p jasny-bootstrap/css
|
||||
mkdir -p jasny-bootstrap/js
|
||||
mkdir -p jasny-bootstrap/fonts
|
||||
cp js/bootstrap-inputmask.js js/bootstrap-rowlink.js jasny-bootstrap/js
|
||||
cp js/bootstrap-inputmask.js js/bootstrap-rowlink.js js/bootstrap-fileupload.js jasny-bootstrap/js
|
||||
cp fonts/* jasny-bootstrap/fonts/
|
||||
recess --compile ${JASNY_BOOTSTRAP_LESS} > jasny-bootstrap/css/jasny-bootstrap.css
|
||||
recess --compress ${JASNY_BOOTSTRAP_LESS} > jasny-bootstrap/css/jasny-bootstrap.min.css
|
||||
recess --compile ${JASNY_BOOTSTRAP_RESPONSIVE_LESS} > jasny-bootstrap/css/jasny-bootstrap-responsive.css
|
||||
recess --compress ${JASNY_BOOTSTRAP_RESPONSIVE_LESS} > jasny-bootstrap/css/jasny-bootstrap-responsive.min.css
|
||||
cat js/bootstrap-inputmask.js js/bootstrap-rowlink.js > jasny-bootstrap/js/jasny-bootstrap.js
|
||||
cat js/bootstrap-inputmask.js js/bootstrap-rowlink.js js/bootstrap-fileupload.js > jasny-bootstrap/js/jasny-bootstrap.js
|
||||
uglifyjs -nc jasny-bootstrap/js/jasny-bootstrap.js > jasny-bootstrap/js/jasny-bootstrap.min.tmp.js
|
||||
echo "/*!\n* Jasny-Bootstrap.js by @ArnoldDaniels\n* Copyright 2012 Jasny BV.\n* http://www.apache.org/licenses/LICENSE-2.0.txt\n*/" > jasny-bootstrap/js/copyright.js
|
||||
cat jasny-bootstrap/js/copyright.js jasny-bootstrap/js/jasny-bootstrap.min.tmp.js > jasny-bootstrap/js/jasny-bootstrap.min.js
|
||||
|
||||
1
docs/templates/layout.mustache
vendored
1
docs/templates/layout.mustache
vendored
@@ -126,6 +126,7 @@
|
||||
<script src="assets/js/bootstrap-affix.js"></script>
|
||||
<script src="assets/js/bootstrap-inputmask.js"></script>
|
||||
<script src="assets/js/bootstrap-rowlink.js"></script>
|
||||
<script src="assets/js/bootstrap-fileupload.js"></script>
|
||||
<script src="assets/js/application.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
17
docs/templates/pages/base-css.mustache
vendored
17
docs/templates/pages/base-css.mustache
vendored
@@ -1709,8 +1709,25 @@
|
||||
<img src="..." class="img-circle">
|
||||
<img src="..." class="img-polaroid">
|
||||
</pre>
|
||||
<<<<<<< HEAD
|
||||
<p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}<code>.img-rounded</code> and <code>.img-circle</code> do not work in IE7-8 due to lack of <code>border-radius</code> support.{{/i}}</p>
|
||||
=======
|
||||
<p>{{_i}}As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an <code>input</code>, use an <code><input type="submit"></code> for your button.{{/i}}</p>
|
||||
</div>
|
||||
</div>
|
||||
>>>>>>> Documented file upload + upload button
|
||||
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h3>{{_i}}Upload button{{/i}}</h3>
|
||||
<p>{{_i}}It's possible to use a button to upload files, instead of showing the native browser element.{{/i}}</p>
|
||||
<span class="btn btn-file">Upload a file<input type="file" /></span>
|
||||
<p>{{_i}}There is also an interactive file and image upload widgets available. View <a href="./javascript.html#fileupload">the Javascript docs</a> for that.{{/i}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
</section>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
5
docs/templates/pages/index.mustache
vendored
5
docs/templates/pages/index.mustache
vendored
@@ -58,6 +58,11 @@
|
||||
<p>{{_i}}Don't like when can only click on one column in a table?{{/i}}</p>
|
||||
<p>{{_i}}Row link is a simple javascript plugin that makes the whole row clickable.{{/i}}</p>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<h3><a href="./javascript.html#fileupload">{{_i}}File upload{{/i}}</a></h3>
|
||||
<p>{{_i}}With the file upload plugin you can create visually appealing file or image upload widgets.{{/i}}</p>
|
||||
<p>{{_i}}The image upload widget shows a preview of the selected image even before it's uploaded.{{/i}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
|
||||
157
docs/templates/pages/javascript.mustache
vendored
157
docs/templates/pages/javascript.mustache
vendored
@@ -30,6 +30,7 @@
|
||||
<li><a href="#typeahead"><i class="icon-chevron-right"></i> {{_i}}Typeahead{{/i}}</a></li>
|
||||
<li><a href="#inputmask"><i class="icon-chevron-right"></i> {{_i}}Input mask{{/i}}</a></li>
|
||||
<li><a href="#rowlink"><i class="icon-chevron-right"></i> {{_i}}Row link{{/i}}</a></li>
|
||||
<li><a href="#fileupload"><i class="icon-chevron-right"></i> {{_i}}File upload{{/i}}</a></li>
|
||||
<li><a href="#affix"><i class="icon-chevron-right"></i> {{_i}}Affix{{/i}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -1669,6 +1670,162 @@ $('.carousel').carousel({
|
||||
|
||||
|
||||
|
||||
<!-- File upload
|
||||
================================================== -->
|
||||
<section id="fileupload">
|
||||
<div class="page-header">
|
||||
<h1>{{_i}}File upload{{/i}} <small>bootstrap-fileupload.js</small></h1>
|
||||
</div>
|
||||
|
||||
<h2>{{_i}}Examples{{/i}}</h2>
|
||||
<p>{{_i}}The file upload plugin allows you to create a visually appealing file or image upload widgets.{{/i}}</p>
|
||||
|
||||
<h3>{{_i}}File upload widgets{{/i}}</h3>
|
||||
<div class="bs-docs-example">
|
||||
<div class="fileupload fileupload-new" data-provides="fileupload">
|
||||
<div class="input-append">
|
||||
<div class="uneditable-input span3"><i class="icon-file fileupload-exists"></i> <span class="fileupload-preview"></span></div><span class="btn btn-file"><span class="fileupload-new">{{_i}}Select file{{/i}}</span><span class="fileupload-exists">{{_i}}Change{{/i}}</span><input type="file" /></span><a href="#" class="btn fileupload-exists" data-dismiss="fileupload">{{_i}}Remove{{/i}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="fileupload fileupload-new" data-provides="fileupload">
|
||||
<div class="input-append">
|
||||
<div class="uneditable-input span3"><i class="icon-file fileupload-exists"></i> <span class="fileupload-preview"></span></div><span class="btn btn-file"><span class="fileupload-new">{{_i}}Select file{{/i}}</span><span class="fileupload-exists">{{_i}}Change{{/i}}</span><input type="file" /></span><a href="#" class="btn fileupload-exists" data-dismiss="fileupload">{{_i}}Remove{{/i}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
<div class="bs-docs-example">
|
||||
<div class="fileupload fileupload-new" data-provides="fileupload">
|
||||
<span class="btn btn-file"><span class="fileupload-new">{{_i}}Select file{{/i}}</span><span class="fileupload-exists">{{_i}}Change{{/i}}</span><input type="file" /></span>
|
||||
<span class="fileupload-preview"></span>
|
||||
<a href="#" class="close fileupload-exists" data-dismiss="fileupload" style="float: none">{{_i}}×{{/i}}</a>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="fileupload fileupload-new" data-provides="fileupload">
|
||||
<span class="btn btn-file"><span class="fileupload-new">{{_i}}Select file{{/i}}</span><span class="fileupload-exists">{{_i}}Change{{/i}}</span><input type="file" /></span>
|
||||
<span class="fileupload-preview"></span>
|
||||
<a href="#" class="close fileupload-exists" data-dismiss="fileupload" style="float: none">{{_i}}×{{/i}}</a>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Image upload widgets{{/i}}</h3>
|
||||
<p>{{_i}}When uploading an image, it's possible to show a thumbnail instead of the filename.{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="fileupload fileupload-new" data-provides="fileupload">
|
||||
<div class="fileupload-preview thumbnail" style="width: 200px; height: 150px;"></div>
|
||||
<div>
|
||||
<span class="btn btn-file"><span class="fileupload-new">{{_i}}Select image{{/i}}</span><span class="fileupload-exists">{{_i}}Change{{/i}}</span><input type="file" /></span>
|
||||
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">{{_i}}Remove{{/i}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="fileupload fileupload-new" data-provides="fileupload">
|
||||
<div class="fileupload-preview thumbnail" style="width: 200px; height: 150px;"></div>
|
||||
<div>
|
||||
<span class="btn btn-file"><span class="fileupload-new">{{_i}}Select image{{/i}}</span><span class="fileupload-exists">{{_i}}Change{{/i}}</span><input type="file" /></span>
|
||||
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">{{_i}}Remove{{/i}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<div class="bs-docs-example">
|
||||
<div class="fileupload fileupload-new" data-provides="fileupload">
|
||||
<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"><img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" /></div>
|
||||
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
|
||||
<div>
|
||||
<span class="btn btn-file"><span class="fileupload-new">{{_i}}Select image{{/i}}</span><span class="fileupload-exists">{{_i}}Change{{/i}}</span><input type="file" /></span>
|
||||
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">{{_i}}Remove{{/i}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="fileupload fileupload-new" data-provides="fileupload">
|
||||
<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"><img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" /></div>
|
||||
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
|
||||
<div>
|
||||
<span class="btn btn-file"><span class="fileupload-new">{{_i}}Select image{{/i}}</span><span class="fileupload-exists">{{_i}}Change{{/i}}</span><input type="file" /></span>
|
||||
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">{{_i}}Remove{{/i}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<div class="bs-docs-example">
|
||||
<div class="fileupload fileupload-new pull-left" data-provides="fileupload">
|
||||
<div class="fileupload-new thumbnail" style="width: 50px; height: 50px;"><img src="http://www.placehold.it/50x50/EFEFEF/AAAAAA" /></div>
|
||||
<div class="fileupload-preview fileupload-exists thumbnail" style="width: 50px; height: 50px;"></div>
|
||||
<span class="btn btn-file"><span class="fileupload-new">{{_i}}Select image{{/i}}</span><span class="fileupload-exists">{{_i}}Change{{/i}}</span><input type="file" /></span>
|
||||
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">{{_i}}Remove{{/i}}</a>
|
||||
</div>
|
||||
<div class="fileupload fileupload-new pull-right" data-provides="fileupload" style="text-align: right">
|
||||
<span class="btn btn-file"><span class="fileupload-new">{{_i}}Select image{{/i}}</span><span class="fileupload-exists">{{_i}}Change{{/i}}</span><input type="file" /></span>
|
||||
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">{{_i}}Remove{{/i}}</a>
|
||||
<div class="fileupload-new thumbnail" style="width: 50px; height: 50px;"><img src="http://www.placehold.it/50x50/EFEFEF/AAAAAA" /></div>
|
||||
<div class="fileupload-preview fileupload-exists thumbnail" style="width: 50px; height: 50px;"></div>
|
||||
</div>
|
||||
<div style="clear: both"></div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="fileupload fileupload-new" data-provides="fileupload">
|
||||
<div class="fileupload-new thumbnail" style="width: 50px; height: 50px;"><img src="http://www.placehold.it/50x50/EFEFEF/AAAAAA" /></div>
|
||||
<div class="fileupload-preview fileupload-exists thumbnail" style="width: 50px; height: 50px;"></div>
|
||||
<span class="btn btn-file"><span class="fileupload-new">{{_i}}Select image{{/i}}</span><span class="fileupload-exists">{{_i}}Change{{/i}}</span><input type="file" /></span>
|
||||
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">{{_i}}Remove{{/i}}</a>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<div class="alert alert-warning"><strong>{{_i}}Notice!{{/i}}</strong> {{_i}}Image preview only works in IE10+, FF3.6+, Chrome6.0+ and Opera11.1+. In older browsers and Safari, the filename is shown instead.{{/i}}</div>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h2>{{_i}}Usage{{/i}}</h2>
|
||||
<h3>{{_i}}Via data attributes{{/i}}</h3>
|
||||
<p>{{_i}}Add data attributes to register the file upload widget. The main container should either have the <code>.fileupload-new</code> class for a new record or if the record
|
||||
does not have file or <code>.fileupload-exists</code> if an existing file is present. Elements inside the container with the <code>.fileupload-new</code> and <code>.fileupload-exists</code>
|
||||
class will be shown or hidden based on the current state. The content of <code>.fileupload-preview</code> is replaced when a file is selected. Implement a button to clear
|
||||
the file with <code>data-dismiss="fileupload"</code>. The content of <code>.fileupload-preview</code> is replaced when a file is selected. Implement a button to clear the file with
|
||||
<code>data-dismiss="fileupload"</code>.{{/i}}</p>
|
||||
|
||||
<p>{{_i}}Via JavaScript{{/i}}</p>
|
||||
<pre class="prettyprint linenums">$('.fileupload').fileupload()</pre>
|
||||
|
||||
<h3>Layout</h3>
|
||||
<p>{{_i}}Using the given elements, you can layout the upload widget the way you want, either with a fixed <code>width</code> and <code>height</code> or with <code>max-width</code> and <code>max-height</code>.{{/i}}</p>
|
||||
|
||||
<h3>{{_i}}Options{{/i}}</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">{{_i}}Name{{/i}}</th>
|
||||
<th style="width: 50px;">{{_i}}type{{/i}}</th>
|
||||
<th>{{_i}}description{{/i}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{{_i}}uploadtype{{/i}}</td>
|
||||
<td>{{_i}}string{{/i}}</td>
|
||||
<td>{{_i}}Choose 'file' or 'image'. If omitted, the type is automatically determined based on the presence of a <code>.thumbnail</code> element.{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{_i}}name{{/i}}</td>
|
||||
<td>{{_i}}string{{/i}}</td>
|
||||
<td>{{_i}}Use this option instead of setting the <code>name</code> attribute on the <code><input></code> element to prevent it from being part of the post data when not changed.{{/i}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>{{_i}}Methods{{/i}}</h3>
|
||||
<h4>.fileupload({{_i}}options{{/i}})</h4>
|
||||
<p>{{_i}}Initializes a file upload widget.{{/i}}</p>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Affix
|
||||
================================================== -->
|
||||
<section id="affix">
|
||||
|
||||
14
js/bootstrap-fileupload.js
vendored
14
js/bootstrap-fileupload.js
vendored
@@ -1,10 +1,8 @@
|
||||
/* ==========================================================
|
||||
* bootstrap-placeholder.js v2.0.0
|
||||
* http://jasny.github.com/bootstrap/javascript.html#placeholder
|
||||
*
|
||||
* Based on work by Daniel Stocks (http://webcloud.se)
|
||||
* ==========================================================
|
||||
* Copyright 2012 Jasny BV.
|
||||
/* ===========================================================
|
||||
* bootstrap-fileupload.js j1
|
||||
* http://jasny.github.com/bootstrap/javascript.html#fileupload
|
||||
* ===========================================================
|
||||
* Copyright 2012 Jasny BV, Netherlands.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License")
|
||||
* you may not use this file except in compliance with the License.
|
||||
@@ -19,8 +17,6 @@
|
||||
* limitations under the License.
|
||||
* ========================================================== */
|
||||
|
||||
/* TODO: turn this into a proper bootstrap plugin */
|
||||
|
||||
!function ($) {
|
||||
|
||||
"use strict"; // jshint ;_
|
||||
|
||||
1
less/jasny/bootstrap.less
vendored
1
less/jasny/bootstrap.less
vendored
@@ -26,6 +26,7 @@
|
||||
@import "action-links.less";
|
||||
@import "iconic.less";
|
||||
@import "page-alert.less";
|
||||
@import "fileupload.less";
|
||||
|
||||
// Components: Nav
|
||||
@import "navs-tabbable.less";
|
||||
|
||||
Reference in New Issue
Block a user