r850 - in branches/experimental: tests/visual/menu ui
Author: paul.bakaus
Date: Fri Oct 31 10:34:19 2008
New Revision: 850
Modified:
branches/experimental/tests/visual/menu/menu.html
branches/experimental/ui/ui.menu.js
Log:
menu: added dropdown mode as addition to context
Modified: branches/experimental/tests/visual/menu/menu.html
==============================================================================
--- branches/experimental/tests/visual/menu/menu.html (original)
+++ branches/experimental/tests/visual/menu/menu.html Fri Oct 31 10:34:19
2008
@@ -22,6 +22,11 @@
items: '#items2'
});
+ $('#menu2').menu({
+ items: '#items3',
+ mode: 'context'
+ });
+
});
@@ -67,6 +72,37 @@
<button>Open menu!</button>
<ul id='items2'>
+ <li><a href="#">Celebrity news</a></li>
+ <li><a href="#">Gossip</a></li>
+ <li><a href="#">Movies</a></li>
+ <li><a href="#">Music</a>
+ <ul>
+ <li><a href="#">Alternative</a></li>
+ <li><a href="#">Country</a></li>
+ <li><a href="#">Dance</a></li>
+ <li><a href="#">Electronica</a></li>
+ <li><a href="#">Metal</a></li>
+ <li><a href="#">Pop</a></li>
+ <li><a href="#">Rock</a>
+ <ul>
+ <li><a href="#">Bands</a>
+ <ul>
+ <li><a href="#">Dokken</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Fan Clubs</a></li>
+ <li><a href="#">Songs</a></li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li><a href="#">Slide shows</a></li>
+ <li><a href="#">Red carpet</a></li>
+ </ul>
+
+ <div id='menu2' style='height: 100px; width: 100px; background:
green;'></div>
+
+ <ul id='items3'>
<li><a href="#">Celebrity news</a></li>
<li><a href="#">Gossip</a></li>
<li><a href="#">Movies</a></li>
Modified: branches/experimental/ui/ui.menu.js
==============================================================================
--- branches/experimental/ui/ui.menu.js (original)
+++ branches/experimental/ui/ui.menu.js Fri Oct 31 10:34:19 2008
@@ -5,7 +5,7 @@
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
- * http://docs.jquery.com/UI/Draggables
+ * http://docs.jquery.com/UI/Menu
*
* Depends:
* ui.core.js
@@ -67,14 +67,24 @@
if(this.menu.css('position') != 'absolute') //If the position isn't
absolute,
this.menu.css('position', 'absolute').height(this.menu.height()).css('position', 'relative');
//set a hard value for the height
- //Remove the menu from the DOM, until it is shown
- if(o.mode == 'context') {
+
+ if(o.mode != 'static') {
- this.element.bind('click', function() {
- self.open();
- });
+ if(o.mode == 'dropdown') {
+ this.element.bind('click', function() {
+ self.toggle();
+ });
+ }
+
+ if(o.mode == 'context') {
+ this.element.bind('contextmenu', function(e) {
+ self.open();
+ e.preventDefault();
+ });
+ }
- this.menu.remove();
+ //Hide the menu, until it is shown
+ this.menu.hide();
}
},
@@ -150,9 +160,13 @@
},
+ toggle: function() {
+ return this[this.visible ? 'close' : 'open']();
+ },
+
open: function() {
- this.menu.appendTo(this.options.appendTo);
+ this.menu.show();
var offset = this.element.offset();
this.menu.css({
@@ -160,10 +174,15 @@
top: offset.top + this.element.height()
});
+ this.visible = true;
+
},
close: function() {
+ this.menu.hide();
+ this.visible = false;
+
}
});
@@ -171,9 +190,9 @@
$.extend($.ui.menu, {
defaults: {
type: 'normal', //Can be set to either normal, ipod style or toolbar
- mode: 'context', //Can be set to context (open on click) or static
(render into the selected element)
+ mode: 'dropdown', //Can be set to context (open on click) or static
(render into the selected element)
items: '> ul', //Can be either a jQuery selector, therefore using markup
in the selected node, or a JSON list of menu entries
- appendTo: 'body', //Only in case of context - where the actual menu is
being appended to
+ appendTo: 'body', //Only in case of context/dropdown - where the actual
menu is being appended to
width: 180,
height: null, //If height specified and surpassed, up and down arrows at
both ends are shown to navigate up and down,