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.

diff --git a/tests/visual/spinner.html b/tests/visual/spinner.html
index de05b6d25fb980bafa04de2747f53854c462851a..f5b441e26fff58010a6e633ee2721711c79cea07 100644 (file)
--- a/tests/visual/spinner.html
+++ b/tests/visual/spinner.html
@@ -32,11 +32,19 @@ $(function(){
                '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">&raquo;</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">&raquo;</a>',
+                       items: itemList
                }
        };
 

diff --git a/ui/ui.spinner.js b/ui/ui.spinner.js
index 98d10811d6f2c9185fb0c23933c3bcba0c90c8f5..572611b5d04e9cf28cecc52ba30ea0addba1138b 100644 (file)
--- a/ui/ui.spinner.js
+++ b/ui/ui.spinner.js
@@ -22,6 +22,14 @@ $.widget('ui.spinner', {
                        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 @@ $.widget('ui.spinner', {
                        .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 @@ $.widget('ui.spinner', {
                        });
                }
        },
-       _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 @@ $.extend($.ui.spinner, {
                stepping: 1,
                start: 0,
                incremental: true,
-               currency: false
+               currency: false,
+               format: '%',
+               items: []
        },
        format: {
                number: function(num, dec) {
@@ -329,4 +360,5 @@ $.extend($.ui.spinner, {
        }
 });
 
+
 })(jQuery);