r2663 - spinner: added readOnly and spinnerClass options. added visual tests for min, max, step a...
Author: pazu2k@gmail.com
Date: Sat Jun 6 12:07:15 2009
New Revision: 2663
Added:
branches/dev/spinner/tests/visual/spinner/spinner_min_max_step.html
(contents, props changed)
branches/dev/spinner/tests/visual/spinner/spinner_option_readOnly.html
(contents, props changed)
Modified:
branches/dev/spinner/ui/ui.spinner.js
Log:
spinner: added readOnly and spinnerClass options. added visual tests for
min, max, step and readOnly. renamed 'pageStep' to 'page' to follow design
spec.
Added: branches/dev/spinner/tests/visual/spinner/spinner_min_max_step.html
==============================================================================
--- (empty file)
+++ branches/dev/spinner/tests/visual/spinner/spinner_min_max_step.html Sat
Jun 6 12:07:15 2009
@@ -0,0 +1,80 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>Spinner Visual Test : Spinner options min, max and step</title>
+ <link rel="stylesheet" href="../visual.css" type="text/css">
+ <link rel="stylesheet" href="../../../themes/base/ui.all.css"
type="text/css">
+ <script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.spinner.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ $('#spinner1').spinner();
+ $('#spinner1min').text($('#spinner1').spinner('option','min'));
+ $('#spinner1max').text($('#spinner1').spinner('option','max'));
+ $('#spinner1step').text($('#spinner1').spinner('option','step'));
+
+ $('#spinner2').spinner();
+ $('#spinner2min').text($('#spinner2').spinner('option','min'));
+ $('#spinner2max').text($('#spinner2').spinner('option','max'));
+ $('#spinner2step').text($('#spinner2').spinner('option','step'));
+
+ $('#spinner3').spinner({ min: 0, max: 50, step: 5 });
+ $('#spinner3min').text($('#spinner3').spinner('option','min'));
+ $('#spinner3max').text($('#spinner3').spinner('option','max'));
+ $('#spinner3step').text($('#spinner3').spinner('option','step'));
+ });
+ </script>
+</head>
+<body>
+
+<table class="ui-widget ui-widget-content">
+<colgroup>
+<col width="200">
+<col width="200">
+<col width="200">
+</colgroup>
+<thead class="ui-widget-header">
+<tr>
+ <th>Description</th>
+ <th>Spinner</th>
+ <th>Values</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+
+ <td>Default min, max, step values:</td>
+ <td><input id="spinner1" type="text"></td>
+ <td>
+ <strong>Min:</strong> <span id="spinner1min"></span>
+ <strong>Max:</strong> <span id="spinner1max"></span>
+ <strong>Step:</strong> <span id="spinner1step"></span>
+ </td>
+</tr>
+
+<tr>
+ <td>With HTML5 attributes:</td>
+ <td><input id="spinner2" type="number" max="10" min="-10" step="1"></td>
+ <td>
+ <strong>Min:</strong> <span id="spinner2min"></span>
+ <strong>Max:</strong> <span id="spinner2max"></span>
+ <strong>Step:</strong> <span id="spinner2step"></span>
+ </td>
+</tr>
+
+<tr>
+ <td>With HTML5 attributes and options (options should override attribute
values):</td>
+ <td><input id="spinner3" type="number" max="10" min="-10" step="1"></td>
+ <td>
+ <strong>Min:</strong> <span id="spinner3min"></span>
+ <strong>Max:</strong> <span id="spinner3max"></span>
+ <strong>Step:</strong> <span id="spinner3step"></span>
+ </td>
+</tr>
+</tbody>
+
+</table>
+
+</body>
+</html>
\ No newline at end of file
Added:
branches/dev/spinner/tests/visual/spinner/spinner_option_readOnly.html
==============================================================================
--- (empty file)
+++ branches/dev/spinner/tests/visual/spinner/spinner_option_readOnly.html
Sat Jun 6 12:07:15 2009
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>Spinner Visual Test : Spinner option readOnly</title>
+ <link rel="stylesheet" href="../visual.css" type="text/css">
+ <link rel="stylesheet" href="../../../themes/base/ui.all.css"
type="text/css">
+ <script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.spinner.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ $('#spinner1').spinner();
+
+ $('#spinner2').spinner({ readOnly: true });
+
+ });
+ </script>
+</head>
+<body>
+<div class="ui-widget">
+
+ <label>HTML attribute readOnly:</label> <input id="spinner1"
type="text" readonly="readonly">
+ <label>Spinner option readOnly:</label> <input id="spinner2"
type="text">
+
+</div>
+</body>
+</html>
\ No newline at end of file
Modified: branches/dev/spinner/ui/ui.spinner.js
==============================================================================
--- branches/dev/spinner/ui/ui.spinner.js (original)
+++ branches/dev/spinner/ui/ui.spinner.js Sat Jun 6 12:07:15 2009
@@ -59,11 +59,12 @@
}
self.validChars = validChars;
- // Parse min, max, step, and pageStep for strings based on radix, apply
HTML5 attributes if they are null
- self.options.min = parse(self.options.min, self.element.attr('min'));
- self.options.max = parse(self.options.max, self.element.attr('max'));
+ // Parse min, max, step, and page for strings based on radix, apply
HTML5 attributes if they are null
+ self.options.max = parse(self.options.max, self.element.attr('max') ||
Number.MAX_VALUE);
+ self.options.min = parse(self.options.min, self.element.attr('min') ||
-Number.MAX_VALUE);
+ self.options.page = parse(self.options.page);
+ self.options.readOnly = parse(self.options.readOnly,
self.element.attr('readonly'));
self.options.step = parse(self.options.step, self.element.attr('step')) |
| 1;
- self.options.pageStep = parse(self.options.pageStep);
// check for precision in steppinng and set _precision as internal
self._precision = parseInt(self.options.precision, 10);
@@ -207,6 +208,11 @@
self._trigger('change', event, self.ui());
})
.bind('focus'+namespace, function() {
+ if (self.options.readOnly) {
+ self.element.blur();
+ return false;
+ }
+
self.focused = true;
if (!self.hovered && typeof self.options.hide != 'boolean'
&& !self.disabled)
self._delay(self._show, 100, 'hide', self.options.hide);
@@ -295,16 +301,16 @@
var KEYS = $.ui.keyCode;
if (event.keyCode == KEYS.UP) {
- this._up(this.options[event.shiftKey ? 'pageStep' : 'step'], event);
+ this._up(this.options[event.shiftKey ? 'page' : 'step'], event);
}
if (event.keyCode == KEYS.DOWN) {
- this._down(this.options[event.shiftKey ? 'pageStep' : 'step'], event);
+ this._down(this.options[event.shiftKey ? 'page' : 'step'], event);
}
if (event.keyCode == KEYS.PAGE_UP) {
- this._up(this.options.pageStep, event);
+ this._up(this.options.page, event);
}
if (event.keyCode == KEYS.PAGE_DOWN) {
- this._down(this.options.pageStep, event);
+ this._down(this.options.page, event);
}
if (event.keyCode == KEYS.HOME) {
//Home key goes to min, if defined, else to options.value
@@ -521,30 +527,26 @@
version: "@VERSION",
eventPrefix: "spin",
defaults: {
- precision: 0,
- radix: 10,
- padLength: 0,
- max: null,
- min: null,
-
- // null defaults to 1 in _init. We use null so that we can detect if
passed value should override HTML5 attribute
- step: null,
- pageStep: 5,
- value: 0,
-
- incremental: true,
- mouseWheel: true,
currency: false,
-
+ dir: 'ltr',
format: '%',
groupSeparator: '',
- radixPoint: '.',
-
- items: null,
- width: false,
hide: false,
-
- dir: 'ltr'
+ incremental: true,
+ items: null,
+ max: null,
+ min: null,
+ mouseWheel: true,
+ padLength: 0,
+ page: 5,
+ precision: 0,
+ radix: 10,
+ radixPoint: '.',
+ readOnly: null,
+ spinnerClass: null,
+ step: null,
+ value: 0,
+ width: false
},
format: {
currency: function(num, sym, group, pt) {