Permalink
Browse files

Mask Demos: First draft of some demos in mask

  • Loading branch information...
1 parent 9e3d21c commit dd55dbc618eca08e70374d95e1bf731c11c18bbc @gnarf gnarf committed Oct 28, 2011
Showing with 194 additions and 0 deletions.
  1. +4 −0 demos/index.html
  2. +38 −0 demos/mask/default.html
  3. +93 −0 demos/mask/functiondefinition.html
  4. +18 −0 demos/mask/index.html
  5. +41 −0 demos/mask/regulardefinition.html
View
@@ -19,6 +19,7 @@
<script src="../ui/jquery.ui.dialog.js"></script>
<script src="../ui/jquery.ui.draggable.js"></script>
<script src="../ui/jquery.ui.droppable.js"></script>
+ <script src="../ui/jquery.ui.mask.js"></script>
<script src="../ui/jquery.ui.menu.js"></script>
<script src="../ui/jquery.ui.menubar.js"></script>
<script src="../ui/jquery.ui.popup.js"></script>
@@ -30,6 +31,7 @@
<script src="../ui/jquery.ui.sortable.js"></script>
<script src="../ui/jquery.ui.spinner.js"></script>
<script src="../ui/jquery.ui.tabs.js"></script>
+ <script src="../ui/jquery.ui.timepicker.js"></script>
<script src="../ui/jquery.ui.tooltip.js"></script>
<script src="../ui/jquery.effects.core.js"></script>
<script src="../ui/jquery.effects.blind.js"></script>
@@ -280,13 +282,15 @@
<dd><a href="button/index.html">Button</a></dd>
<dd><a href="datepicker/index.html">Datepicker</a></dd>
<dd><a href="dialog/index.html">Dialog</a></dd>
+ <dd><a href="mask/index.html">Mask</a></dd>
<dd><a href="menu/index.html">Menu</a></dd>
<dd><a href="menubar/index.html">Menubar</a></dd>
<dd><a href="popup/index.html">Popup</a></dd>
<dd><a href="progressbar/index.html">Progressbar</a></dd>
<dd><a href="slider/index.html">Slider</a></dd>
<dd><a href="spinner/index.html">Spinner</a></dd>
<dd><a href="tabs/index.html">Tabs</a></dd>
+ <dd><a href="timepicker/index.html">Timepicker</a></dd>
<dd><a href="tooltip/index.html">Tooltip</a></dd>
<dt>Effects</dt>
<dd><a href="animate/index.html">Color Animation</a></dd>
View
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>jQuery UI Mask - Simple Mask Demo</title>
+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+ <script src="../../jquery-1.6.4.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.mask.js"></script>
+ <link href="../demos.css" rel="stylesheet" />
+ <script>
+ $(function() {
+ $("#phone").mask({
+ mask: "(999) 999-9999"
+ });
+ });
+ </script>
+ <style>
+
+ </style>
+</head>
+<body>
+
+<div class="demo">
+ Phone Number: <input id="phone"> (999) 999-9999<br>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>A few simple masks</p>
+
+</div><!-- End demo-description -->
+
+
+
+</body>
+</html>
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>jQuery UI Mask - Function Definition Demo</title>
+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+ <script src="../../jquery-1.6.4.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.mask.js"></script>
+ <link href="../demos.css" rel="stylesheet" />
+ <script>
+ $(function() {
+
+ function createTwoDigitDefinition( maximum ) {
+ return function( value ) {
+ var number = parseInt( value, 10 );
+
+ if ( value === "" || /\D/.test( value ) ) {
+ return;
+ }
+
+ // allow "0" if it is the only character in the value,
+ // otherwise allow anything from 1 to maximum
+ if ( !number && value.length === 2 ) {
+ return;
+ }
+
+ // pad to 2 characters
+ number = ( number < 10 ? "0" : "" ) + number;
+ if ( number <= maximum ) {
+ return number;
+ }
+ }
+ }
+
+ function yearsDefinition( value ) {
+ var temp;
+
+ // if the value is empty, or contains a non-digit, it is invalid
+ if ( value === "" || /\D/.test( value ) ) {
+ return false;
+ }
+
+ // convert 2 digit years to 4 digits, this allows us to type 80 <right>
+ if ( value.length <= 2 ) {
+ temp = parseInt( value, 10 );
+ // before "32" we assume 2000's otherwise 1900's
+ if ( temp < 10 ) {
+ return "200" + temp;
+ } else if ( temp < 32 ) {
+ return "20" + temp;
+ } else {
+ return "19" + temp;
+ }
+ }
+ if ( value.length === 3 ) {
+ return "0"+value;
+ }
+ if ( value.length === 4 ) {
+ return value;
+ }
+ }
+ $("#date").mask({
+ mask: "yyyy/mm/dd",
+ definitions: {
+ "mm": createTwoDigitDefinition( 12 ),
+ "dd": createTwoDigitDefinition( 31 ),
+ "yyyy": yearsDefinition
+ }
+ });
+ });
+ </script>
+ <style>
+
+ </style>
+</head>
+<body>
+
+<div class="demo">
+ Date: <input id="date"> Format: yyyy/mm/dd<br>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>An example of using functions to define new mask definitions. These definitions are "multiple character" fields that allow us to have a date formatted input that validates.</p>
+
+</div><!-- End demo-description -->
+
+
+
+</body>
+</html>
View
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>jQuery UI Mask Demos</title>
+ <link href="../demos.css" rel="stylesheet" />
+</head>
+<body>
+ <div class="demos-nav">
+ <h4>Examples</h4>
+ <ul>
+ <li class="demo-config-on"><a href="default.html">Simple Masks</a></li>
+ <li><a href="regulardefinition.html">RegExp Definition</a></li>
+ <li><a href="functiondefinition.html">Function Definition</a></li>
+ </ul>
+ </div>
+</body>
+</html>
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>jQuery UI Mask - Regular Expressions Demo</title>
+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+ <script src="../../jquery-1.6.4.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.mask.js"></script>
+ <link href="../demos.css" rel="stylesheet" />
+ <script>
+ $(function() {
+ $("#rx").mask({
+ mask: "~9.99 ~9.99 999",
+ definitions: {
+ "~": /[+-]/
+ }
+ });
+ });
+ </script>
+ <style>
+
+ </style>
+</head>
+<body>
+
+<div class="demo">
+ Lens Perscription: <input id="rx"> Format: ~9.99 ~9.99 999<br>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>An example of using a regular expression to define a new mask definition. Using the <code>definitions</code> option we define the <code>~</code> in the mask to only accept a <code>+</code> or a <code>-</code>.</p>
+
+</div><!-- End demo-description -->
+
+
+
+</body>
+</html>

3 comments on commit dd55dbc

Owner

jzaefferer replied Oct 28, 2011

functiondefinition.html looks like too much code for a demo. Kind of related to that, a demo showing a combination of datepicker and mask would be great - probably not something we can tackle before mask is in master and we can merge it to the datepicker branch, as the current datepicker also does input restrictions.

Owner

gnarf replied Oct 28, 2011

I'm struggling to find a good "easy" demo for function definition, but it isn't an easy thing to do... Should I just skip it and make more generic demos?

Some of the idea's I've had for other demos - weigh in?

  • Checking for valid on keyup and adding a class to the input
  • Changing Masks: Phone Number Region Selector?
Owner

jzaefferer replied Oct 29, 2011

Came up in a discussion with Richard as well: Maybe we should actually have a datepicker that works like the timepicker, combining mask and spinner and bundling the validation logic for dates.

For other demo ideas: First one sounds good, no idea what the second is about.

Please sign in to comment.