in icon lists, support 'info' that is not a string, but an element

source/Ox.UI/css/Ox.UI.css

@@ -1092,8 +1092,14 @@ Lists
     border-radius: 4px;
     //-moz-user-select: text;
     //-webkit-user-select: text;
-    
 }
+.OxIconList .OxItem > .OxText > div > div,
+.OxIconList .OxItem > .OxText > div > div > div {
+    font-size: 9px;
+    font-weight: bold;
+    text-align: center;
+}
+
 
 .OxTextList {
     top: 0;

source/Ox.UI/js/Core/Ox.Keyboard.js

@@ -101,7 +101,6 @@
             buffer = '';
         }, 1000);
 
-        Ox.print(ret);
         return ret;
 
     }

source/Ox.UI/js/List/Ox.IconItem.js

@@ -42,12 +42,26 @@ Ox.IconItem = function(options, self) {
 
     Ox.extend(self, {
         fontSize: self.options.itemWidth == 64 ? 6 : 9,
+        infoIsObject: Ox.isObject(self.options.info),
         lineLength: self.options.itemWidth == 64 ? 15 : 23,
         lines: self.options.itemWidth == 64 ? 4 : 5,
         url: Ox.UI.PATH + 'png/transparent.png',
     });
-    self.title = formatText(self.options.title, self.lines - 1, self.lineLength);
+
-    self.info = formatText(self.options.info, 5 - self.title.split('<br/>').length, self.lineLength);
+    self.title = formatText(self.options.title, self.lines - 1 - self.infoIsObject, self.lineLength);
+    if (!self.infoIsObject) {
+        self.info = formatText(self.options.info, 5 - self.title.split('<br/>').length, self.lineLength);
+    } else {
+        self.title = $('<div>').html(self.title);
+        self.info = $('<div>').append(
+            self.options.info.css({
+                width: Math.round(self.options.itemWidth / 2) + 'px',
+                padding: 0,
+                margin: '1px auto 1px auto',
+                textShadow: 'none'
+            })
+        );
+    }
 
     that.css({
         width: self.options.itemWidth + 'px',
@@ -86,11 +100,13 @@ Ox.IconItem = function(options, self) {
         .css({
             fontSize: self.fontSize + 'px'
         })
-        .html(
-            self.title + '<br/><span class="OxInfo">' + self.info + '</span>'
-        )
         .mouseenter(mouseenter)
         .mouseleave(mouseleave);
+    if (!self.infoIsObject) {
+        that.$text.html(self.title + '<br/><span class="OxInfo">' + self.info + '</span>')
+    } else {
+        that.$text.append(self.title).append(self.info);
+    }
     that.$reflection = $('<div>')
         .addClass('OxReflection')
         .css({

source/Ox.UI/js/List/Ox.IconList.js

@@ -114,7 +114,10 @@ Ox.IconList = function(options, self) {
 
     function updateKeys() {
         that.$element.options({
-            keys: Ox.unique(Ox.merge(self.options.sort[0].key, self.options.keys))
+            keys: Ox.unique(Ox.merge(
+                self.options.sort[0].key.split(':').pop(),
+                self.options.keys
+            ))
         });
     }