Files
bootstrap/javascript/index.html
2014-02-18 04:04:26 +01:00

772 lines
47 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>
JavaScript &middot; Jasny Bootstrap
</title>
<!-- Bootstrap core CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="../dist/css/jasny-bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras -->
<link href="../assets/css/docs.css" rel="stylesheet">
<link href="../assets/css/pygments-manni.css" rel="stylesheet">
<!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- Favicons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-32388850-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body class="">
<script type="text/javascript">
if (localStorage && localStorage.hide_twbs === 'no') document.body.setAttribute('class', 'bs-twbs-show')
</script>
<a class="sr-only" href="#content">Skip to main content</a>
<!-- Docs master nav -->
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="../" class="navbar-brand">Jasny Bootstrap</a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li>
<a href="../getting-started">Getting started</a>
</li>
<li>
<a href="../css">CSS</a>
</li>
<li>
<a href="../components">Components</a>
</li>
<li class="active">
<a href="../javascript">JavaScript</a>
</li>
<li>
<a href="../customize">Customize</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="http://www.jasny.net"><span class="hidden-sm">More by</span> Jasny</a>
</li>
</ul>
</nav>
</div>
</header>
<!-- Docs page layout -->
<div class="bs-header" id="content">
<div class="container">
<h1>JavaScript</h1>
<p>Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.</p>
<div id="aboutme-container">
<a href="mailto:arnold@jasny.net" class="aboutme">
<img class="img-circle" src="http://0.gravatar.com/avatar/0bba82e8b2a9d2cf9645cb07ea54766f?s=100&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D100&amp;r=G" alt="Arnold Daniels">
<div class="aboutme-text">
<span class="aboutme-title">Looking for a developer?</span>
I'm available for freelance work, I want to hear about your projects.
<span class="aboutme-name">- Arnold Daniels</span>
</div>
</a>
</div>
</div>
</div>
<div class="container bs-docs-container">
<div class="row">
<div class="col-md-3">
<div class="bs-sidebar hidden-print" role="complementary">
<ul class="nav bs-sidenav">
<li>
<a href="#js-overview">Overview</a>
<ul class="nav">
<li><a href="#js-individual-compiled">Individual or compiled</a></li>
<li><a href="#js-data-attrs">Data attributes</a></li>
<li><a href="#js-programmatic-api">Programmatic API</a></li>
<li><a href="#js-noconflict">No conflict</a></li>
<li><a href="#js-events">Events</a></li>
</ul>
</li>
<li>
<a href="#offcanvas">Off canvas</a>
<ul class="nav">
<li><a href="#offcanvas-examples">Examples</a></li>
<li><a href="#offcanvas-usage">Usage</a></li>
</ul>
</li>
<li>
<a href="#rowlink">Row link</a>
<ul class="nav">
<li><a href="#rowlink-examples">Examples</a></li>
<li><a href="#rowlink-usage">Usage</a></li>
</ul>
</li>
<li>
<a href="#inputmask">Input mask</a>
<ul class="nav">
<li><a href="#inputmask-examples">Examples</a></li>
<li><a href="#inputmask-usage">Usage</a></li>
</ul>
</li>
<li>
<a href="#fileinput">File input</a>
<ul class="nav">
<li><a href="#fileinput-examples">Examples</a></li>
<li><a href="#fileinput-usage">Usage</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-md-9" role="main">
<!-- Overview
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="js-overview">Overview</h1>
</div>
<h3 id="js-individual-compiled">Individual or compiled</h3>
<p>Plugins can be included individually (using Jasny Bootstrap's individual <code>*.js</code> files), or all at once (using <code>jasny-bootstrap.js</code> or the minified <code>jasn-bootstrap.min.js</code>).</p>
<p>The Jasny Bootstrap plugins work with or without loading Twitter Bootstrap's <code>bootstrap.js</code>.</p>
<div class="bs-callout bs-callout-danger">
<h4>Do not attempt to include both.</h4>
<p>Both <code>jasny-bootstrap.js</code> and <code>jasny-bootstrap.min.js</code> contain all plugins in a single file.</p>
</div>
<h3 id="js-data-attrs">Data attributes</h3>
<p>You can use all Jasny Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first-class API and should be your first consideration when using a plugin.</p>
<p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the document namespaced with <code>data-api</code>. This looks like this:
<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">off</span><span class="p">(</span><span class="s1">&#39;.data-api&#39;</span><span class="p">)</span>
</code></pre></div>
<p>Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:</p>
<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">off</span><span class="p">(</span><span class="s1">&#39;.alert.data-api&#39;</span><span class="p">)</span>
</code></pre></div>
<h3 id="js-programmatic-api">Programmatic API</h3>
<p>We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.</p>
<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.fileinput&quot;</span><span class="p">).</span><span class="nx">fileinput</span><span class="p">().</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&quot;fat&quot;</span><span class="p">)</span>
</code></pre></div>
<p>All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):</p>
<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#myMenu&quot;</span><span class="p">).</span><span class="nx">offcanvas</span><span class="p">()</span> <span class="c1">// initialized with defaults</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#myMenu&quot;</span><span class="p">).</span><span class="nx">offcanvas</span><span class="p">({</span> <span class="nx">autohide</span><span class="o">:</span> <span class="kc">false</span> <span class="p">})</span> <span class="c1">// initialized with no autohide</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#myMenu&quot;</span><span class="p">).</span><span class="nx">offcanvas</span><span class="p">(</span><span class="s1">&#39;show&#39;</span><span class="p">)</span> <span class="c1">// initializes and invokes show immediately&lt;/p&gt;</span>
</code></pre></div>
<p>Each plugin also exposes its raw constructor on a <code>Constructor</code> property: <code>$.fn.popover.Offcanvas</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('.navmenu').data('offcanvas')</code>.</p>
<h3 id="js-noconflict">No conflict</h3>
<p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.</p>
<div class="highlight"><pre><code class="js"><span class="kd">var</span> <span class="nx">bootstrapButton</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">button</span><span class="p">.</span><span class="nx">noConflict</span><span class="p">()</span> <span class="c1">// return $.fn.button to previously assigned value</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">bootstrapBtn</span> <span class="o">=</span> <span class="nx">bootstrapButton</span> <span class="c1">// give $().bootstrapBtn the Bootstrap functionality</span>
</code></pre></div>
<h3 id="js-events">Events</h3>
<p>Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the completion of an action.</p>
<p>As of 3.0.0, all Bootstrap events are namespaced.</p>
<p>All infinitive events provide <code>preventDefault</code> functionality. This provides the ability to stop the execution of an action before it starts.</p>
<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#myMenu&#39;</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;show.bs.offcanvas&#39;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">data</span><span class="p">)</span> <span class="k">return</span> <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">()</span> <span class="c1">// stops menu from being shown</span>
<span class="p">})</span>
</code></pre></div>
</div>
<!-- Off canvas
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="offcanvas">Off canvas <small>offcanvas.js</small></h1>
</div>
<h2 id="offcanvas-examples">Example</h2>
<p>The offcanvas plugin allows you to hide an element from sight and than show it by moving either that or any other element. It's intented to be used for off canvas navigation, like push menus.</p>
<div class="bs-example bs-navmenu-offcanvas-example">
<div id="myNavmenuCanvas">
<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
<a class="navmenu-brand" href="#">Brand</a>
<ul class="nav navmenu-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
<div class="navbar navbar-default navbar-fixed-top">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="#myNavmenuCanvas" data-placement="left">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in aliquet nisl. Praesent sed leo congue, fringilla eros eu, tempus metus. Nam mollis odio ipsum, non vehicula ipsum accumsan sodales. Morbi varius vitae elit euismod cursus. Donec a dapibus justo, in facilisis nisi. Suspendisse ut turpis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui risus, tincidunt at odio ut, ultrices dignissim ipsum. Cras ultrices erat nec leo luctus varius. Nulla sollicitudin tincidunt nulla, ut porta mauris volutpat vitae. Suspendisse ornare dolor sit amet massa venenatis pulvinar.</p>
</div>
</div><!-- /example -->
<div class="highlight"><pre><code class="html"><span class="nt">&lt;nav</span> <span class="na">id=</span><span class="s">&quot;myNavmenu&quot;</span> <span class="na">class=</span><span class="s">&quot;navmenu navmenu-default navmenu-fixed-left offcanvas&quot;</span> <span class="na">role=</span><span class="s">&quot;navigation&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;navmenu-brand&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>Brand<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;nav navmenu-nav&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;active&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>Link<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>Link<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/nav&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;navbar navbar-default navbar-fixed-top&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">&quot;button&quot;</span> <span class="na">class=</span><span class="s">&quot;navbar-toggle&quot;</span> <span class="na">data-toggle=</span><span class="s">&quot;offcanvas&quot;</span> <span class="na">data-target=</span><span class="s">&quot;#myNavmenu&quot;</span> <span class="na">data-canvas=</span><span class="s">&quot;body&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon-bar&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon-bar&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;icon-bar&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre></div>
<div class="bs-callout bs-callout-info">
<h4>Examples</h4>
<p>For better understanding, have a look at the <a href="../examples/navmenu/">off canvas slide in menu</a>, <a href="../examples/navmenu-push/">off canvas push menu</a> and <a href="../examples/navmenu-reveal/">off canvas reveal menu</a> exapmles.</p>
</div>
<hr class="bs-docs-separator">
<h2 id="offcanvas-usage">Usage</h2>
<p>Add <code>.offcanvas</code> to hide an element. Alternatively add <code>.offcanvas-*</code> to hide an element up to a specific viewport width. Adding the <code>.offcanvas</code> class is not required. You may also hide an element by any other means.</p>
<p>The effect works best for elements positioned to the top, bottom, left or right of the window, either with absolute or fixed positioning.</p>
<p>When shown, the plugin adds <code>.canvas-slid</code> to the element that has slid.</p>
<h3>Via data attributes</h3>
<p>Add <code>data-toggle="offcanvas"</code> and a <code>data-target</code> to control, assigning it to show and hide the target element. The <code>data-target</code> attribute accepts a CSS selector to apply the collapse to.</p>
<p>Optionally add a <code>data-canvas</code> attribute to slide a canvas instead of only the target element. For a push menu set <code>data-canvas="body"</code>.
<h3>Via JavaScript</h3>
<p>Call the input mask via javascript:</p>
<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.navmenu&#39;</span><span class="p">).</span><span class="nx">offcanvas</span><span class="p">()</span>
</code></pre></div>
<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>canvas</td>
<td>string</td>
<td>false</td>
<td>If set, the canvas will be moved on show and hide instead of the target element. This creates alternative effects.</td>
</tr>
<tr>
<td>toggle</td>
<td>boolean</td>
<td>true</td>
<td>Toggles the off canvas element on invocation</td>
</tr>
<tr>
<td>placement</td>
<td>string</td>
<td>'auto'</td>
<td>Where to position the element at the start of the animation. For example, if placement is "left", the element will slide from left to right. The default option "auto" guesses the placement based on position and dimension.</td>
</tr>
<tr>
<td>autohide</td>
<td>boolean</td>
<td>true</td>
<td>Hide the off canvas element if clicked anywhere other that the element.</td>
</tr>
<tr>
<td>recalc</td>
<td>boolean</td>
<td>true</td>
<td>Calculate if off canvas should be disabled for this viewport width on window resize. If your elements always gets hidden on window resize, try setting this to false.</td>
</tr>
</tbody>
</table>
<div class="bs-callout bs-callout-danger">
<h4>Graceful degradation</h4>
<p>For browsers that don't support transform (mainly IE8), the <code>target</code> option is ignored. In that case, the plugin will always slide the target element. In that case <code>.canvas-slid</code> will be added to the target element instead.</p>
</div>
<h3>Methods</h3>
<h4>.offcanvas(options)</h4>
<p>Initializes the off canvas element with an optional options.</p>
<h4>.offcanvas('toggle')</h4>
<p>Toggles an off canvas element to shown or hidden.</p>
<h4>.offcanvas('show')</h4>
<p>Shows an off canvas element.</p>
<h4>.offcanvas('hide')</h4>
<p>Hides an off canvas element.</p>
<h3>Events</h3>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>show.bs.offcanvas</td>
<td>This event fires immediately when the show instance method is called.</td>
</tr>
<tr>
<td>shown.bs.offcanvas</td>
<td>This event is fired when the target has been made visible to the user (will wait for CSS transitions to complete).</td>
</tr>
<tr>
<td>hide.bs.offcanvas</td>
<td>This event is fired immediately when the hide instance method has been called.</td>
</tr>
<tr>
<td>hidden.bs.offcanvas</td>
<td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td>
</tr>
</tbody>
</table>
</div><!-- ./bs-table-responsive -->
</div>
<!-- Row link
================================================== -->
<div class="bs-docs-section bs-jasny">
<div class="page-header">
<h1 id="rowlink">Row link <small>rowlink.js</small></h1>
</div>
<h2 id="rowlink-examples">Example</h2>
<p>This plugin turns a table row into a clickable link.</p>
<div class="bs-example">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr><th>Name</th><th>Description</th><th>Actions</th></tr>
</thead>
<tbody data-link="row" class="rowlink">
<tr><td><a href="#inputmask">Input mask</a></td><td>Input masks can be used to force the user to enter data conform a specific format.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
<tr><td><a href="http://www.jasny.net/" target="_blank">jasny.net</a></td><td>Shared knowledge of Arnold Daniels aka Jasny.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
<tr><td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a></td><td>Toggle a modal via JavaScript by clicking this row.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
</tbody>
</table>
</div>
<div id="rowlinkModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Rowlink Modal</h4>
</div>
<div class="modal-body">
<p>This modal proves that JavaScript events are triggered correctly by rowlink.</p>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="highlight"><pre><code class="html"><span class="nt">&lt;table</span> <span class="na">class=</span><span class="s">&quot;table table-striped table-bordered table-hover&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;thead&gt;</span>
<span class="nt">&lt;tr&gt;&lt;th&gt;</span>Name<span class="nt">&lt;/th&gt;&lt;th&gt;</span>Description<span class="nt">&lt;/th&gt;&lt;th&gt;</span>Actions<span class="nt">&lt;/th&gt;&lt;/tr&gt;</span>
<span class="nt">&lt;/thead&gt;</span>
<span class="nt">&lt;tbody</span> <span class="na">data-link=</span><span class="s">&quot;row&quot;</span> <span class="na">class=</span><span class="s">&quot;rowlink&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;tr&gt;&lt;td&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#inputmask&quot;</span><span class="nt">&gt;</span>Input mask<span class="nt">&lt;/a&gt;&lt;/td&gt;&lt;td&gt;</span>Input masks can be used to force the user to enter data conform a specific format.<span class="nt">&lt;/td&gt;&lt;td</span> <span class="na">class=</span><span class="s">&quot;rowlink-skip&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>Action<span class="nt">&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;</span>
<span class="nt">&lt;tr&gt;&lt;td&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;http://www.jasny.net/&quot;</span> <span class="na">target=</span><span class="s">&quot;_blank&quot;</span><span class="nt">&gt;</span>jasny.net<span class="nt">&lt;/a&gt;&lt;/td&gt;&lt;td&gt;</span>Shared knowledge of Arnold Daniels aka Jasny.<span class="nt">&lt;/td&gt;&lt;td</span> <span class="na">class=</span><span class="s">&quot;rowlink-skip&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>Action<span class="nt">&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;</span>
<span class="nt">&lt;tr&gt;&lt;td&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#rowlinkModal&quot;</span> <span class="na">data-toggle=</span><span class="s">&quot;modal&quot;</span><span class="nt">&gt;</span>Launch modal<span class="nt">&lt;/a&gt;&lt;/td&gt;&lt;td&gt;</span>Toggle a modal via JavaScript by clicking this row.<span class="nt">&lt;/td&gt;&lt;td</span> <span class="na">class=</span><span class="s">&quot;rowlink-skip&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>Action<span class="nt">&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;</span>
<span class="nt">&lt;/tbody&gt;</span>
<span class="nt">&lt;/table&gt;</span>
</code></pre></div>
<hr class="bs-docs-separator">
<h2 id="rowlink-usage">Usage</h2>
<h3>Via data attributes</h3>
<p>Add class <code>.rowlink</code> and attribute <code>data-link="row"</code> to a <code>&lt;table&gt;</code> or <code>&lt;tbody&gt;</code> element. For other options append the name to <code>data-</code>, as in <code>data-target="a.mainlink"</code> A cell can be excluded by adding the <code>.rowlink-skip</code> class to the <code>&lt;td&gt;</code>.</p>
<h3>Via JavaScript</h3>
<p>Call the input mask via javascript:</p>
<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;tbody.rowlink&#39;</span><span class="p">).</span><span class="nx">rowlink</span><span class="p">()</span>
</code></pre></div>
<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>.rowlink(options)</h4>
<p>Makes the rows of a table or tbody clickable.</p>
</div>
<!-- Input mask
================================================== -->
<div class="bs-docs-section bs-jasny">
<div class="page-header">
<h1 id="inputmask">Input mask <small>inputmask.js</small></h1>
</div>
<h2 id="inputmask-examples">Example</h2>
<p>Input masks can be used to force the user to enter data conform a specific format. Unlike validation, the user can't enter any other key than the ones specified by the mask.</p>
<div class="bs-example">
<input type="text" class="form-control" data-mask="999-99-999-9999-9" placeholder="ISBN">
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">class=</span><span class="s">&quot;form-control&quot;</span> <span class="na">data-mask=</span><span class="s">&quot;999-99-999-9999-9&quot;</span> <span class="na">placeholder=</span><span class="s">&quot;ISBN&quot;</span><span class="nt">&gt;</span>
</code></pre></div>
<hr class="bs-docs-separator">
<h2 id="inputmask-usage">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>
<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.inputmask&#39;</span><span class="p">).</span><span class="nx">inputmask</span><span class="p">({</span>
<span class="nx">mask</span><span class="o">:</span> <span class="s1">&#39;999-99-999-9999-9&#39;</span>
<span class="p">})</span>
</code></pre></div>
<h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-mask="999-99-999-9999-9"</code>.</p>
<div class="table-responsive">
<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>
</div>
<h3>Format</h3>
<p>Each typed character needs to match exactly one character in the <code>mask</code> option.</p>
<div class="table-responsive">
<table class="table table-bordered 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>
</div>
<h3>Methods</h3>
<h4>.inputmask(options)</h4>
<p>Initializes an input element with an input mask.</p>
</div>
<!-- File input
================================================== -->
<div class="bs-docs-section bs-jasny">
<div class="page-header">
<h1 id="fileinput">File input <small>fileinput.js</small></h1>
</div>
<h2 id="fileinput-examples">Examples</h2>
<p>The file input plugin allows you to create a visually appealing file or image input widgets.</p>
<h3>File input widgets</h3>
<div class="bs-example">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="input-group">
<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="file"></span>
<a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;fileinput fileinput-new&quot;</span> <span class="na">data-provides=</span><span class="s">&quot;fileinput&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;input-group&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;form-control&quot;</span> <span class="na">data-trigger=</span><span class="s">&quot;fileinput&quot;</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;glyphicon glyphicon-file fileinput-exists&quot;</span><span class="nt">&gt;&lt;/i&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;fileinput-filename&quot;</span><span class="nt">&gt;&lt;/span&gt;&lt;/div&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;input-group-addon btn btn-default btn-file&quot;</span><span class="nt">&gt;&lt;span</span> <span class="na">class=</span><span class="s">&quot;fileinput-new&quot;</span><span class="nt">&gt;</span>Select file<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&quot;fileinput-exists&quot;</span><span class="nt">&gt;</span>Change<span class="nt">&lt;/span&gt;&lt;input</span> <span class="na">type=</span><span class="s">&quot;file&quot;</span> <span class="na">name=</span><span class="s">&quot;...&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span> <span class="na">class=</span><span class="s">&quot;input-group-addon btn btn-default fileinput-exists&quot;</span> <span class="na">data-dismiss=</span><span class="s">&quot;fileinput&quot;</span><span class="nt">&gt;</span>Remove<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre></div>
<div class="bs-example">
<div class="fileinput fileinput-new" data-provides="fileinput">
<span class="btn btn-default btn-file"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span><input type="file"></span>
<span class="fileinput-filename"></span>
<a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
</div>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;fileinput fileinput-new&quot;</span> <span class="na">data-provides=</span><span class="s">&quot;fileinput&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;btn btn-default btn-file&quot;</span><span class="nt">&gt;&lt;span</span> <span class="na">class=</span><span class="s">&quot;fileinput-new&quot;</span><span class="nt">&gt;</span>Select file<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&quot;fileinput-exists&quot;</span><span class="nt">&gt;</span>Change<span class="nt">&lt;/span&gt;&lt;input</span> <span class="na">type=</span><span class="s">&quot;file&quot;</span> <span class="na">name=</span><span class="s">&quot;...&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;fileinput-filename&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span> <span class="na">class=</span><span class="s">&quot;close fileinput-exists&quot;</span> <span class="na">data-dismiss=</span><span class="s">&quot;fileinput&quot;</span> <span class="na">style=</span><span class="s">&quot;float: none&quot;</span><span class="nt">&gt;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre></div>
<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-example">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
<div>
<span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file"></span>
<a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;fileinput fileinput-new&quot;</span> <span class="na">data-provides=</span><span class="s">&quot;fileinput&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;fileinput-preview thumbnail&quot;</span> <span class="na">data-trigger=</span><span class="s">&quot;fileinput&quot;</span> <span class="na">style=</span><span class="s">&quot;width: 200px; height: 150px;&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;btn btn-default btn-file&quot;</span><span class="nt">&gt;&lt;span</span> <span class="na">class=</span><span class="s">&quot;fileinput-new&quot;</span><span class="nt">&gt;</span>Select image<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&quot;fileinput-exists&quot;</span><span class="nt">&gt;</span>Change<span class="nt">&lt;/span&gt;&lt;input</span> <span class="na">type=</span><span class="s">&quot;file&quot;</span> <span class="na">name=</span><span class="s">&quot;...&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span> <span class="na">class=</span><span class="s">&quot;btn btn-default fileinput-exists&quot;</span> <span class="na">data-dismiss=</span><span class="s">&quot;fileinput&quot;</span><span class="nt">&gt;</span>Remove<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre></div>
<div class="bs-example">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
<img data-src="holder.js/100%x100%" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
</div>
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
<div>
<span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file"></span>
<a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>
</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;fileinput fileinput-new&quot;</span> <span class="na">data-provides=</span><span class="s">&quot;fileinput&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;fileinput-new thumbnail&quot;</span> <span class="na">style=</span><span class="s">&quot;width: 200px; height: 150px;&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">data-src=</span><span class="s">&quot;holder.js/100%x100%&quot;</span> <span class="na">alt=</span><span class="s">&quot;...&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;fileinput-preview fileinput-exists thumbnail&quot;</span> <span class="na">style=</span><span class="s">&quot;max-width: 200px; max-height: 150px;&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;btn btn-default btn-file&quot;</span><span class="nt">&gt;&lt;span</span> <span class="na">class=</span><span class="s">&quot;fileinput-new&quot;</span><span class="nt">&gt;</span>Select image<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">&quot;fileinput-exists&quot;</span><span class="nt">&gt;</span>Change<span class="nt">&lt;/span&gt;&lt;input</span> <span class="na">type=</span><span class="s">&quot;file&quot;</span> <span class="na">name=</span><span class="s">&quot;...&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span> <span class="na">class=</span><span class="s">&quot;btn btn-default fileinput-exists&quot;</span> <span class="na">data-dismiss=</span><span class="s">&quot;fileinput&quot;</span><span class="nt">&gt;</span>Remove<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre></div>
<div class="bs-callout bs-callout-warning">
<p>Image preview only works in IE10+, FF3.6+, Safari6.0+, Chrome6.0+ and Opera11.1+. In older browsers the filename is shown instead.</p>
</div>
<hr class="bs-docs-separator">
<h2 id="fileinput-usage">Usage</h2>
<p>Add <code>.fileinput</code> to the container. Elements inside the container with <code>.fileinput-new</code> and <code>.fileinput-exists</code> are shown or hidden based on the current state. A preview of the selected file is placed in <code>.fileinput-preview</code>. The text of <code>.fileinput-filename</code> gets set to the name of the selected file.</p>
<p>The file input widget should be placed in a regular <code>&lt;form&gt;</code> replacing a standard <code>&lt;input type="file"&gt;</code>. The server side code should handle the file upload as normal.</p>
<h3>Via data attributes</h3>
<p>Add <code>data-provides="fileinput"</code> to the <code>.fileinput</code> element. Implement a button to clear the file with <code>data-dismiss="fileinput"</code>. Add <code>data-trigger="fileinput"</code> to any element within the <code>.fileinput</code> widget to trigger the file dialog.</p>
<h3>Via JavaScript</h3>
<pre class="prettyprint linenums">$('.fileinput').fileinput()</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>
<div class="table-responsive">
<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>name</td>
<td>string</td>
<td>Use this option instead of setting the <code>name</code> attribute on the <code>&lt;input&gt;</code> element to prevent it from being part of the post data when not changed.</td>
</tr>
</tbody>
</table>
</div>
<h3>Methods</h3>
<h4>.fileinput(options)</h4>
<p>Initializes a file upload widget.</p>
<h4>.fileinput('clear')</h4>
<p>Clear the selected file.</p>
<h4>.fileinput('reset')</h4>
<p>Reset the form element to the original value.</p>
<h3>Events</h3>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>change.bs.fileinput</td>
<td>This event is fired after a file is selected.</td>
</tr>
<tr>
<td>clear.bs.fileinput</td>
<td>This event is fired when the file input is cleared.</td>
</tr>
<tr>
<td>reset.bs.fileinput</td>
<td>This event is fired when the file input is reset.</td>
</tr>
</tbody>
</table>
</div><!-- ./bs-table-responsive -->
</div>
</div>
</div>
</div>
<!-- Footer
================================================== -->
<footer class="bs-footer" role="contentinfo">
<div class="container">
<div class="bs-social">
<ul class="bs-social-buttons">
<li>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=jasny&amp;repo=bootstrap&amp;type=watch&amp;count=true" width="100" height="20" title="Star on GitHub"></iframe>
</li>
<li>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=jasny&amp;repo=bootstrap&amp;type=fork&amp;count=true" width="102" height="20" title="Fork on GitHub"></iframe>
</li>
<li class="follow-btn">
<a href="https://twitter.com/ArnoldDaniels" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @ArnoldDaniels</a>
</li>
<li class="tweet-btn">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://jasny.github.io/bootstrap" data-count="horizontal" data-via="ArnoldDaniels">Tweet</a>
</li>
</ul>
</div>
<p>Jasny Bootstrap is a fork of <a href="http://getbootstrap.com/" target="_blank">Twitter Bootstrap</a>. This fork is developed and maintained by <a href="http://twitter.com/ArnoldDaniels" target="_blank">Arnold Daniels</a>.</p>
<p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<ul class="footer-links">
<li>Currently v3.1.0</li>
<li class="muted">&middot;</li>
<li><a href="../2.3.1/">Bootstrap 2.3.1 docs</a></li>
<li class="muted">&middot;</li>
<li><a href="http://www.jasny.net">Jasny.net</a></li>
<li class="muted">&middot;</li>
<li><a href="https://github.com/jasny/bootstrap/issues?state=open">Issues</a></li>
<li class="muted">&middot;</li>
<li><a href="https://github.com/jasny/bootstrap/releases">Releases</a></li>
</ul>
</div>
</footer>
<!-- JS and analytics only. -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="../dist/js/jasny-bootstrap.min.js"></script>
<script src="http://platform.twitter.com/widgets.js"></script>
<script src="../assets/js/docs.min.js"></script>
</body>
</html>