r731 - in trunk: tests/visual ui
Author: pazu2k@gmail.com
Date: Sat Sep 20 12:04:01 2008
New Revision: 731
Modified:
trunk/tests/visual/spinner.html
trunk/ui/ui.spinner.js
Log:
Spinner: new options: format, items & decimals (r728).
items: accepts a array of objects which will be converted to a list of
items by the spinner.
format: printf style formatting of each item - accepts named arguments.
Modified: trunk/tests/visual/spinner.html
==============================================================================
--- trunk/tests/visual/spinner.html (original)
+++ trunk/tests/visual/spinner.html Sat Sep 20 12:04:01 2008
@@ -32,11 +32,19 @@
's3': {currency: '$'},
's4': {},
's5': {
+ //
+ // Two methods of adding external items to the spinner
+ //
+ // method 1: on initalisation call the add method directly and format
html manually
init: function(ui) {
for (var i=0; i<itemList.length; i++) {
- ui.add(itemList[i].title +' <a href="'+ itemList[i].url +'"
target="_blank">»</a>');
+ ui.add('<a href="'+ itemList[i].url +'" target="_blank">'+
itemList[i].title +'</a>');
}
- }
+ },
+
+ // method 2: use the format and items options in combination
+ format: '%(title) <a href="%(url)" target="_blank">»</a>',
+ items: itemList
}
};
Modified: trunk/ui/ui.spinner.js
==============================================================================
--- trunk/ui/ui.spinner.js (original)
+++ trunk/ui/ui.spinner.js Sat Sep 20 12:04:01 2008
@@ -22,6 +22,14 @@
this.options.init(this.ui(null));
}
+ // perform data bind on generic objects
+ if (typeof this.options.items[0] == 'object'
&& !this.element.is('input')) {
+ var data = this.options.items;
+ for (var i=0; i<data.length; i++) {
+ this._addItem(data[i]);
+ }
+ }
+
// check for decimals in steppinng and set _decimals as internal
this._decimals = parseInt(this.options.decimals);
if (this.options.stepping.toString().indexOf('.') != -1) {
@@ -127,6 +135,8 @@
.css('height', this.element.outerHeight()/this._items)
.children()
.addClass('ui-spinner-listitem')
+ .css('height', this.element.outerHeight())
+ .css('overflow', 'hidden')
.end()
.parent()
.css('height', this.element.outerHeight())
@@ -234,12 +244,31 @@
});
}
},
- _addItem: function(html) {
+ _addItem: function(obj, fmt) {
if (!this.element.is('input')) {
var wrapper = 'div';
if (this.element.is('ol') || this.element.is('ul')) {
wrapper = 'li';
}
+ var html = obj; // string or object set it to html first
+
+ if (typeof obj == 'object') {
+ var format = (fmt != undefined) ? fmt : this.options.format;
+
+ html = format.replace(/%(\(([^)]+)\))?/g,
+ (function(data){
+ return function(match, a, lbl) {
+ if (!lbl) {
+ for (var itm in data) {
+ return data[itm]; // return the first item only
+ }
+ } else {
+ return data[lbl];
+ }
+ }
+ })(obj)
+ );
+ }
this.element.append('<'+ wrapper +' class="ui-spinner-dyn">'+ html
+ '</'+ wrapper +'>');
}
},
@@ -307,7 +336,9 @@
stepping: 1,
start: 0,
incremental: true,
- currency: false
+ currency: false,
+ format: '%',
+ items: []
},
format: {
number: function(num, dec) {
@@ -328,5 +359,6 @@
}
}
});
+
})(jQuery);