mirror of
https://github.com/jasny/bootstrap.git
synced 2026-01-21 04:17:53 -05:00
Build 2.1.0-j2-wip
This commit is contained in:
Arnold Daniels
@@ -76,6 +76,7 @@
|
||||
<h1>JavaScript for Bootstrap</h1>
|
||||
<p class="lead">Bring Bootstrap's components to life—now with 13 custom jQuery plugins.
|
||||
</div>
|
||||
<img class="extended-badge" src="assets/img/extended-by-jasny.png">
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
@@ -98,6 +99,9 @@
|
||||
<li><a href="#collapse"><i class="icon-chevron-right"></i> Collapse</a></li>
|
||||
<li><a href="#carousel"><i class="icon-chevron-right"></i> Carousel</a></li>
|
||||
<li><a href="#typeahead"><i class="icon-chevron-right"></i> Typeahead</a></li>
|
||||
<li><a href="#inputmask"><i class="icon-chevron-right"></i> Input mask</a></li>
|
||||
<li><a href="#rowlink"><i class="icon-chevron-right"></i> Row link</a></li>
|
||||
<li><a href="#fileupload"><i class="icon-chevron-right"></i> File upload</a></li>
|
||||
<li><a href="#affix"><i class="icon-chevron-right"></i> Affix</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -1503,6 +1507,77 @@ $('.carousel').carousel({
|
||||
|
||||
|
||||
|
||||
<!-- Row link
|
||||
================================================== -->
|
||||
<section id="rowlink">
|
||||
<div class="page-header">
|
||||
<h1>Row link <small>bootstrap-rowlink.js</small></h1>
|
||||
</div>
|
||||
|
||||
<h2>Example</h2>
|
||||
<p>This plugin turns a table row into a clickable link.</p>
|
||||
<div class="bs-docs-example">
|
||||
<table class="table table-striped table-bordered">
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Description</th><th>Actions</th></tr>
|
||||
</thead>
|
||||
<tbody data-provides="rowlink">
|
||||
<tr><td><a href="./javascript.html#modals" class="rowlink">Modals</a></td><td>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</td><td class="nolink"><a href="#">Action</a></td></tr>
|
||||
<tr><td><a href="./javascript.html#dropdowns" class="rowlink">Dropdowns</a></td><td>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</td><td class="nolink"><a href="#">Action</a></td></tr>
|
||||
<tr><td><a href="./javascript.html#scrollspy" class="rowlink">Scrollspy</a></td><td>Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.</td><td class="nolink"><a href="#">Action</a></td></tr>
|
||||
<tr><td><a href="./javascript.html#tabs" class="rowlink">Togglable tabs</a></td><td>Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.</td><td class="nolink"><a href="#">Action</a></td></tr>
|
||||
<tr><td><a href="./javascript.html#tooltips" class="rowlink">Tooltips</a></td><td>A new take on the jQuery Tipsy plugin, Tooltips don't rely on images, uss CSS3 for animations, and data-attributes for local title storage.</td><td class="nolink"><a href="#">Action</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<table data-provides="rowlink">
|
||||
<tr><td><a href="javascript.html#modals">Modals</a></td><td class="nohref"><a href="#">Action</a></td></tr>
|
||||
<tr><td><a href="javascript.html#dropdowns">Dropdowns</a></td><td class="nohref"><a href="#">Action</a></td></tr>
|
||||
</table>
|
||||
</pre>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h2>Usage</h2>
|
||||
|
||||
<h3>Via data attributes</h3>
|
||||
<p>Add <code>data-provides="rowlink"</code> to a <code><table></code>, <code><tbody></code> or <code><tr></code> element. The value should be selector to the link, which is a child of the row. A cell can be excluded by adding the <code>.nolink</code> class to the <code><td></code>.</p>
|
||||
<p><span class="label label-info">Tip!</span> Add <code>.rowlink</code> to your <code><a></code>. This prevents the link styling during page load.</p>
|
||||
|
||||
<h3>Via JavaScript</h3>
|
||||
<p>Call the input mask via javascript:</p>
|
||||
<pre class="prettyprint linenums">$('tbody.rowlink').rowlink()</pre>
|
||||
|
||||
<h3>Options</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
<th style="width: 50px;">type</th>
|
||||
<th style="width: 100px;">default</th>
|
||||
<th>description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>target</td>
|
||||
<td>string</td>
|
||||
<td>'a'</td>
|
||||
<td>A jquery selector string, to select the link element within each row.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Methods</h3>
|
||||
<h4>.inputmask(options)</h4>
|
||||
<p>Initializes an input with an input mask.</p>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Typeahead
|
||||
================================================== -->
|
||||
<section id="typeahead">
|
||||
@@ -1589,6 +1664,238 @@ $('.carousel').carousel({
|
||||
|
||||
|
||||
|
||||
<!-- Input mask
|
||||
================================================== -->
|
||||
<section id="inputmask">
|
||||
<div class="page-header">
|
||||
<h1>Input mask <small>bootstrap-inputmask.js</small></h1>
|
||||
</div>
|
||||
|
||||
<h2>Example</h2>
|
||||
<p>Input masks can be used to force the user to enter data conform a specific format.</p>
|
||||
<p>Unlike validation, the user can't enter any other key than the ones specified by the mask.</p>
|
||||
<div class="bs-docs-example">
|
||||
<label>ISBN <input type="text" class="span2" data-mask="999-99-999-9999-9"></label>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<input type="text" data-mask="999-99-999-9999-9">
|
||||
</pre>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h2>Usage</h2>
|
||||
|
||||
<h3>Via data attributes</h3>
|
||||
<p>Add data attributes to register an element with inputmask functionality as shown in the example above.</p>
|
||||
|
||||
<h3>Via JavaScript</h3>
|
||||
<p>Call the input mask via javascript:</p>
|
||||
<pre class="prettyprint linenums">$('.inputmask').inputmask()</pre>
|
||||
|
||||
<h3>Options</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
<th style="width: 50px;">type</th>
|
||||
<th style="width: 100px;">default</th>
|
||||
<th>description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>mask</td>
|
||||
<td>string</td>
|
||||
<td>''</td>
|
||||
<td>A string of formatting and literal characters, defining the input mask (see below).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>placeholder</td>
|
||||
<td>string</td>
|
||||
<td>'_'</td>
|
||||
<td>The character that is displayed where something needs to be typed.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Format</h3>
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr><th>Character</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>9</td><td>Number</td></tr>
|
||||
<tr><td>a</td><td>Letter</td></tr>
|
||||
<tr><td>?</td><td>Alphanumeric</td></tr>
|
||||
<tr><td>*</td><td>Any character</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Methods</h3>
|
||||
<h4>.inputmask(options)</h4>
|
||||
<p>Initializes an input with an input mask.</p>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- File upload
|
||||
================================================== -->
|
||||
<section id="fileupload">
|
||||
<div class="page-header">
|
||||
<h1>File upload <small>bootstrap-fileupload.js</small></h1>
|
||||
</div>
|
||||
|
||||
<h2>Examples</h2>
|
||||
<p>The file upload plugin allows you to create a visually appealing file or image upload widgets.</p>
|
||||
|
||||
<h3>File upload widgets</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">Select file</span><span class="fileupload-exists">Change</span><input type="file" /></span><a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</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">Select file</span><span class="fileupload-exists">Change</span><input type="file" /></span><a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</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">Select file</span><span class="fileupload-exists">Change</span><input type="file" /></span>
|
||||
<span class="fileupload-preview"></span>
|
||||
<a href="#" class="close fileupload-exists" data-dismiss="fileupload" style="float: none">×</a>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="fileupload fileupload-new" data-provides="fileupload">
|
||||
<span class="btn btn-file"><span class="fileupload-new">Select file</span><span class="fileupload-exists">Change</span><input type="file" /></span>
|
||||
<span class="fileupload-preview"></span>
|
||||
<a href="#" class="close fileupload-exists" data-dismiss="fileupload" style="float: none">×</a>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>Image upload widgets</h3>
|
||||
<p>When uploading an image, it's possible to show a thumbnail instead of the filename.</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">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
|
||||
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</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">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
|
||||
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</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">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
|
||||
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</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">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
|
||||
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</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">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
|
||||
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</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">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
|
||||
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</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">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
|
||||
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<div class="alert alert-warning"><strong>Notice!</strong> Image preview only works in IE10+, FF3.6+, Chrome6.0+ and Opera11.1+. In older browsers and Safari, the filename is shown instead.</div>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h2>Usage</h2>
|
||||
<h3>Via data attributes</h3>
|
||||
<p>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>.</p>
|
||||
|
||||
<p>Via JavaScript</p>
|
||||
<pre class="prettyprint linenums">$('.fileupload').fileupload()</pre>
|
||||
|
||||
<h3>Layout</h3>
|
||||
<p>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>.</p>
|
||||
|
||||
<h3>Options</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
<th style="width: 50px;">type</th>
|
||||
<th>description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>uploadtype</td>
|
||||
<td>string</td>
|
||||
<td>Choose 'file' or 'image'. If omitted, the type is automatically determined based on the presence of a <code>.thumbnail</code> element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>name</td>
|
||||
<td>string</td>
|
||||
<td>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.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Methods</h3>
|
||||
<h4>.fileupload(options)</h4>
|
||||
<p>Initializes a file upload widget.</p>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Affix
|
||||
================================================== -->
|
||||
<section id="affix">
|
||||
@@ -1662,8 +1969,10 @@ $('[data-spy="affix"]').each(function () {
|
||||
<div class="container">
|
||||
<p class="pull-right"><a href="#">Back to top</a></p>
|
||||
<p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
|
||||
<p>Extended with pride by <a href="http://twitter.com/ArnoldDaniels" target="_blank">@ArnoldDaniels</a> of <a href="http://www.jasny.net/" target="_blank">Jasny Software solutions</a>.</p>
|
||||
<p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
||||
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
||||
<p><a href="http://somerandomdude.com/work/iconic/">Iconic icon set font</a>, licensed under the <a href="http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL">SIL Open Font License</a>.</p>
|
||||
<ul class="footer-links">
|
||||
<li><a href="http://blog.getbootstrap.com">Read the blog</a></li>
|
||||
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">Submit issues</a></li>
|
||||
@@ -1693,9 +2002,10 @@ $('[data-spy="affix"]').each(function () {
|
||||
<script src="assets/js/bootstrap-carousel.js"></script>
|
||||
<script src="assets/js/bootstrap-typeahead.js"></script>
|
||||
<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>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user