github/bootstrap
1
1
Fork 0
mirror of https://github.com/jasny/bootstrap.git synced 2026-01-20 03:47:59 -05:00
Code Issues Packages Projects Releases Wiki Activity

Documented inputmask javascript plugin

Browse Source 
Added bootstrap-inputmask.js to Makefile
This commit is contained in:
Arnold Daniels
2012-07-17 18:35:05 +02:00
parent fd14bd13df
commit 3dfd931948
5 changed files with 92 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
Makefile
View File

@@ -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 > 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 > 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 > 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 > 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,12 +84,13 @@ jasny-bootstrap:
mkdir -p jasny-bootstrap/css
mkdir -p jasny-bootstrap/js
mkdir -p jasny-bootstrap/fonts
cp js/bootstrap-inputmask.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 /dev/null > jasny-bootstrap/js/jasny-bootstrap.js
cat js/bootstrap-inputmask.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
View File

@@ -121,6 +121,7 @@
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
<script src="assets/js/bootstrap-inputmask.js"></script>
<script src="assets/js/application.js"></script>
</body>

5
docs/templates/pages/index.mustache vendored
View File

@@ -56,6 +56,11 @@
<p>{{_i}}Sometimes a button will pull to much attention to an action. In those cases, you can use action links instead.{{/i}}</p>
<p>{{_i}}Action links look distinctly different than normal links.{{/i}}</p>
</div>
<div class="span3">
<h3><a href="./javascript.html#inputmask">{{_i}}Input mask{{/i}}</a></h3>
<p>{{_i}}Force the user to enter data conform a specific format.{{/i}}</p>
<p>{{_i}}Unlike validation, the user can't enter any other key than the ones specified by the mask.{{/i}}</p>
</div>
</div>
<div class="row">
<div class="span3">

83
docs/templates/pages/javascript.mustache vendored
View File

@@ -2,7 +2,7 @@
================================================== -->
<header class="jumbotron subhead" id="overview">
<h1>{{_i}}Javascript for Bootstrap{{/i}}</h1>
<p class="lead">{{_i}}Bring Bootstrap's components to life&mdash;now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.{{/i}}
<p class="lead">{{_i}}Bring Bootstrap's components to life&mdash;now with 13 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.{{/i}}
<div class="subnav visible-desktop">
<ul class="nav nav-pills">
<li><a href="#javascript">{{_i}}All plugins{{/i}}</a></li>
@@ -30,6 +30,7 @@
<a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Forms{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#typeahead">{{_i}}Typeahead{{/i}}</a></li>
<li><a href="#inputmask">{{_i}}Input mask{{/i}}</a></li>
</ul>
</li>
</ul>
@@ -80,7 +81,7 @@
<p>{{_i}}Do more with buttons. Control button states or create groups of buttons for more components like toolbars.{{/i}}</p>
</div>
</div> <!-- /row -->
<div class="row" style="margin-bottom: 9px;">
<div class="row">
<div class="span3">
<h3><a href="./javascript.html#collapse">{{_i}}Collapse{{/i}}</a></h3>
<p>{{_i}}Get base styles and flexible support for collapsible components like accordions and navigation.{{/i}}</p>
@@ -93,6 +94,12 @@
<h3><a href="./javascript.html#typeahead">Typeahead</a></h3>
<p>{{_i}}A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.{{/i}}</p>
</div>
<div class="span3">
<h3><a href="./javascript.html#inputmask">{{_i}}Input mask{{/i}}</a></h3>
<p>{{_i}}Make sure the user types in the data that you want, by using an input mask.{{/i}}</p>
</div>
</div> <!-- /row -->
<div class="row" style="margin-bottom: 9px;">
<div class="span3">
<h3>{{_i}}Transitions{{/i}} <small class="muted">*</small></h3>
<p>{{_i}}For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.{{/i}}</p>
@@ -1417,4 +1424,76 @@ $('.carousel').carousel({
<p>{{_i}}Initializes an input with a typeahead.{{/i}}</p>
</div>
</div>
</section>
<!-- Input mask
================================================== -->
<section id="inputmask">
<div class="page-header">
<h1>{{_i}}Input mask{{/i}} <small>bootstrap-inputmask.js</small></h1>
</div>
<div class="row">
<div class="span3 columns">
<h3>{{_i}}About{{/i}}</h3>
<p>{{_i}}Input masks can be used to force the user to enter data conform a specific format.{{/i}}</p>
<p>{{_i}}Unlike validation, the user can't enter any other key than the ones specified by the mask.{{/i}}</p>
</div>
<div class="span9 columns">
<h2>{{_i}}Example{{/i}}</h2>
<div class="well">
<label>ISBN <input type="text" class="span2" data-mask="999-99-999-9999-9"></label>
</div>
<hr>
<h2>{{_i}}Using bootstrap-inputmask.js{{/i}}</h2>
<p>{{_i}}Call the input mask via javascript:{{/i}}</p>
<pre class="prettyprint linenums">$('.inputmask').inputmask()</pre>
<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 style="width: 100px;">{{_i}}default{{/i}}</th>
<th>{{_i}}description{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{_i}}mask{{/i}}</td>
<td>{{_i}}string{{/i}}</td>
<td>''</td>
<td>{{_i}}A string of formatting and literal characters, defining the input mask (see below).{{/i}}</td>
</tr>
<tr>
<td>{{_i}}placeholder{{/i}}</td>
<td>{{_i}}string{{/i}}</td>
<td>'_'</td>
<td>{{_i}}The character that is displayed where something needs to be typed.{{/i}}</td>
</tr>
</tbody>
</table>
<h3>{{_i}}Format{{/i}}</h3>
<table class="table table-striped">
<tr><th>{{_i}}Character{{/i}}</th><th>{{_i}}Description{{/i}}</th></tr>
<tr><td>9</td><td>{{_i}}Number{{/i}}</td></tr>
<tr><td>a</td><td>{{_i}}Letter{{/i}}</td></tr>
<tr><td>?</td><td>{{_i}}Alphanumeric{{/i}}</td></tr>
<tr><td>*</td><td>{{_i}}Any character{{/i}}</td></tr>
</table>
<h3>{{_i}}Markup{{/i}}</h3>
<p>{{_i}}Add data attributes to register an element with an input mask.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;input type="text" data-mask="999-99-999-9999-9"&gt;
</pre>
<h3>{{_i}}Methods{{/i}}</h3>
<h4>.inputmask({{_i}}options{{/i}})</h4>
<p>{{_i}}Initializes an input with an input mask.{{/i}}</p>
</div>
</div>
</section>

2
js/bootstrap-inputmask.js vendored
View File

@@ -3,7 +3,7 @@
* http://twitter.github.com/bootstrap/javascript.html#tooltips
* Based on Masked Input plugin by Josh Bush (digitalbush.com)
* ===========================================================
* Copyright 2012 Twitter, Inc.
* 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.