r927 - in branches/experimental: tests/visual/menu ui
Author: paul.bakaus
Date: Wed Nov 12 07:19:36 2008
New Revision: 927
Modified:
branches/experimental/tests/visual/menu/menu.html
branches/experimental/ui/ui.menu.js
Log:
menu: implemented ajax functionality through json - simply use a function
in the 'items' value, and call the first argument when you're ready (second
argument is the ui object for usefulness). It replaces
ui-arrow-right-default with ui-loading-right-default while loading.
Modified: branches/experimental/tests/visual/menu/menu.html
==============================================================================
--- branches/experimental/tests/visual/menu/menu.html (original)
+++ branches/experimental/tests/visual/menu/menu.html Wed Nov 12 07:19:36
2008
@@ -70,7 +70,21 @@
'Menu Item 1': {
items: {
'Sub Item 1': {},
- 'Sub Item 2': {}
+ 'Sub Item 2': {
+ items: function(ready, ui) {
+
+ window.setTimeout(function() {
+ ready({
+ 'Ajax Item 1': {},
+ 'Ajax Item 2': {}
+ });
+ }, 1000);
+
+
+
+ },
+ cache: false
+ }
},
icon: null,
choose: function() {
@@ -82,8 +96,8 @@
'Menu Item 4': {}
},
mode: 'context',
- appendTo: 'element',
- direction: 'left above',
+ //appendTo: 'element',
+ //direction: 'left above',
choose: function(e, ui) {
console.log('Selected item ', ui.item);
},
Modified: branches/experimental/ui/ui.menu.js
==============================================================================
--- branches/experimental/ui/ui.menu.js (original)
+++ branches/experimental/ui/ui.menu.js Wed Nov 12 07:19:36 2008
@@ -40,13 +40,17 @@
},
- _generateMarkupFromJSON: function(json) {
+ _generateMarkupFromJSON: function(json, cache) {
var html = $('<ul></ul>');
+ if($.isFunction(json)) {
+ json.cache = cache;
+ return html.data('menu-ajax', json);
+ }
for(var i in json) {
var item = $('<li><a href="#">'+i+'</a></li>').appendTo(html);
- if(json[i].items)
item.append(this._generateMarkupFromJSON(json[i].items));
+ if(json[i].items)
item.append(this._generateMarkupFromJSON(json[i].items, json[i].cache));
}
@@ -120,15 +124,46 @@
if(this._hideTimers[i][1][0] == subList[0])
clearTimeout(this._hideTimers[i][0]);
};
- this._showTimers.push([setTimeout(function(){
- subList.addClass('ui-component-content').show();
- subList.positionAround(e, {
- around: subList.parent(),
- direction: 'right',
- offset: [0,-1]
- });
- self._trigger('browse', e, { item: subList });
- }, this.options.flyoutDelay), subList]);
+ if(subList.data('menu-ajax')) {
+
+ item.find('a >
span').removeClass('ui-arrow-right-default').addClass('ui-loading-right-default');
//Use loading indicator instead of arrow
+ subList.data('menu-ajax').apply(this.element, [function(markup) {
+
+ subList.empty();
+ self.add(markup, item);
+ item.find('a >
span').removeClass('ui-loading-right-default').addClass('ui-arrow-right-default');
+
+ //If we want to cache it, remove the ajax binding when it's called
once
+ if(subList.data('menu-ajax').cache) subList.data('menu-ajax', false);
+
+ self._showTimers.push([setTimeout(function(){
+ subList.addClass('ui-component-content').show();
+ subList.positionAround(e, {
+ around: subList.parent(),
+ direction: 'right',
+ offset: [0,-1]
+ });
+ self._trigger('browse', e, { item: subList });
+ }, 0), subList]);
+
+ }, { item: item }]);
+
+
+ } else {
+
+ this._showTimers.push([setTimeout(function(){
+ subList.addClass('ui-component-content').show();
+ subList.positionAround(e, {
+ around: subList.parent(),
+ direction: 'right',
+ offset: [0,-1]
+ });
+ self._trigger('browse', e, { item: subList });
+ }, this.options.flyoutDelay), subList]);
+
+ }
+
+
}
@@ -436,19 +471,22 @@
add: function(item, position) {
var self = this;
- var item = $(item.constructor == String || item.jquery ? item :
this._generateMarkupFromJSON());
- position = position.selector ? position :
this._resolvePosition(position);
+ var item = $(item.constructor == String || item.jquery ? item :
this._generateMarkupFromJSON(item));
+ position = position.selector || position.jquery ? position :
this._resolvePosition(position);
- if(position.action != 'append') { //We want to have it before/after a
node
+ if(position.action && position.action != 'append') { //We want to have
it before/after a node
$(position.selector, this.menu)[position.action](item);
} else {
-
- if(!$(position.selector, this.menu).find('ul').length) {
- $(position.selector, this.menu).append('<ul></ul>');
- this._attachFlyoutStyles($(position.selector, this.menu)[0]);
+
+ if(!$(position.selector || position, this.menu).find('ul').length) {
+ $(position.selector || position, this.menu).append('<ul></ul>');
+ this._attachFlyoutStyles($(position.selector || position,
this.menu)[0]);
}
- $(position.selector, this.menu).find('ul')[position.action](item);
+ //We have to remove the outer ul that served as a wrapper, because we
already have a ul
+ if(item.is('ul')) item = $('> *', item);
+
+ $(position.selector || position, this.menu).find('ul').append(item);
}