diff options
author | Rafael Xavier de Souza <rxaviers@gmail.com> | 2014-06-24 21:50:13 -0700 |
---|---|---|
committer | Rafael Xavier de Souza <rxaviers@gmail.com> | 2014-06-24 21:51:01 -0700 |
commit | d877e1d088db43a2a7583bbb099519b5753b2456 (patch) | |
tree | 83a306505f7d69914cd6d6e9c37468640d1445e8 | |
parent | e1b0a2777a0c1a12344e7cd1dd0d8be19f49b040 (diff) | |
download | jquery-ui-spinner-globalize-1.x.tar.gz jquery-ui-spinner-globalize-1.x.zip |
Spinner: Update demos FIXMEspinner-globalize-1.x
-rw-r--r-- | bower.json | 36 | ||||
-rw-r--r-- | demos/spinner/currency.html | 10 | ||||
-rw-r--r-- | demos/spinner/decimal.html | 80 | ||||
-rw-r--r-- | demos/spinner/default.html | 97 | ||||
-rw-r--r-- | demos/spinner/latlong.html | 86 | ||||
-rw-r--r-- | demos/spinner/overflow.html | 71 | ||||
-rw-r--r-- | demos/spinner/time.html | 107 |
7 files changed, 316 insertions, 171 deletions
diff --git a/bower.json b/bower.json index ef8f57736..34b2852d4 100644 --- a/bower.json +++ b/bower.json @@ -1,18 +1,22 @@ { - "name": "jquery-ui", - "ignore": [ - "**/.*", - "build", - "demos", - "external", - "tests" - ], - "dependencies": { - "jquery": ">=1.6 <1.11" - }, - "devDependencies": { - "jquery-mousewheel": "3.1.11", - "jshint": "2.4.4", - "qunit": "1.14.0" - } + "name": "jquery-ui", + "ignore": [ + "**/.*", + "build", + "demos", + "external", + "tests" + ], + "dependencies": { + "jquery": ">1.6", + "requirejs": "~2.1.14", + "globalize": "1.x", + "requirejs-plugins": "~1.0.2", + "requirejs-text": "~2.0.12" + }, + "devDependencies": { + "jquery-mousewheel": "3.1.11", + "jshint": "2.4.4", + "qunit": "1.14.0" + } } diff --git a/demos/spinner/currency.html b/demos/spinner/currency.html index 19e0c2396..efd9edffd 100644 --- a/demos/spinner/currency.html +++ b/demos/spinner/currency.html @@ -4,15 +4,6 @@ <meta charset="utf-8"> <title>jQuery UI Spinner - Currency</title> <link rel="stylesheet" href="../../themes/base/all.css"> - <script src="../../jquery.js"></script> - <script src="../../external/jquery.mousewheel.js"></script> - <script src="../../external/globalize.js"></script> - <script src="../../external/globalize.culture.de-DE.js"></script> - <script src="../../external/globalize.culture.ja-JP.js"></script> - <script src="../../ui/core.js"></script> - <script src="../../ui/widget.js"></script> - <script src="../../ui/button.js"></script> - <script src="../../ui/spinner.js"></script> <link rel="stylesheet" href="../demos.css"> <script> $(function() { @@ -49,5 +40,6 @@ <div class="demo-description"> <p>Example of a donation form, with currency selection and amount spinner.</p> </div> + </body> </html> diff --git a/demos/spinner/decimal.html b/demos/spinner/decimal.html index 682e2f994..27fd9e7d9 100644 --- a/demos/spinner/decimal.html +++ b/demos/spinner/decimal.html @@ -4,30 +4,7 @@ <meta charset="utf-8"> <title>jQuery UI Spinner - Decimal</title> <link rel="stylesheet" href="../../themes/base/all.css"> - <script src="../../jquery.js"></script> - <script src="../../external/jquery.mousewheel.js"></script> - <script src="../../external/globalize.js"></script> - <script src="../../external/globalize.culture.de-DE.js"></script> - <script src="../../external/globalize.culture.ja-JP.js"></script> - <script src="../../ui/core.js"></script> - <script src="../../ui/widget.js"></script> - <script src="../../ui/button.js"></script> - <script src="../../ui/spinner.js"></script> <link rel="stylesheet" href="../demos.css"> - <script> - $(function() { - $( "#spinner" ).spinner({ - step: 0.01, - numberFormat: "n" - }); - - $( "#culture" ).change(function() { - var current = $( "#spinner" ).spinner( "value" ); - Globalize.culture( $(this).val() ); - $( "#spinner" ).spinner( "value", current ); - }); - }); - </script> </head> <body> @@ -38,9 +15,9 @@ <p> <label for="culture">Select a culture to use for formatting:</label> <select id="culture"> - <option value="en-EN" selected="selected">English</option> - <option value="de-DE">German</option> - <option value="ja-JP">Japanese</option> + <option value="en" selected="selected">English</option> + <option value="es">Spanish</option> + <option value="ar">Arabic</option> </select> </p> @@ -52,5 +29,56 @@ formatting, based on the new culture. </p> </div> + +<script src="../../deleteme/requirejs/require.js"></script> +<script> + +require.config({ + paths: { + cldr: "../../deleteme/cldrjs/dist/cldr", + "cldr-data": "../../deleteme/cldr", + globalize: "../../deleteme/globalize/dist/globalize", + jquery: "../../deleteme/jquery/dist/jquery", + json: "../../deleteme/requirejs-plugins/src/json", + text: "../../deleteme/requirejs-text/text", + ui: "../../ui" + } +}); + +require([ + "jquery", + "globalize", + "json!cldr-data/main/ar/numbers.json", + "json!cldr-data/main/en/numbers.json", + "json!cldr-data/main/es/numbers.json", + "json!cldr-data/supplemental/likelySubtags.json", + "globalize/number", + "ui/spinner" +], function( $, Globalize, arNumbers, enNumbers, esNumbers, likelySubtags ) { + + Globalize.load( arNumbers ); + Globalize.load( enNumbers ); + Globalize.load( esNumbers ); + Globalize.load( likelySubtags ); + Globalize.locale( "en" ); + + $( "#spinner" ).spinner({ + step: 0.01, + numberFormat: { + maximumFractionDigits: 2, + minimumFractionDigits: 2 + } + }); + + $( "#culture" ).change(function() { + var current = $( "#spinner" ).spinner( "value" ); + Globalize.locale( $(this).val() ); + $( "#spinner" ).spinner( "value", current ); + }); + +}); + +</script> + </body> </html> diff --git a/demos/spinner/default.html b/demos/spinner/default.html index a127374b2..941ae486f 100644 --- a/demos/spinner/default.html +++ b/demos/spinner/default.html @@ -4,41 +4,7 @@ <meta charset="utf-8"> <title>jQuery UI Spinner - Default functionality</title> <link rel="stylesheet" href="../../themes/base/all.css"> - <script src="../../jquery.js"></script> - <script src="../../external/jquery.mousewheel.js"></script> - <script src="../../ui/core.js"></script> - <script src="../../ui/widget.js"></script> - <script src="../../ui/button.js"></script> - <script src="../../ui/spinner.js"></script> <link rel="stylesheet" href="../demos.css"> - <script> - $(function() { - var spinner = $( "#spinner" ).spinner(); - - $( "#disable" ).click(function() { - if ( spinner.spinner( "option", "disabled" ) ) { - spinner.spinner( "enable" ); - } else { - spinner.spinner( "disable" ); - } - }); - $( "#destroy" ).click(function() { - if ( spinner.spinner( "instance" ) ) { - spinner.spinner( "destroy" ); - } else { - spinner.spinner(); - } - }); - $( "#getvalue" ).click(function() { - alert( spinner.spinner( "value" ) ); - }); - $( "#setvalue" ).click(function() { - spinner.spinner( "value", 5 ); - }); - - $( "button" ).button(); - }); - </script> </head> <body> @@ -60,5 +26,68 @@ <div class="demo-description"> <p>Default spinner.</p> </div> + +<script src="../../deleteme/requirejs/require.js"></script> +<script> + +require.config({ + paths: { + cldr: "../../deleteme/cldrjs/dist/cldr", + "cldr-data": "../../deleteme/cldr", + globalize: "../../deleteme/globalize/dist/globalize", + jquery: "../../deleteme/jquery/dist/jquery", + "jquery-mousewheel": "../../deleteme/jquery-mousewheel/jquery.mousewheel", + json: "../../deleteme/requirejs-plugins/src/json", + text: "../../deleteme/requirejs-text/text", + ui: "../../ui" + } +}); + +require([ + "jquery", + "globalize", + "json!cldr-data/main/ar/numbers.json", + "json!cldr-data/main/en/numbers.json", + "json!cldr-data/main/es/numbers.json", + "json!cldr-data/supplemental/likelySubtags.json", + "globalize/number", + "ui/spinner" +], function( $, Globalize, arNumbers, enNumbers, esNumbers, likelySubtags ) { + + Globalize.load( arNumbers ); + Globalize.load( enNumbers ); + Globalize.load( esNumbers ); + Globalize.load( likelySubtags ); + Globalize.locale( "en" ); + + var spinner = $( "#spinner" ).spinner(); + + $( "#disable" ).click(function() { + if ( spinner.spinner( "option", "disabled" ) ) { + spinner.spinner( "enable" ); + } else { + spinner.spinner( "disable" ); + } + }); + $( "#destroy" ).click(function() { + if ( spinner.spinner( "instance" ) ) { + spinner.spinner( "destroy" ); + } else { + spinner.spinner(); + } + }); + $( "#getvalue" ).click(function() { + alert( spinner.spinner( "value" ) ); + }); + $( "#setvalue" ).click(function() { + spinner.spinner( "value", 5 ); + }); + + $( "button" ).button(); + +}); + +</script> + </body> </html> diff --git a/demos/spinner/latlong.html b/demos/spinner/latlong.html index 432501c8b..015a362dc 100644 --- a/demos/spinner/latlong.html +++ b/demos/spinner/latlong.html @@ -5,34 +5,7 @@ <title>jQuery UI Spinner - Map</title> <link rel="stylesheet" href="../../themes/base/all.css"> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> - <script src="../../jquery.js"></script> - <script src="../../external/jquery.mousewheel.js"></script> - <script src="../../ui/core.js"></script> - <script src="../../ui/widget.js"></script> - <script src="../../ui/button.js"></script> - <script src="../../ui/spinner.js"></script> <link rel="stylesheet" href="../demos.css"> - <script> - $(function() { - function latlong() { - return new google.maps.LatLng( $("#lat").val(), $("#lng").val() ); - } - function position() { - map.setCenter( latlong() ); - } - $( "#lat, #lng" ).spinner({ - step: .001, - change: position, - stop: position - }); - - var map = new google.maps.Map( $("#map")[0], { - zoom: 8, - center: latlong(), - mapTypeId: google.maps.MapTypeId.ROADMAP - }); - }); - </script> <style> #map { width:500px; @@ -53,5 +26,64 @@ <div class="demo-description"> <p>Google Maps integration, using spinners to change latitude and longitude.</p> </div> + +<script src="../../deleteme/requirejs/require.js"></script> +<script> + +require.config({ + paths: { + cldr: "../../deleteme/cldrjs/dist/cldr", + "cldr-data": "../../deleteme/cldr", + globalize: "../../deleteme/globalize/dist/globalize", + jquery: "../../deleteme/jquery/dist/jquery", + "jquery-mousewheel": "../../deleteme/jquery-mousewheel/jquery.mousewheel", + json: "../../deleteme/requirejs-plugins/src/json", + text: "../../deleteme/requirejs-text/text", + ui: "../../ui" + } +}); + +require([ + "jquery", + "globalize", + "json!cldr-data/main/ar/numbers.json", + "json!cldr-data/main/en/numbers.json", + "json!cldr-data/main/es/numbers.json", + "json!cldr-data/supplemental/likelySubtags.json", + "globalize/number", + "ui/spinner" +], function( $, Globalize, arNumbers, enNumbers, esNumbers, likelySubtags ) { + + Globalize.load( arNumbers ); + Globalize.load( enNumbers ); + Globalize.load( esNumbers ); + Globalize.load( likelySubtags ); + Globalize.locale( "en" ); + + function latlong() { + return new google.maps.LatLng( $("#lat").val(), $("#lng").val() ); + } + function position() { + map.setCenter( latlong() ); + } + $( "#lat, #lng" ).spinner({ + step: .001, + change: position, + stop: position, + numberFormat: { + minimumFractionDigits: 3 + } + }); + + var map = new google.maps.Map( $("#map")[0], { + zoom: 8, + center: latlong(), + mapTypeId: google.maps.MapTypeId.ROADMAP + }); + +}); + +</script> + </body> </html> diff --git a/demos/spinner/overflow.html b/demos/spinner/overflow.html index 6ca14e7b6..e79881d5f 100644 --- a/demos/spinner/overflow.html +++ b/demos/spinner/overflow.html @@ -4,28 +4,7 @@ <meta charset="utf-8"> <title>jQuery UI Spinner - Overflow</title> <link rel="stylesheet" href="../../themes/base/all.css"> - <script src="../../jquery.js"></script> - <script src="../../external/jquery.mousewheel.js"></script> - <script src="../../ui/core.js"></script> - <script src="../../ui/widget.js"></script> - <script src="../../ui/button.js"></script> - <script src="../../ui/spinner.js"></script> <link rel="stylesheet" href="../demos.css"> - <script> - $(function() { - $( "#spinner" ).spinner({ - spin: function( event, ui ) { - if ( ui.value > 10 ) { - $( this ).spinner( "value", -10 ); - return false; - } else if ( ui.value < -10 ) { - $( this ).spinner( "value", 10 ); - return false; - } - } - }); - }); - </script> </head> <body> @@ -40,5 +19,55 @@ Overflowing spinner restricted to a range of -10 to 10. For anything above 10, it'll overflow to -10, and the other way round. </p> </div> + +<script src="../../deleteme/requirejs/require.js"></script> +<script> + +require.config({ + paths: { + cldr: "../../deleteme/cldrjs/dist/cldr", + "cldr-data": "../../deleteme/cldr", + globalize: "../../deleteme/globalize/dist/globalize", + jquery: "../../deleteme/jquery/dist/jquery", + "jquery-mousewheel": "../../deleteme/jquery-mousewheel/jquery.mousewheel", + json: "../../deleteme/requirejs-plugins/src/json", + text: "../../deleteme/requirejs-text/text", + ui: "../../ui" + } +}); + +require([ + "jquery", + "globalize", + "json!cldr-data/main/ar/numbers.json", + "json!cldr-data/main/en/numbers.json", + "json!cldr-data/main/es/numbers.json", + "json!cldr-data/supplemental/likelySubtags.json", + "globalize/number", + "ui/spinner" +], function( $, Globalize, arNumbers, enNumbers, esNumbers, likelySubtags ) { + + Globalize.load( arNumbers ); + Globalize.load( enNumbers ); + Globalize.load( esNumbers ); + Globalize.load( likelySubtags ); + Globalize.locale( "en" ); + + $( "#spinner" ).spinner({ + spin: function( event, ui ) { + if ( ui.value > 10 ) { + $( this ).spinner( "value", -10 ); + return false; + } else if ( ui.value < -10 ) { + $( this ).spinner( "value", 10 ); + return false; + } + } + }); + +}); + +</script> + </body> </html> diff --git a/demos/spinner/time.html b/demos/spinner/time.html index e1235e914..87db07e38 100644 --- a/demos/spinner/time.html +++ b/demos/spinner/time.html @@ -4,16 +4,68 @@ <meta charset="utf-8"> <title>jQuery UI Spinner - Time</title> <link rel="stylesheet" href="../../themes/base/all.css"> - <script src="../../jquery.js"></script> - <script src="../../external/jquery.mousewheel.js"></script> - <script src="../../external/globalize.js"></script> - <script src="../../external/globalize.culture.de-DE.js"></script> - <script src="../../ui/core.js"></script> - <script src="../../ui/widget.js"></script> - <script src="../../ui/button.js"></script> - <script src="../../ui/spinner.js"></script> <link rel="stylesheet" href="../demos.css"> <script> + </script> +</head> +<body> + +<p> + <label for="spinner">Time spinner:</label> + <input id="spinner" name="spinner" value="08:30 PM"> +</p> +<p> + <label for="locale">Select a locale to use for formatting:</label> + <select id="locale"> + <option value="en" selected="selected">English</option> + <option value="de">German</option> + </select> +</p> + +<div class="demo-description"> +<p> + A custom widget extending spinner. Use the Globalization plugin to parse and output + a timestamp, with custom step and page options. Cursor up/down spins minutes, page up/down + spins hours. +</p> +</div> + +<script src="../../deleteme/requirejs/require.js"></script> +<script> + +require.config({ + paths: { + cldr: "../../deleteme/cldrjs/dist/cldr", + "cldr-data": "../../deleteme/cldr", + globalize: "../../deleteme/globalize/dist/globalize", + jquery: "../../deleteme/jquery/dist/jquery", + "jquery-mousewheel": "../../deleteme/jquery-mousewheel/jquery.mousewheel", + json: "../../deleteme/requirejs-plugins/src/json", + text: "../../deleteme/requirejs-text/text", + ui: "../../ui" + } +}); + +require([ + "jquery", + "globalize", + "json!cldr-data/main/de/ca-gregorian.json", + "json!cldr-data/main/de/numbers.json", + "json!cldr-data/main/en/ca-gregorian.json", + "json!cldr-data/main/en/numbers.json", + "json!cldr-data/supplemental/likelySubtags.json", + "globalize/date", + "globalize/number", + "ui/spinner" +], function( $, Globalize, deCaGregorian, deNumbers, enCaGregorian, enNumbers, likelySubtags ) { + + Globalize.load( deCaGregorian ); + Globalize.load( deNumbers ); + Globalize.load( enCaGregorian ); + Globalize.load( enNumbers ); + Globalize.load( likelySubtags ); + Globalize.locale( "en" ); + $.widget( "ui.timespinner", $.ui.spinner, { options: { // seconds @@ -28,47 +80,26 @@ if ( Number( value ) == value ) { return Number( value ); } - return +Globalize.parseDate( value ); + return Globalize.parseDate( value, { time: "short" } ).getTime(); } return value; }, _format: function( value ) { - return Globalize.format( new Date(value), "t" ); + return Globalize.formatDate( new Date( value ), { time: "short" } ); } }); - $(function() { - $( "#spinner" ).timespinner(); + $( "#spinner" ).timespinner(); - $( "#culture" ).change(function() { - var current = $( "#spinner" ).timespinner( "value" ); - Globalize.culture( $(this).val() ); - $( "#spinner" ).timespinner( "value", current ); - }); + $( "#locale" ).change(function() { + var current = $( "#spinner" ).timespinner( "value" ); + Globalize.locale( $(this).val() ); + $( "#spinner" ).timespinner( "value", current ); }); - </script> -</head> -<body> +}); -<p> - <label for="spinner">Time spinner:</label> - <input id="spinner" name="spinner" value="08:30 PM"> -</p> -<p> - <label for="culture">Select a culture to use for formatting:</label> - <select id="culture"> - <option value="en-EN" selected="selected">English</option> - <option value="de-DE">German</option> - </select> -</p> +</script> -<div class="demo-description"> -<p> - A custom widget extending spinner. Use the Globalization plugin to parse and output - a timestamp, with custom step and page options. Cursor up/down spins minutes, page up/down - spins hours. -</p> -</div> </body> </html> |