+++ /dev/null
-package gwtquery.jsquery.client;
-
-/**
- *
- * This class wraps the jquery menu plugin from:
- *
- * http://p.sohei.org/jquery-plugins/menu/
- *
- */
-public abstract class JsMenu {
-
- public static native void loadPlugin() /*-{
- var l = @gwtquery.jsquery.client.utils.JsQueryUtils::log(Ljava/lang/Object;);
- var window = $wnd;
- var document = $doc;
- var jQuery = $wnd.$;
-
-(function($)
-{
- var menus = [], //list of all menus
- visibleMenus = [], //list of all visible menus
- activeMenu = activeItem = null,
- menuDIVElement = $('<div class="menu-div outerbox" style="position:absolute;top:0;left:0;display:none;"><div class="shadowbox1"></div><div class="shadowbox2"></div><div class="shadowbox3"></div></div>')[0],
- menuULElement = $('<ul class="menu-ul innerbox"></ul>')[0],
- menuItemElement = $('<li style="position:relative;"><div class="menu-item"></div></li>')[0],
- arrowElement = $('<img class="menu-item-arrow" />')[0],
- $rootDiv = $('<div id="root-menu-div" style="position:absolute;top:0;left:0;"></div>'), //create main menu div
- defaults = {
- // $.Menu options
- showDelay : 200,
- hideDelay : 200,
- hoverOpenDelay: 0,
- offsetTop : 0,
- offsetLeft : 0,
- minWidth: 0,
- onOpen: null,
- onClose: null,
-
- // $.MenuItem options
- onClick: null,
- arrowSrc: null,
- addExpando: false,
-
- // $.fn.menuFromElement options
- copyClassAttr: false
- };
-
- $(function(){
- $rootDiv.appendTo('body');
- });
-
- $.extend({
- MenuCollection : function(items) {
-
- this.menus = [];
-
- this.init(items);
- }
- });
- $.extend($.MenuCollection, {
- prototype : {
- init : function(items)
- {
- if ( items && items.length )
- {
- for ( var i = 0; i < items.length; i++ )
- {
- this.addMenu(items[i]);
- items[i].menuCollection = this;
- }
- }
- },
- addMenu : function(menu)
- {
- if ( menu instanceof $.Menu )
- this.menus.push(menu);
-
- menu.menuCollection = this;
-
- var self = this;
- $(menu.target).hover(function(){
- if ( menu.visible )
- return;
-
- //when there is an open menu in this collection, hide it and show the new one
- for ( var i = 0; i < self.menus.length; i++ )
- {
- if ( self.menus[i].visible )
- {
- self.menus[i].hide();
- menu.show();
- return;
- }
- }
- }, function(){});
- }
- }
- });
-
- $.extend({
- Menu : function(target, items, options) {
- this.menuItems = []; //all direct child $.MenuItem objects
- this.subMenus = []; //all subMenus from this.menuItems
- this.visible = false;
- this.active = false; //this menu has hover or one of its submenus is open
- this.parentMenuItem = null;
- this.settings = $.extend({}, defaults, options);
- this.target = target;
- this.$eDIV = null;
- this.$eUL = null;
- this.timer = null;
- this.menuCollection = null;
- this.openTimer = null;
-
- this.init();
- if ( items && $.isArray(items) )
- this.addItems(items);
- }
- });
- $.extend($.Menu, {
- checkMouse : function(e)
- {
- var t = e.target;
- //the user clicked on the target of the currenty open menu
- if ( visibleMenus.length && t == visibleMenus[0].target )
- return;
-
- //get the last node before the #root-menu-div
- while ( t.parentNode && t.parentNode != $rootDiv[0] )
- t = t.parentNode;
-
- // FIXME: why do we need a timeout
- setTimeout($.Menu.closeAll, 100);
-
- // FIXME: JsQuery each doesn't work with arrays
- // if ( !$(visibleMenus).filter(function(){ return this.$eDIV[0] == t }).length )
- // {
- // $.Menu.closeAll();
- // }
- return true;
- },
- checkKey : function(e)
- {
- switch ( e.keyCode )
- {
- case 13: //return
- if ( activeItem )
- activeItem.click(e, activeItem.$eLI[0]);
- break;
- case 27: //ESC
- $.Menu.closeAll();
- break;
- case 37: //left
- if ( !activeMenu )
- activeMenu = visibleMenus[0];
- var a = activeMenu;
- if ( a && a.parentMenuItem ) //select the parent menu and close the submenu
- {
- //unbind the events temporary, as we dont want the hoverout event to fire
- var pmi = a.parentMenuItem;
- pmi.$eLI.unbind('mouseout').unbind('mouseover');
- a.hide();
- pmi.hoverIn(true);
- setTimeout(function(){ //bind again..but delay it
- pmi.bindHover();
- });
- }
- else if ( a && a.menuCollection ) //select the previous menu in the collection
- {
- var pos,
- mcm = a.menuCollection.menus;
- if ( (pos = $.inArray(a, mcm)) > -1 )
- {
- if ( --pos < 0 )
- pos = mcm.length - 1;
- $.Menu.closeAll();
- mcm[pos].show();
- mcm[pos].setActive();
- if ( mcm[pos].menuItems.length ) //select the first item
- mcm[pos].menuItems[0].hoverIn(true);
- }
- }
- break;
- case 38: //up
- if ( activeMenu )
- activeMenu.selectNextItem(-1);
- break;
- case 39: //right
- if ( !activeMenu )
- activeMenu = visibleMenus[0];
- var m,
- a = activeMenu,
- asm = activeItem ? activeItem.subMenu : null;
- if ( a )
- {
- if ( asm && asm.menuItems.length ) //select the submenu
- {
- asm.show();
- asm.menuItems[0].hoverIn();
- }
- else if ( (a = a.inMenuCollection()) ) //select the next menu in the collection
- {
- var pos,
- mcm = a.menuCollection.menus;
- if ( (pos = $.inArray(a, mcm)) > -1 )
- {
- if ( ++pos >= mcm.length )
- pos = 0;
- $.Menu.closeAll();
- mcm[pos].show();
- mcm[pos].setActive();
- if ( mcm[pos].menuItems.length ) //select the first item
- mcm[pos].menuItems[0].hoverIn(true);
- }
- }
- }
- break;
- case 40: //down
- if ( !activeMenu )
- {
- if ( visibleMenus.length && visibleMenus[0].menuItems.length )
- visibleMenus[0].menuItems[0].hoverIn();
- }
- else
- activeMenu.selectNextItem();
- break;
- }
- if ( e.keyCode > 36 && e.keyCode < 41 )
- return false; //this will prevent scrolling
- },
- closeAll : function()
- {
- while ( visibleMenus.length )
- visibleMenus[0].hide();
- },
- setDefaults : function(d)
- {
- $.extend(defaults, d);
- },
- prototype : {
-
- init : function()
- {
- var self = this;
- if ( !this.target )
- return;
- else if ( this.target instanceof $.MenuItem )
- {
- this.parentMenuItem = this.target;
- this.target.addSubMenu(this);
- this.target = this.target.$eLI;
- }
-
- menus.push(this);
-
- //use the dom methods instead the ones from jquery (faster)
- this.$eDIV = $(menuDIVElement.cloneNode(1));
- this.$eUL = $(menuULElement.cloneNode(1));
- this.$eDIV[0].appendChild(this.$eUL[0]);
- $rootDiv[0].appendChild(this.$eDIV[0]);
-
- //bind events
- if ( !this.parentMenuItem )
- {
- $(this.target).click(function(e){
- self.onClick(e);
- }).hover(function(e){
- self.setActive();
-
- if ( self.settings.hoverOpenDelay )
- {
- self.openTimer = setTimeout(function(){
- if ( !self.visible )
- self.onClick(e);
- }, self.settings.hoverOpenDelay);
- }
- }, function(){
- if ( !self.visible )
- $(this).removeClass('activetarget');
-
- if ( self.openTimer )
- clearTimeout(self.openTimer);
- });
- }
- else
- {
- this.$eDIV.hover(function(){
- self.setActive();
- }, function(){});
- }
- },
- setActive : function()
- {
- if ( !this.parentMenuItem )
- $(this.target).addClass('activetarget');
- else
- this.active = true;
- },
- addItem : function(item)
- {
- if ( item instanceof $.MenuItem )
- {
- if ( $.inArray(item, this.menuItems) == -1 )
- {
- this.$eUL.append(item.$eLI);
- this.menuItems.push(item);
- item.parentMenu = this;
- if ( item.subMenu )
- this.subMenus.push(item.subMenu);
- }
- }
- else
- {
- this.addItem(new $.MenuItem(item, this.settings));
- }
- },
- addItems : function(items)
- {
- for ( var i = 0; i < items.length; i++ )
- {
- this.addItem(items[i]);
- }
- },
- removeItem : function(item)
- {
- var pos = $.inArray(item, this.menuItems);
- if ( pos > -1 )
- this.menuItems.splice(pos, 1);
- item.parentMenu = null;
- },
- hide : function()
- {
- if ( !this.visible )
- return;
-
- var i,
- pos = $.inArray(this, visibleMenus);
-
- this.$eDIV.hide();
-
- if ( pos >= 0 )
- visibleMenus.splice(pos, 1);
- this.visible = this.active = false;
-
- $(this.target).removeClass('activetarget');
-
- //hide all submenus
- for ( i = 0; i < this.subMenus.length; i++ )
- {
- this.subMenus[i].hide();
- }
-
- //set all items inactive (e.g. remove hover class..)
- for ( i = 0; i < this.menuItems.length; i++ )
- {
- if ( this.menuItems[i].active )
- this.menuItems[i].setInactive();
- }
-
- if ( !visibleMenus.length ) //unbind events when the last menu was closed
- $(document).unbind('mousedown', $.Menu.checkMouse).unbind('keydown', $.Menu.checkKey);
-
- if ( activeMenu == this )
- activeMenu = null;
-
- if ( this.settings.onClose )
- this.settings.onClose.call(this);
- },
- show : function(e)
- {
- if ( this.visible )
- return;
-
- var zi,
- pmi = this.parentMenuItem;
-
- if ( this.menuItems.length ) //show only when it has items
- {
- if ( pmi ) //set z-index
- {
- zi = parseInt(pmi.parentMenu.$eDIV.css('z-index'));
- this.$eDIV.css('z-index', (isNaN(zi) ? 1 : zi + 1));
- }
- this.$eDIV.css({visibility: 'hidden', display:'block'});
-
- //set min-width
- if ( this.settings.minWidth )
- {
- if ( this.$eDIV.width() < this.settings.minWidth )
- this.$eDIV.css('width', this.settings.minWidth);
- }
-
- this.setPosition();
- this.$eDIV.css({display:'none', visibility: ''}).show();
-
- //IEs default width: auto is bad! ie6 and ie7 have are producing different errors.. (7 = 5px shadowbox + 2px border)
- if ( 0) //$.browser.msie )
- this.$eUL.css('width', parseInt($.browser.version) == 6 ? this.$eDIV.width() - 7 : this.$eUL.width());
-
- if ( this.settings.onOpen )
- this.settings.onOpen.call(this);
- }
-
- if ( visibleMenus.length == 0 )
- $(document).bind('mousedown', $.Menu.checkMouse).bind('keydown', $.Menu.checkKey);
-
- this.visible = true;
- visibleMenus.push(this);
- },
- setPosition : function()
- {
- var $t, o, posX, posY,
- pmo, //parent menu offset
- wst, //window scroll top
- wsl, //window scroll left
- ww = $(window).width(),
- wh = $(window).height(),
- pmi = this.parentMenuItem,
- height = this.$eDIV[0].clientHeight,
- width = this.$eDIV[0].clientWidth,
- pheight; //parent height
-
- if ( pmi )
- {
- //position on the right side of the parent menu item
- o = pmi.$eLI.offset();
- posX = o.left + pmi.$eLI.width();
- posY = o.top;
- }
- else
- {
- //position right below the target
- $t = $(this.target);
- o = $t.offset();
-
- posX = o.left + this.settings.offsetLeft;
- posY = o.top + $t.height() + this.settings.offsetTop;
- }
-
- //y-pos
- if ($().scrollTop )
- {
- wst = $(window).scrollTop();
- if ( wh < height ) //menu is bigger than the window
- {
- //position the menu at the top of the visible area
- posY = wst;
- }
- else if ( wh + wst < posY + height ) //outside on the bottom?
- {
- if ( pmi )
- {
- pmo = pmi.parentMenu.$eDIV.offset();
- pheight = pmi.parentMenu.$eDIV[0].clientHeight;
- if ( height <= pheight )
- {
- //bottom position = parentmenu-bottom position
- posY = pmo.top + pheight - height;
- }
- else
- {
- //top position = parentmenu-top position
- posY = pmo.top;
- }
- //still outside on the bottom?
- if ( wh + wst < posY + height )
- {
- //shift the menu upwards till the bottom is visible
- posY -= posY + height - (wh + wst);
- }
- }
- else
- {
- //shift the menu upwards till the bottom is visible
- posY -= posY + height - (wh + wst);
- }
- }
- }
- //x-pos
- if ($().scrollLeft )
- {
- wsl = $(window).scrollLeft();
- if ( ww + wsl < posX + width )
- {
- if ( pmi )
- {
- //display the menu not on the right side but on the left side
- posX -= pmi.$eLI.width() + width;
- //outside on the left now?
- if ( posX < wsl )
- posX = wsl;
- }
- else
- {
- //shift the menu to the left until it fits
- posX -= posX + width - (ww + wsl);
- }
- }
- }
-
- //set position
- this.$eDIV.css({left: posX, top: posY});
- },
- onClick : function(e)
- {
- if ( this.visible )
- {
- this.hide();
- this.setActive(); //the class is removed in the hide() method..add it again
- }
- else
- {
- //close all open menus
- $.Menu.closeAll();
- this.show(e);
- }
- },
- addTimer : function(callback, delay)
- {
- var self = this;
- this.timer = setTimeout(function(){
- callback.call(self);
- self.timer = null;
- }, delay);
- },
- removeTimer : function()
- {
- if ( this.timer )
- {
- clearTimeout(this.timer);
- this.timer = null;
- }
- },
- selectNextItem : function(offset)
- {
- var i, pos = 0,
- mil = this.menuItems.length,
- o = offset || 1;
-
- //get current pos
- for ( i = 0; i < mil; i++ )
- {
- if ( this.menuItems[i].active )
- {
- pos = i;
- break;
- }
- }
- this.menuItems[pos].hoverOut();
-
- do //jump over the separators
- {
- pos += o;
- if ( pos >= mil )
- pos = 0;
- else if ( pos < 0 )
- pos = mil - 1;
- } while ( this.menuItems[pos].separator );
- this.menuItems[pos].hoverIn(true);
- },
- inMenuCollection : function()
- {
- var m = this;
- while ( m.parentMenuItem )
- m = m.parentMenuItem.parentMenu;
- return m.menuCollection ? m : null;
- },
- destroy : function() //delete menu
- {
- var pos, item;
-
- this.hide();
-
- //unbind events
- if ( !this.parentMenuItem )
- $(this.target).unbind('click').unbind('mouseover').unbind('mouseout');
- else
- this.$eDIV.unbind('mouseover').unbind('mouseout');
-
- //destroy all items
- while ( this.menuItems.length )
- {
- item = this.menuItems[0];
- item.destroy();
- delete item;
- }
-
- if ( (pos = $.inArray(this, menus)) > -1 )
- menus.splice(pos, 1);
-
- if ( this.menuCollection )
- {
- if ( (pos = $.inArray(this, this.menuCollection.menus)) > -1 )
- this.menuCollection.menus.splice(pos, 1);
- }
-
- this.$eDIV.remove();
- }
- }
- });
-
- $.extend({
- MenuItem : function(obj, options)
- {
- if ( typeof obj == 'string' )
- obj = {src: obj};
-
- this.src = obj.src || '';
- this.url = obj.url || null;
- this.urlTarget = obj.target || null;
- this.addClass = obj.addClass || null;
- this.data = obj.data || null;
-
- this.$eLI = null;
- this.parentMenu = null;
- this.subMenu = null;
- this.settings = $.extend({}, defaults, options);
- this.active = false;
- this.enabled = true;
- this.separator = false;
-
- this.init();
-
- if ( obj.subMenu )
- new $.Menu(this, obj.subMenu, options);
- }
- });
-
- $.extend($.MenuItem, {
- prototype : {
- init : function()
- {
- var i, isStr,
- src = this.src,
- self = this;
-
- this.$eLI = $(menuItemElement.cloneNode(1));
- if ( this.addClass )
- this.$eLI[0].setAttribute('class', this.addClass);
-
- if ( this.settings.addExpando && this.data )
- this.$eLI[0].menuData = this.data;
-
- if ( src == '' )
- {
- this.$eLI.addClass('menu-separator');
- this.separator = true;
- }
- else
- {
- isStr = typeof src == 'string';
- if ( isStr && this.url ) //create a link node, when we have an url
- src = $('<a href="' + this.url + '"' + (this.urlTarget ? 'target="' + this.urlTarget + '"' : '') + '>' + src + '</a>');
- else if ( isStr || !src.length )
- src = [src];
- //go through the passed DOM-Elements (or jquery objects or text nodes.) and append them to the menus list item
- //this.$eLI.append(this.src) is really slow when having a lot(!!!) of items
- for ( i = 0; i < src.length; i++ )
- {
- if ( typeof src[i] == 'string' )
- {
- //we cant use createTextNode, as html entities won't be displayed correctly (eg. ©)
- elem = document.createElement('span');
- elem.innerHTML = src[i];
- this.$eLI[0].firstChild.appendChild(elem);
- }
- else
- this.$eLI[0].firstChild.appendChild(src[i].cloneNode(1));
- }
- }
-
- this.$eLI.click(function(e){
- self.click(e, this);
- });
- this.bindHover();
- },
- click : function(e, scope)
- {
- if ( this.enabled && this.settings.onClick )
- this.settings.onClick.call(scope, e, this);
- },
- bindHover : function()
- {
- var self = this;
- this.$eLI.hover(function(){
- self.hoverIn();
- }, function(){
- self.hoverOut();
- });
- },
- hoverIn : function(noSubMenu)
- {
- this.removeTimer();
-
- var i,
- pms = this.parentMenu.subMenus,
- pmi = this.parentMenu.menuItems,
- self = this;
-
- //remove the timer from the parent item, when there is one (e.g. to close the menu)
- if ( this.parentMenu.timer )
- this.parentMenu.removeTimer();
-
- if ( !this.enabled )
- return;
-
- //deactivate all menuItems on the same level
- for ( i = 0; i < pmi.length; i++ )
- {
- if ( pmi[i].active )
- pmi[i].setInactive();
- }
-
- this.setActive();
- activeMenu = this.parentMenu;
-
- //are there open submenus on the same level? close them!
- for ( i = 0; i < pms.length; i++ )
- {
- if ( pms[i].visible && pms[i] != this.subMenu && !pms[i].timer ) //close if there is no closetimer running already
- pms[i].addTimer(function(){
- this.hide();
- }, pms[i].settings.hideDelay);
- }
-
- if ( this.subMenu && !noSubMenu )
- {
- //set timeout to show menu
- this.subMenu.addTimer(function(){
- this.show();
- }, this.subMenu.settings.showDelay);
- }
- },
- hoverOut : function()
- {
- this.removeTimer();
-
- if ( !this.enabled )
- return;
-
- if ( !this.subMenu || !this.subMenu.visible )
- this.setInactive();
- },
- removeTimer : function()
- {
- if ( this.subMenu )
- {
- this.subMenu.removeTimer();
- }
- },
- setActive : function()
- {
- this.active = true;
- this.$eLI.addClass('active');
-
- //set the parent menu item active too if necessary
- var pmi = this.parentMenu.parentMenuItem;
- if ( pmi && !pmi.active )
- pmi.setActive();
-
- activeItem = this;
- },
- setInactive : function()
- {
- this.active = false;
- this.$eLI.removeClass('active');
- if ( this == activeItem )
- activeItem = null;
- },
- enable : function()
- {
- this.$eLI.removeClass('disabled');
- this.enabled = true;
- },
- disable : function()
- {
- this.$eLI.addClass('disabled');
- this.enabled = false;
- },
- destroy : function()
- {
- this.removeTimer();
-
- this.$eLI.remove();
-
- //unbind events
- this.$eLI.unbind('mouseover').unbind('mouseout').unbind('click');
- //delete submenu
- if ( this.subMenu )
- {
- this.subMenu.destroy();
- delete this.subMenu;
- }
- this.parentMenu.removeItem(this);
- },
- addSubMenu : function(menu)
- {
- if ( this.subMenu )
- return;
- this.subMenu = menu;
- if ( this.parentMenu && $.inArray(menu, this.parentMenu.subMenus) == -1 )
- this.parentMenu.subMenus.push(menu);
- if ( this.settings.arrowSrc )
- {
- var a = arrowElement.cloneNode(0);
- a.setAttribute('src', this.settings.arrowSrc);
- this.$eLI[0].firstChild.appendChild(a);
- }
- }
- }
- });
-
-
- $.extend($.fn, {
- menuFromElement : function(options, list, bar)
- {
- var createItems = function(ul)
- {
- var menuItems = [],
- subItems,
- menuItem,
- lis, $li, i, subUL, submenu, target,
- classNames = null;
-
- lis = getAllChilds(ul, 'LI');
- for ( i = 0; i < lis.length; i++ )
- {
- subItems = [];
-
- if ( !lis[i].childNodes.length ) //empty item? add separator
- {
- menuItems.push(new $.MenuItem('', options));
- continue;
- }
-
- if ( (subUL = getOneChild(lis[i], 'UL')) )
- {
- subItems = createItems(subUL);
- //remove subUL from DOM
- $(subUL).remove();
- }
-
- //select the target...get the elements inside the li
- $li = $(lis[i]);
- if ( $li[0].childNodes.length == 1 && $li[0].childNodes[0].nodeType == 3 )
- target = $li[0].childNodes[0].nodeValue;
- else
- target = $li[0].childNodes;
-
- if ( options && options.copyClassAttr )
- classNames = $li.attr('class');
-
- //create item
- menuItem = new $.MenuItem({src: target, addClass: classNames}, options);
- menuItems.push(menuItem);
- //add submenu
- if ( subItems.length )
- new $.Menu(menuItem, subItems, options);
-
- }
- return menuItems;
- };
- return this.each(function()
- {
- var ul, m;
- //get the list element
- if ( list || (ul = getOneChild(this, 'UL')) )
- {
- //if a specific list element is used, clone it, as we probably need it more than once
- ul = list ? $(list).clone(true)[0] : ul;
- menuItems = createItems(ul);
- if ( menuItems.length )
- {
- m = new $.Menu(this, menuItems, options);
- if ( bar )
- bar.addMenu(m);
- }
- $(ul).hide();
- }
- });
- },
- menuBarFromUL : function(options)
- {
- return this.each(function()
- {
- var i,
- lis = getAllChilds(this, 'LI');
- if ( lis.length )
- {
- bar = new $.MenuCollection();
- for ( i = 0; i < lis.length; i++ )
- $(lis[i]).menuFromElement(options, null, bar);
- }
- });
- },
- menu : function(options, items)
- {
- return this.each(function()
- {
- if ( items && $.isArray(items) )
- new $.Menu(this, items, options);
- else
- {
- if ( this.nodeName.toUpperCase() == 'UL' )
- $(this).menuBarFromUL(options);
- else
- $(this).menuFromElement(options, items);
- }
- });
- }
- });
-
- //faster than using jquery
- var getOneChild = function(elem, name)
- {
- if ( !elem )
- return null;
-
- var n = elem.firstChild;
- for ( ; n; n = n.nextSibling )
- {
- if ( n.nodeType == 1 && n.nodeName.toUpperCase() == name )
- return n;
- }
- return null;
- };
- //faster than using jquery
- var getAllChilds = function(elem, name)
- {
- if ( !elem )
- return [];
-
- var r = [],
- n = elem.firstChild;
- for ( ; n; n = n.nextSibling )
- {
- if ( n.nodeType == 1 && n.nodeName.toUpperCase() == name )
- r[r.length] = n;
- }
- return r;
- };
-
-})(jQuery);
-
- }-*/;
-}
package gwtquery.jsquery.client;
+import gwtquery.jsquery.client.plugins.menu.JsMenu;
+
import java.util.logging.Logger;
import com.google.gwt.core.client.EntryPoint;
// testJs();
}
+ /**
+ * Useful to paste js code here and test in dev mode
+ */
private native static void testJs() /*-{
var l = @gwtquery.jsquery.client.utils.JsQueryUtils::log(Ljava/lang/Object;);
+ window = $wnd;
+ document = $doc;
+ $ = $wnd.$;
- var options = {minWidth: 120, arrowSrc: 'arrow_right.gif', copyClassAttr: true, onClick: function(e, menuItem){
- alert('you clicked item "' + $(this).text() + '"');
- }};
- $('#menuone').menu(options);
-
- var items = [ {src: 'test', url:'http://www.jquery.com'},
- {src: ''}, // separator
- {src: 'test2', subMenu: [ {src: 'sub 1'},
- {src: 'sub 2', url: 'http://p.sohei.org', target: '_blank'},
- {src: 'sub 3'}]}];
- $('#menutwo').menu(options, items);
-
-
}-*/;
-
}
+++ /dev/null
---- query.menu.js 2012-03-17 21:13:29.000000000 +0100
-+++ JsMenu.java 2012-03-17 21:04:09.000000000 +0100
-@@ -114,7 +113,7 @@
- this.openTimer = null;
-
- this.init();
-- if ( items && items.constructor == Array )
-+ if ( items && $.isArray(items) )
- this.addItems(items);
- }
- });
-@@ -132,11 +129,15 @@
- while ( t.parentNode && t.parentNode != $rootDiv[0] )
- t = t.parentNode;
-
-- //is the found node one of the visible menu elements?
-- if ( !$(visibleMenus).filter(function(){ return this.$eDIV[0] == t }).length )
-- {
-- $.Menu.closeAll();
-- }
-+ // FIXME: why do we need a timeout
-+ setTimeout($.Menu.closeAll, 100);
-+
-+ // FIXME: JsQuery each doesn't work with arrays
-+ // if ( !$(visibleMenus).filter(function(){ return this.$eDIV[0] == t }).length )
-+ // {
-+ // $.Menu.closeAll();
-+ // }
-+ return true;
- },
- checkKey : function(e)
- {
-@@ -395,7 +394,7 @@
- this.$eDIV.css({display:'none', visibility: ''}).show();
-
- //IEs default width: auto is bad! ie6 and ie7 have are producing different errors.. (7 = 5px shadowbox + 2px border)
-- if ( $.browser.msie )
-+ if ( 0) //$.browser.msie )
- this.$eUL.css('width', parseInt($.browser.version) == 6 ? this.$eDIV.width() - 7 : this.$eUL.width());
-
- if ( this.settings.onOpen )
-@@ -437,7 +438,7 @@
- }
-
- //y-pos
-- if ( $.fn.scrollTop )
-+ if ($().scrollTop )
- {
- wst = $(window).scrollTop();
- if ( wh < height ) //menu is bigger than the window
-@@ -476,7 +477,7 @@
- }
- }
- //x-pos
-- if ( $.fn.scrollLeft )
-+ if ($().scrollLeft )
- {
- wsl = $(window).scrollLeft();
- if ( ww + wsl < posX + width )
-@@ -898,7 +897,7 @@
- {
- return this.each(function()
- {
-- if ( items && items.constructor == Array )
-+ if ( items && $.isArray(items) )
- new $.Menu(this, items, options);
- else
- {
-
--- /dev/null
+package gwtquery.jsquery.client.plugins.menu;
+
+/**
+ *
+ * This class wraps the jquery menu plugin from:
+ *
+ * http://p.sohei.org/jquery-plugins/menu/
+ *
+ */
+public abstract class JsMenu {
+
+ public static native void loadPlugin() /*-{
+ var l = @gwtquery.jsquery.client.utils.JsQueryUtils::log(Ljava/lang/Object;);
+ var window = $wnd;
+ var document = $doc;
+ var jQuery = $wnd.$;
+
+(function($)
+{
+ var menus = [], //list of all menus
+ visibleMenus = [], //list of all visible menus
+ activeMenu = activeItem = null,
+ menuDIVElement = $('<div class="menu-div outerbox" style="position:absolute;top:0;left:0;display:none;"><div class="shadowbox1"></div><div class="shadowbox2"></div><div class="shadowbox3"></div></div>')[0],
+ menuULElement = $('<ul class="menu-ul innerbox"></ul>')[0],
+ menuItemElement = $('<li style="position:relative;"><div class="menu-item"></div></li>')[0],
+ arrowElement = $('<img class="menu-item-arrow" />')[0],
+ $rootDiv = $('<div id="root-menu-div" style="position:absolute;top:0;left:0;"></div>'), //create main menu div
+ defaults = {
+ // $.Menu options
+ showDelay : 200,
+ hideDelay : 200,
+ hoverOpenDelay: 0,
+ offsetTop : 0,
+ offsetLeft : 0,
+ minWidth: 0,
+ onOpen: null,
+ onClose: null,
+
+ // $.MenuItem options
+ onClick: null,
+ arrowSrc: null,
+ addExpando: false,
+
+ // $.fn.menuFromElement options
+ copyClassAttr: false
+ };
+
+ $(function(){
+ $rootDiv.appendTo('body');
+ });
+
+ $.extend({
+ MenuCollection : function(items) {
+
+ this.menus = [];
+
+ this.init(items);
+ }
+ });
+ $.extend($.MenuCollection, {
+ prototype : {
+ init : function(items)
+ {
+ if ( items && items.length )
+ {
+ for ( var i = 0; i < items.length; i++ )
+ {
+ this.addMenu(items[i]);
+ items[i].menuCollection = this;
+ }
+ }
+ },
+ addMenu : function(menu)
+ {
+ if ( menu instanceof $.Menu )
+ this.menus.push(menu);
+
+ menu.menuCollection = this;
+
+ var self = this;
+ $(menu.target).hover(function(){
+ if ( menu.visible )
+ return;
+
+ //when there is an open menu in this collection, hide it and show the new one
+ for ( var i = 0; i < self.menus.length; i++ )
+ {
+ if ( self.menus[i].visible )
+ {
+ self.menus[i].hide();
+ menu.show();
+ return;
+ }
+ }
+ }, function(){});
+ }
+ }
+ });
+
+ $.extend({
+ Menu : function(target, items, options) {
+ this.menuItems = []; //all direct child $.MenuItem objects
+ this.subMenus = []; //all subMenus from this.menuItems
+ this.visible = false;
+ this.active = false; //this menu has hover or one of its submenus is open
+ this.parentMenuItem = null;
+ this.settings = $.extend({}, defaults, options);
+ this.target = target;
+ this.$eDIV = null;
+ this.$eUL = null;
+ this.timer = null;
+ this.menuCollection = null;
+ this.openTimer = null;
+
+ this.init();
+ if ( items && $.isArray(items) )
+ this.addItems(items);
+ }
+ });
+ $.extend($.Menu, {
+ checkMouse : function(e)
+ {
+ var t = e.target;
+ //the user clicked on the target of the currenty open menu
+ if ( visibleMenus.length && t == visibleMenus[0].target )
+ return;
+
+ //get the last node before the #root-menu-div
+ while ( t.parentNode && t.parentNode != $rootDiv[0] )
+ t = t.parentNode;
+
+ // FIXME: why do we need a timeout
+ setTimeout($.Menu.closeAll, 100);
+
+ // FIXME: JsQuery each doesn't work with arrays
+ // if ( !$(visibleMenus).filter(function(){ return this.$eDIV[0] == t }).length )
+ // {
+ // $.Menu.closeAll();
+ // }
+ return true;
+ },
+ checkKey : function(e)
+ {
+ switch ( e.keyCode )
+ {
+ case 13: //return
+ if ( activeItem )
+ activeItem.click(e, activeItem.$eLI[0]);
+ break;
+ case 27: //ESC
+ $.Menu.closeAll();
+ break;
+ case 37: //left
+ if ( !activeMenu )
+ activeMenu = visibleMenus[0];
+ var a = activeMenu;
+ if ( a && a.parentMenuItem ) //select the parent menu and close the submenu
+ {
+ //unbind the events temporary, as we dont want the hoverout event to fire
+ var pmi = a.parentMenuItem;
+ pmi.$eLI.unbind('mouseout').unbind('mouseover');
+ a.hide();
+ pmi.hoverIn(true);
+ setTimeout(function(){ //bind again..but delay it
+ pmi.bindHover();
+ });
+ }
+ else if ( a && a.menuCollection ) //select the previous menu in the collection
+ {
+ var pos,
+ mcm = a.menuCollection.menus;
+ if ( (pos = $.inArray(a, mcm)) > -1 )
+ {
+ if ( --pos < 0 )
+ pos = mcm.length - 1;
+ $.Menu.closeAll();
+ mcm[pos].show();
+ mcm[pos].setActive();
+ if ( mcm[pos].menuItems.length ) //select the first item
+ mcm[pos].menuItems[0].hoverIn(true);
+ }
+ }
+ break;
+ case 38: //up
+ if ( activeMenu )
+ activeMenu.selectNextItem(-1);
+ break;
+ case 39: //right
+ if ( !activeMenu )
+ activeMenu = visibleMenus[0];
+ var m,
+ a = activeMenu,
+ asm = activeItem ? activeItem.subMenu : null;
+ if ( a )
+ {
+ if ( asm && asm.menuItems.length ) //select the submenu
+ {
+ asm.show();
+ asm.menuItems[0].hoverIn();
+ }
+ else if ( (a = a.inMenuCollection()) ) //select the next menu in the collection
+ {
+ var pos,
+ mcm = a.menuCollection.menus;
+ if ( (pos = $.inArray(a, mcm)) > -1 )
+ {
+ if ( ++pos >= mcm.length )
+ pos = 0;
+ $.Menu.closeAll();
+ mcm[pos].show();
+ mcm[pos].setActive();
+ if ( mcm[pos].menuItems.length ) //select the first item
+ mcm[pos].menuItems[0].hoverIn(true);
+ }
+ }
+ }
+ break;
+ case 40: //down
+ if ( !activeMenu )
+ {
+ if ( visibleMenus.length && visibleMenus[0].menuItems.length )
+ visibleMenus[0].menuItems[0].hoverIn();
+ }
+ else
+ activeMenu.selectNextItem();
+ break;
+ }
+ if ( e.keyCode > 36 && e.keyCode < 41 )
+ return false; //this will prevent scrolling
+ },
+ closeAll : function()
+ {
+ while ( visibleMenus.length )
+ visibleMenus[0].hide();
+ },
+ setDefaults : function(d)
+ {
+ $.extend(defaults, d);
+ },
+ prototype : {
+
+ init : function()
+ {
+ var self = this;
+ if ( !this.target )
+ return;
+ else if ( this.target instanceof $.MenuItem )
+ {
+ this.parentMenuItem = this.target;
+ this.target.addSubMenu(this);
+ this.target = this.target.$eLI;
+ }
+
+ menus.push(this);
+
+ //use the dom methods instead the ones from jquery (faster)
+ this.$eDIV = $(menuDIVElement.cloneNode(1));
+ this.$eUL = $(menuULElement.cloneNode(1));
+ this.$eDIV[0].appendChild(this.$eUL[0]);
+ $rootDiv[0].appendChild(this.$eDIV[0]);
+
+ //bind events
+ if ( !this.parentMenuItem )
+ {
+ $(this.target).click(function(e){
+ self.onClick(e);
+ }).hover(function(e){
+ self.setActive();
+
+ if ( self.settings.hoverOpenDelay )
+ {
+ self.openTimer = setTimeout(function(){
+ if ( !self.visible )
+ self.onClick(e);
+ }, self.settings.hoverOpenDelay);
+ }
+ }, function(){
+ if ( !self.visible )
+ $(this).removeClass('activetarget');
+
+ if ( self.openTimer )
+ clearTimeout(self.openTimer);
+ });
+ }
+ else
+ {
+ this.$eDIV.hover(function(){
+ self.setActive();
+ }, function(){});
+ }
+ },
+ setActive : function()
+ {
+ if ( !this.parentMenuItem )
+ $(this.target).addClass('activetarget');
+ else
+ this.active = true;
+ },
+ addItem : function(item)
+ {
+ if ( item instanceof $.MenuItem )
+ {
+ if ( $.inArray(item, this.menuItems) == -1 )
+ {
+ this.$eUL.append(item.$eLI);
+ this.menuItems.push(item);
+ item.parentMenu = this;
+ if ( item.subMenu )
+ this.subMenus.push(item.subMenu);
+ }
+ }
+ else
+ {
+ this.addItem(new $.MenuItem(item, this.settings));
+ }
+ },
+ addItems : function(items)
+ {
+ for ( var i = 0; i < items.length; i++ )
+ {
+ this.addItem(items[i]);
+ }
+ },
+ removeItem : function(item)
+ {
+ var pos = $.inArray(item, this.menuItems);
+ if ( pos > -1 )
+ this.menuItems.splice(pos, 1);
+ item.parentMenu = null;
+ },
+ hide : function()
+ {
+ if ( !this.visible )
+ return;
+
+ var i,
+ pos = $.inArray(this, visibleMenus);
+
+ this.$eDIV.hide();
+
+ if ( pos >= 0 )
+ visibleMenus.splice(pos, 1);
+ this.visible = this.active = false;
+
+ $(this.target).removeClass('activetarget');
+
+ //hide all submenus
+ for ( i = 0; i < this.subMenus.length; i++ )
+ {
+ this.subMenus[i].hide();
+ }
+
+ //set all items inactive (e.g. remove hover class..)
+ for ( i = 0; i < this.menuItems.length; i++ )
+ {
+ if ( this.menuItems[i].active )
+ this.menuItems[i].setInactive();
+ }
+
+ if ( !visibleMenus.length ) //unbind events when the last menu was closed
+ $(document).unbind('mousedown', $.Menu.checkMouse).unbind('keydown', $.Menu.checkKey);
+
+ if ( activeMenu == this )
+ activeMenu = null;
+
+ if ( this.settings.onClose )
+ this.settings.onClose.call(this);
+ },
+ show : function(e)
+ {
+ if ( this.visible )
+ return;
+
+ var zi,
+ pmi = this.parentMenuItem;
+
+ if ( this.menuItems.length ) //show only when it has items
+ {
+ if ( pmi ) //set z-index
+ {
+ zi = parseInt(pmi.parentMenu.$eDIV.css('z-index'));
+ this.$eDIV.css('z-index', (isNaN(zi) ? 1 : zi + 1));
+ }
+ this.$eDIV.css({visibility: 'hidden', display:'block'});
+
+ //set min-width
+ if ( this.settings.minWidth )
+ {
+ if ( this.$eDIV.width() < this.settings.minWidth )
+ this.$eDIV.css('width', this.settings.minWidth);
+ }
+
+ this.setPosition();
+ this.$eDIV.css({display:'none', visibility: ''}).show();
+
+ //IEs default width: auto is bad! ie6 and ie7 have are producing different errors.. (7 = 5px shadowbox + 2px border)
+ if ( 0) //$.browser.msie )
+ this.$eUL.css('width', parseInt($.browser.version) == 6 ? this.$eDIV.width() - 7 : this.$eUL.width());
+
+ if ( this.settings.onOpen )
+ this.settings.onOpen.call(this);
+ }
+
+ if ( visibleMenus.length == 0 )
+ $(document).bind('mousedown', $.Menu.checkMouse).bind('keydown', $.Menu.checkKey);
+
+ this.visible = true;
+ visibleMenus.push(this);
+ },
+ setPosition : function()
+ {
+ var $t, o, posX, posY,
+ pmo, //parent menu offset
+ wst, //window scroll top
+ wsl, //window scroll left
+ ww = $(window).width(),
+ wh = $(window).height(),
+ pmi = this.parentMenuItem,
+ height = this.$eDIV[0].clientHeight,
+ width = this.$eDIV[0].clientWidth,
+ pheight; //parent height
+
+ if ( pmi )
+ {
+ //position on the right side of the parent menu item
+ o = pmi.$eLI.offset();
+ posX = o.left + pmi.$eLI.width();
+ posY = o.top;
+ }
+ else
+ {
+ //position right below the target
+ $t = $(this.target);
+ o = $t.offset();
+
+ posX = o.left + this.settings.offsetLeft;
+ posY = o.top + $t.height() + this.settings.offsetTop;
+ }
+
+ //y-pos
+ if ($().scrollTop )
+ {
+ wst = $(window).scrollTop();
+ if ( wh < height ) //menu is bigger than the window
+ {
+ //position the menu at the top of the visible area
+ posY = wst;
+ }
+ else if ( wh + wst < posY + height ) //outside on the bottom?
+ {
+ if ( pmi )
+ {
+ pmo = pmi.parentMenu.$eDIV.offset();
+ pheight = pmi.parentMenu.$eDIV[0].clientHeight;
+ if ( height <= pheight )
+ {
+ //bottom position = parentmenu-bottom position
+ posY = pmo.top + pheight - height;
+ }
+ else
+ {
+ //top position = parentmenu-top position
+ posY = pmo.top;
+ }
+ //still outside on the bottom?
+ if ( wh + wst < posY + height )
+ {
+ //shift the menu upwards till the bottom is visible
+ posY -= posY + height - (wh + wst);
+ }
+ }
+ else
+ {
+ //shift the menu upwards till the bottom is visible
+ posY -= posY + height - (wh + wst);
+ }
+ }
+ }
+ //x-pos
+ if ($().scrollLeft )
+ {
+ wsl = $(window).scrollLeft();
+ if ( ww + wsl < posX + width )
+ {
+ if ( pmi )
+ {
+ //display the menu not on the right side but on the left side
+ posX -= pmi.$eLI.width() + width;
+ //outside on the left now?
+ if ( posX < wsl )
+ posX = wsl;
+ }
+ else
+ {
+ //shift the menu to the left until it fits
+ posX -= posX + width - (ww + wsl);
+ }
+ }
+ }
+
+ //set position
+ this.$eDIV.css({left: posX, top: posY});
+ },
+ onClick : function(e)
+ {
+ if ( this.visible )
+ {
+ this.hide();
+ this.setActive(); //the class is removed in the hide() method..add it again
+ }
+ else
+ {
+ //close all open menus
+ $.Menu.closeAll();
+ this.show(e);
+ }
+ },
+ addTimer : function(callback, delay)
+ {
+ var self = this;
+ this.timer = setTimeout(function(){
+ callback.call(self);
+ self.timer = null;
+ }, delay);
+ },
+ removeTimer : function()
+ {
+ if ( this.timer )
+ {
+ clearTimeout(this.timer);
+ this.timer = null;
+ }
+ },
+ selectNextItem : function(offset)
+ {
+ var i, pos = 0,
+ mil = this.menuItems.length,
+ o = offset || 1;
+
+ //get current pos
+ for ( i = 0; i < mil; i++ )
+ {
+ if ( this.menuItems[i].active )
+ {
+ pos = i;
+ break;
+ }
+ }
+ this.menuItems[pos].hoverOut();
+
+ do //jump over the separators
+ {
+ pos += o;
+ if ( pos >= mil )
+ pos = 0;
+ else if ( pos < 0 )
+ pos = mil - 1;
+ } while ( this.menuItems[pos].separator );
+ this.menuItems[pos].hoverIn(true);
+ },
+ inMenuCollection : function()
+ {
+ var m = this;
+ while ( m.parentMenuItem )
+ m = m.parentMenuItem.parentMenu;
+ return m.menuCollection ? m : null;
+ },
+ destroy : function() //delete menu
+ {
+ var pos, item;
+
+ this.hide();
+
+ //unbind events
+ if ( !this.parentMenuItem )
+ $(this.target).unbind('click').unbind('mouseover').unbind('mouseout');
+ else
+ this.$eDIV.unbind('mouseover').unbind('mouseout');
+
+ //destroy all items
+ while ( this.menuItems.length )
+ {
+ item = this.menuItems[0];
+ item.destroy();
+ delete item;
+ }
+
+ if ( (pos = $.inArray(this, menus)) > -1 )
+ menus.splice(pos, 1);
+
+ if ( this.menuCollection )
+ {
+ if ( (pos = $.inArray(this, this.menuCollection.menus)) > -1 )
+ this.menuCollection.menus.splice(pos, 1);
+ }
+
+ this.$eDIV.remove();
+ }
+ }
+ });
+
+ $.extend({
+ MenuItem : function(obj, options)
+ {
+ if ( typeof obj == 'string' )
+ obj = {src: obj};
+
+ this.src = obj.src || '';
+ this.url = obj.url || null;
+ this.urlTarget = obj.target || null;
+ this.addClass = obj.addClass || null;
+ this.data = obj.data || null;
+
+ this.$eLI = null;
+ this.parentMenu = null;
+ this.subMenu = null;
+ this.settings = $.extend({}, defaults, options);
+ this.active = false;
+ this.enabled = true;
+ this.separator = false;
+
+ this.init();
+
+ if ( obj.subMenu )
+ new $.Menu(this, obj.subMenu, options);
+ }
+ });
+
+ $.extend($.MenuItem, {
+ prototype : {
+ init : function()
+ {
+ var i, isStr,
+ src = this.src,
+ self = this;
+
+ this.$eLI = $(menuItemElement.cloneNode(1));
+ if ( this.addClass )
+ this.$eLI[0].setAttribute('class', this.addClass);
+
+ if ( this.settings.addExpando && this.data )
+ this.$eLI[0].menuData = this.data;
+
+ if ( src == '' )
+ {
+ this.$eLI.addClass('menu-separator');
+ this.separator = true;
+ }
+ else
+ {
+ isStr = typeof src == 'string';
+ if ( isStr && this.url ) //create a link node, when we have an url
+ src = $('<a href="' + this.url + '"' + (this.urlTarget ? 'target="' + this.urlTarget + '"' : '') + '>' + src + '</a>');
+ else if ( isStr || !src.length )
+ src = [src];
+ //go through the passed DOM-Elements (or jquery objects or text nodes.) and append them to the menus list item
+ //this.$eLI.append(this.src) is really slow when having a lot(!!!) of items
+ for ( i = 0; i < src.length; i++ )
+ {
+ if ( typeof src[i] == 'string' )
+ {
+ //we cant use createTextNode, as html entities won't be displayed correctly (eg. ©)
+ elem = document.createElement('span');
+ elem.innerHTML = src[i];
+ this.$eLI[0].firstChild.appendChild(elem);
+ }
+ else
+ this.$eLI[0].firstChild.appendChild(src[i].cloneNode(1));
+ }
+ }
+
+ this.$eLI.click(function(e){
+ self.click(e, this);
+ });
+ this.bindHover();
+ },
+ click : function(e, scope)
+ {
+ if ( this.enabled && this.settings.onClick )
+ this.settings.onClick.call(scope, e, this);
+ },
+ bindHover : function()
+ {
+ var self = this;
+ this.$eLI.hover(function(){
+ self.hoverIn();
+ }, function(){
+ self.hoverOut();
+ });
+ },
+ hoverIn : function(noSubMenu)
+ {
+ this.removeTimer();
+
+ var i,
+ pms = this.parentMenu.subMenus,
+ pmi = this.parentMenu.menuItems,
+ self = this;
+
+ //remove the timer from the parent item, when there is one (e.g. to close the menu)
+ if ( this.parentMenu.timer )
+ this.parentMenu.removeTimer();
+
+ if ( !this.enabled )
+ return;
+
+ //deactivate all menuItems on the same level
+ for ( i = 0; i < pmi.length; i++ )
+ {
+ if ( pmi[i].active )
+ pmi[i].setInactive();
+ }
+
+ this.setActive();
+ activeMenu = this.parentMenu;
+
+ //are there open submenus on the same level? close them!
+ for ( i = 0; i < pms.length; i++ )
+ {
+ if ( pms[i].visible && pms[i] != this.subMenu && !pms[i].timer ) //close if there is no closetimer running already
+ pms[i].addTimer(function(){
+ this.hide();
+ }, pms[i].settings.hideDelay);
+ }
+
+ if ( this.subMenu && !noSubMenu )
+ {
+ //set timeout to show menu
+ this.subMenu.addTimer(function(){
+ this.show();
+ }, this.subMenu.settings.showDelay);
+ }
+ },
+ hoverOut : function()
+ {
+ this.removeTimer();
+
+ if ( !this.enabled )
+ return;
+
+ if ( !this.subMenu || !this.subMenu.visible )
+ this.setInactive();
+ },
+ removeTimer : function()
+ {
+ if ( this.subMenu )
+ {
+ this.subMenu.removeTimer();
+ }
+ },
+ setActive : function()
+ {
+ this.active = true;
+ this.$eLI.addClass('active');
+
+ //set the parent menu item active too if necessary
+ var pmi = this.parentMenu.parentMenuItem;
+ if ( pmi && !pmi.active )
+ pmi.setActive();
+
+ activeItem = this;
+ },
+ setInactive : function()
+ {
+ this.active = false;
+ this.$eLI.removeClass('active');
+ if ( this == activeItem )
+ activeItem = null;
+ },
+ enable : function()
+ {
+ this.$eLI.removeClass('disabled');
+ this.enabled = true;
+ },
+ disable : function()
+ {
+ this.$eLI.addClass('disabled');
+ this.enabled = false;
+ },
+ destroy : function()
+ {
+ this.removeTimer();
+
+ this.$eLI.remove();
+
+ //unbind events
+ this.$eLI.unbind('mouseover').unbind('mouseout').unbind('click');
+ //delete submenu
+ if ( this.subMenu )
+ {
+ this.subMenu.destroy();
+ delete this.subMenu;
+ }
+ this.parentMenu.removeItem(this);
+ },
+ addSubMenu : function(menu)
+ {
+ if ( this.subMenu )
+ return;
+ this.subMenu = menu;
+ if ( this.parentMenu && $.inArray(menu, this.parentMenu.subMenus) == -1 )
+ this.parentMenu.subMenus.push(menu);
+ if ( this.settings.arrowSrc )
+ {
+ var a = arrowElement.cloneNode(0);
+ a.setAttribute('src', this.settings.arrowSrc);
+ this.$eLI[0].firstChild.appendChild(a);
+ }
+ }
+ }
+ });
+
+
+ $.extend($.fn, {
+ menuFromElement : function(options, list, bar)
+ {
+ var createItems = function(ul)
+ {
+ var menuItems = [],
+ subItems,
+ menuItem,
+ lis, $li, i, subUL, submenu, target,
+ classNames = null;
+
+ lis = getAllChilds(ul, 'LI');
+ for ( i = 0; i < lis.length; i++ )
+ {
+ subItems = [];
+
+ if ( !lis[i].childNodes.length ) //empty item? add separator
+ {
+ menuItems.push(new $.MenuItem('', options));
+ continue;
+ }
+
+ if ( (subUL = getOneChild(lis[i], 'UL')) )
+ {
+ subItems = createItems(subUL);
+ //remove subUL from DOM
+ $(subUL).remove();
+ }
+
+ //select the target...get the elements inside the li
+ $li = $(lis[i]);
+ if ( $li[0].childNodes.length == 1 && $li[0].childNodes[0].nodeType == 3 )
+ target = $li[0].childNodes[0].nodeValue;
+ else
+ target = $li[0].childNodes;
+
+ if ( options && options.copyClassAttr )
+ classNames = $li.attr('class');
+
+ //create item
+ menuItem = new $.MenuItem({src: target, addClass: classNames}, options);
+ menuItems.push(menuItem);
+ //add submenu
+ if ( subItems.length )
+ new $.Menu(menuItem, subItems, options);
+
+ }
+ return menuItems;
+ };
+ return this.each(function()
+ {
+ var ul, m;
+ //get the list element
+ if ( list || (ul = getOneChild(this, 'UL')) )
+ {
+ //if a specific list element is used, clone it, as we probably need it more than once
+ ul = list ? $(list).clone(true)[0] : ul;
+ menuItems = createItems(ul);
+ if ( menuItems.length )
+ {
+ m = new $.Menu(this, menuItems, options);
+ if ( bar )
+ bar.addMenu(m);
+ }
+ $(ul).hide();
+ }
+ });
+ },
+ menuBarFromUL : function(options)
+ {
+ return this.each(function()
+ {
+ var i,
+ lis = getAllChilds(this, 'LI');
+ if ( lis.length )
+ {
+ bar = new $.MenuCollection();
+ for ( i = 0; i < lis.length; i++ )
+ $(lis[i]).menuFromElement(options, null, bar);
+ }
+ });
+ },
+ menu : function(options, items)
+ {
+ return this.each(function()
+ {
+ if ( items && $.isArray(items) )
+ new $.Menu(this, items, options);
+ else
+ {
+ if ( this.nodeName.toUpperCase() == 'UL' )
+ $(this).menuBarFromUL(options);
+ else
+ $(this).menuFromElement(options, items);
+ }
+ });
+ }
+ });
+
+ //faster than using jquery
+ var getOneChild = function(elem, name)
+ {
+ if ( !elem )
+ return null;
+
+ var n = elem.firstChild;
+ for ( ; n; n = n.nextSibling )
+ {
+ if ( n.nodeType == 1 && n.nodeName.toUpperCase() == name )
+ return n;
+ }
+ return null;
+ };
+ //faster than using jquery
+ var getAllChilds = function(elem, name)
+ {
+ if ( !elem )
+ return [];
+
+ var r = [],
+ n = elem.firstChild;
+ for ( ; n; n = n.nextSibling )
+ {
+ if ( n.nodeType == 1 && n.nodeName.toUpperCase() == name )
+ r[r.length] = n;
+ }
+ return r;
+ };
+
+})(jQuery);
+
+ }-*/;
+}
--- /dev/null
+--- query.menu.js 2012-03-17 21:13:29.000000000 +0100
++++ JsMenu.java 2012-03-17 21:04:09.000000000 +0100
+@@ -114,7 +113,7 @@
+ this.openTimer = null;
+
+ this.init();
+- if ( items && items.constructor == Array )
++ if ( items && $.isArray(items) )
+ this.addItems(items);
+ }
+ });
+@@ -132,11 +129,15 @@
+ while ( t.parentNode && t.parentNode != $rootDiv[0] )
+ t = t.parentNode;
+
+- //is the found node one of the visible menu elements?
+- if ( !$(visibleMenus).filter(function(){ return this.$eDIV[0] == t }).length )
+- {
+- $.Menu.closeAll();
+- }
++ // FIXME: why do we need a timeout
++ setTimeout($.Menu.closeAll, 100);
++
++ // FIXME: JsQuery each doesn't work with arrays
++ // if ( !$(visibleMenus).filter(function(){ return this.$eDIV[0] == t }).length )
++ // {
++ // $.Menu.closeAll();
++ // }
++ return true;
+ },
+ checkKey : function(e)
+ {
+@@ -395,7 +394,7 @@
+ this.$eDIV.css({display:'none', visibility: ''}).show();
+
+ //IEs default width: auto is bad! ie6 and ie7 have are producing different errors.. (7 = 5px shadowbox + 2px border)
+- if ( $.browser.msie )
++ if ( 0) //$.browser.msie )
+ this.$eUL.css('width', parseInt($.browser.version) == 6 ? this.$eDIV.width() - 7 : this.$eUL.width());
+
+ if ( this.settings.onOpen )
+@@ -437,7 +438,7 @@
+ }
+
+ //y-pos
+- if ( $.fn.scrollTop )
++ if ($().scrollTop )
+ {
+ wst = $(window).scrollTop();
+ if ( wh < height ) //menu is bigger than the window
+@@ -476,7 +477,7 @@
+ }
+ }
+ //x-pos
+- if ( $.fn.scrollLeft )
++ if ($().scrollLeft )
+ {
+ wsl = $(window).scrollLeft();
+ if ( ww + wsl < posX + width )
+@@ -898,7 +897,7 @@
+ {
+ return this.each(function()
+ {
+- if ( items && items.constructor == Array )
++ if ( items && $.isArray(items) )
+ new $.Menu(this, items, options);
+ else
+ {
+
<script>
onJsQueryLoad = function(){
$('#hello').show().attr("width", true);
- alert($('#hello').text());
+ $('#hello').fadeOut(1000).queue(2000).text("Hello word").fadeIn();
}
if (window.$) {
$(document).ready(onJsQueryLoad);
+++ /dev/null
-<?xml version="1.0" ?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-<title>jQuery menu plugin demo page</title>
-<link rel="stylesheet" type="text/css" href="style.css" />
-<script src="dev.nocache.js" ></script>
-<script type="text/javascript">
-
-// JsQuery will run this function after it is asynchronously loaded
-onJsQueryLoad = function(){
- var options = {minWidth: 120, arrowSrc: 'arrow_right.gif', copyClassAttr: true, onClick: function(e, menuItem){
- alert('you clicked item "' + $(this).text() + '"');
- }};
- $('#menuone').menu(options);
-
- var items = [ {src: 'test', url:'http://www.jquery.com'},
- {src: ''}, // separator
- {src: 'test2', subMenu: [ {src: 'sub 1'},
- {src: 'sub 2', url: 'http://p.sohei.org', target: '_blank'},
- {src: 'sub 3'}]}];
- $('#menutwo').menu(options, items);
- $('#menuthree').menu(options);
- $('#menufive>img').menu(options, '#menufivelist');
-
- //creating a menu without items
- var menu = new $.Menu('#menufour', null, options);
- //adding items to the menu
- menu.addItems([
- new $.MenuItem({src: 'test', url:'http://www.jquery.com'}, options),
- new $.MenuItem({src: ''}) // separator
- ]);
- var itemWithSubmenu = new $.MenuItem({src: 'test2'}, options);
- //creating a menu with items (as child of itemWithSubmenu)
- new $.Menu(itemWithSubmenu, [
- new $.MenuItem({src: 'sub 1'}, options),
- new $.MenuItem({src: 'sub 2', url: 'http://p.sohei.org', target: '_blank'}, options),
- new $.MenuItem({src: 'sub 3'}, options)
- ], options);
- //adding the submenu to the main menu
- menu.addItem(itemWithSubmenu);
-}
-
-// If jsQuery or jQuery was already loaded we use the normal way
-if (window.$) {
- $(document).ready(onJsQueryLoad);
- onJsQueryLoad = null;
-}
-
--->
-</script>
-</head>
-<body>
-<div id="header">
-<div class="title">jQuery Menu plugin demo</div>
-<div class="link"><a href="http://p.sohei.org/jquery-plugins/menu">plugin page</a></div>
-</div>
-
-<div class="exa">
-<h1>Available options:</h1>
- options which affect the menu:
- <ul>
- <li><strong>showDelay</strong> - The number of milliseconds to wait before opening the menu after hovering over the target. Default value: 200</li>
- <li><strong>hideDelay</strong> - The number of milliseconds to wait before closing the menu. Default value: 200</li>
- <li><strong>hoverOpenDelay</strong> - The number of milliseconds to wait before opening the topmost-menu (root) (without clicking it!). Default value: 0 (disabled!)</li>
- <li><strong>offsetTop</strong> - The number of pixels to offset the position of the topmost-menu (root) to the top. Default value: 0</li>
- <li><strong>offsetLeft</strong> - The number of pixels to offset the position of the topmost-menu (root) to the left. Default value: 0</li>
- <li><strong>minWidth</strong> - The minimal number of pixels of the menus width. Default value: 0</li></li>
- <li><strong>onOpen</strong> - Callback function which is triggered when a menu is opened. Default value: null</li>
- <li><strong>onClose</strong> - Callback function which is triggered when a menu is closed. Default value: null</li>
- </ul>
- options which affect the menuItems:
- <ul>
- <li><strong>onClick</strong> - Callback function which is triggered when a menuItem is clicked. The passed parameters are: the event object and the menuItem instance. Default value: null</li>
- <li><strong>arrowSrc</strong> - URL of the image to be used as an arrow indicating a submenu. Default value: null (no arrow image!)</li>
- </ul>
- options which are only used, when building a menu from HTML markup:
- <ul>
- <li><strong>copyClassAttr</strong> - Copies the class attribute of the LI elements to the equivalent menuItems. Default value: false</li>
- </ul>
-</div>
-
-<div class="exa">
-<h1>Example one:</h1>
- <ul>
- <li>create a menubar from an unordered list</li>
- <li>used on an unordered list, the plugin takes its direct <li>-children, which will be the root items (File, Edit...),
- and searches each for an <ul>-child, which holds the menu-items (New window, Save, Print...).</li>
- <li>empty <li>-elements are used as seperators</li>
- </ul>
- <div class="codeheader">JavaScript code:</div>
- <pre name="code" class="JScript">
- var options = {minWidth: 120, arrowSrc: 'arrow_right.gif', onClick: function(e, menuItem){
- alert('you clicked item "' + $(this).text() + '"');
- }};
- $('#menuone').menu(options);
- </pre>
- <div class="codeheader">HTML markup:</div>
- <pre name="code" class="html">
- <!-- note: the plugin doesn't need the classes, they're only used for styling! -->
- <ul id="menuone" class="menu">
- <li class="menumain">File
- <ul><li>New window</li>
- <li></li> <!-- separator -->
- <li>Save...</li>
- <li>Print...</li>
- <li></li> <!-- separator -->
- <li>Exit</li>
- </ul>
- </li>
- <li class="menumain">Edit
- <ul><li>Undo</li>
- <li>Redo</li>
- <li></li> <!-- separator -->
- <li>Cut</li>
- <li>Copy</li>
- <li>Paste<ul><li>All</li><li>Something</li></ul></li>
- <li>Delete</li>
- </ul>
- </li>
- <!-- ...and even more... -->
- </ul>
- </pre>
- <div class="resultheader">Result:</div>
- <div class="result" style="padding:0;">
- <div style="border-bottom: 1px solid #000;background:#eee;">
- <ul id="menuone" class="menu">
- <li class="menumain">File
- <ul><li>New window</li>
- <li></li>
- <li>Save...</li>
- <li>Print...</li>
- <li></li>
- <li>Exit</li>
- </ul>
- </li>
- <li class="menumain">Edit
- <ul><li>Undo</li>
- <li>Redo</li>
- <li></li>
- <li>Cut</li>
- <li>Copy</li>
- <li>Paste<ul><li>All</li><li>Something</li></ul></li>
- <li>Delete</li>
- </ul>
- </li>
- <li class="menumain">Bookmarks
- <ul><li>Bookmark manager</li>
- <li></li>
- <li>some bookmark</li>
- <li>another bookmark</li>
- <li></li>
- <li>Imported bookmarks
- <ul><li>bookmark one</li>
- <li>bookmark two</li>
- <li>bookmark three</li>
- </ul>
- </li>
- </ul>
- </li>
- <li class="menumain" style="float:right;">Help
- <ul><li>Help index</li>
- <li></li>
- <li>About...
- <ul>
- <li>me</li>
- <li>you</li>
- <li>them</li>
- </ul>
- </li>
- </ul>
- </li>
- </ul>
- <div style="clear:both;"></div>
- </div>
- <p>..some content..</p>
- <p>..some content..</p>
- <p>..some content..</p>
- </div>
-</div>
-
-<div class="exa">
-<h1>Example two:</h1>
- <ul>
- <li>create a menu from javascript and open it when clicking on the element with the id "menutwo"</li>
- <li>when a second parameter ist passed (items), the plugin will use it as menu content</li>
- </ul>
- <div class="codeheader">JavaScript code:</div>
- <pre name="code" class="JScript">
- var options = {minWidth: 120, arrowSrc: 'arrow_right.gif'};
- var items = [ {src: 'test', url:'http://www.jquery.com'},
- {src: ''}, /* separator */
- {src: 'test2', subMenu: [ {src: 'sub 1'},
- {src: 'sub 2', url: 'http://p.sohei.org', target: '_blank'},
- {src: 'sub 3'}]}];
- $('#menutwo').menu(options, items);
- </pre>
- <div class="codeheader">HTML markup:</div>
- <pre name="code" class="html">
- <p><span id="menutwo">Menu Button</span></p>
- </pre>
- <div class="resultheader">Result:</div>
- <div class="result">
- <p>..some content..</p>
- <p><span id="menutwo">Menu Button</span></p>
- <p>..some content..</p>
- </div>
-</div>
-
-<div class="exa">
-<h1>Example three:</h1>
- <ul>
- <li>same as example two, but without passing the items as parameter to the plugin</li>
- <li>the plugin looks inside the elment for an unordered list, which holds the menu content</li>
- </ul>
- <div class="codeheader">JavaScript code:</div>
- <pre name="code" class="JScript">
- var options = {minWidth: 120, arrowSrc: 'arrow_right.gif'};
- $('#menuthree').menu(options);
- </pre>
- <div class="codeheader">HTML markup:</div>
- <pre name="code" class="html">
- <div id="menuthree">Menu Button
- <ul>
- <li><a href="http://www.jquery.com">test</a></li>
- <li></li> <!-- separator -->
- <li>test2
- <ul>
- <li>sub 1</li>
- <li><a href="http://p.sohei.org" target="_blank">sub 2</a></li>
- <li>sub 3</li>
- </ul>
- </li>
- </ul>
- </div>
- </pre>
- <div class="resultheader">Result:</div>
- <div class="result">
- <p>..some content..</p>
- <div id="menuthree">Menu Button
- <ul>
- <li><a href="http://www.jquery.com">test</a></li>
- <li></li>
- <li>test2
- <ul>
- <li>sub 1</li>
- <li><a href="http://p.sohei.org" target="_blank">sub 2</a></li>
- <li>sub 3</li>
- </ul>
- </li>
- </ul>
- </div>
- <p>..some content..</p>
- </div>
-</div>
-
-<div class="exa">
-<h1>Example four:</h1>
- <ul>
- <li>same (result) as example two, but this time creating the menu by using the $.Menu and $.MenuItem classes and its methods</li>
- </ul>
- <div class="codeheader">JavaScript code:</div>
- <pre name="code" class="JScript">
- var options = {minWidth: 120, arrowSrc: 'arrow_right.gif'};
-
- //creating a menu without items
- var menu = new $.Menu('#menufour', null, options);
-
- //adding items to the menu
- menu.addItems([
- new $.MenuItem({src: 'test', url:'http://www.jquery.com'}, options),
- new $.MenuItem({src: ''}) /* separator */
- ]);
- var itemWithSubmenu = new $.MenuItem({src: 'test2'}, options);
-
- //creating a menu with items (as child of itemWithSubmenu)
- new $.Menu(itemWithSubmenu, [
- new $.MenuItem({src: 'sub 1'}, options),
- new $.MenuItem({src: 'sub 2', url: 'http://p.sohei.org', target: '_blank'}, options),
- new $.MenuItem({src: 'sub 3'}, options)
- ], options);
-
- //adding the submenu to the main menu
- menu.addItem(itemWithSubmenu);
- </pre>
- <div class="codeheader">HTML markup:</div>
- <pre name="code" class="html">
- <p><span id="menufour">Menu Button</span></p>
- </pre>
- <div class="resultheader">Result:</div>
- <div class="result">
- <p>..some content..</p>
- <p><span id="menufour">Menu Button</span></p>
- <p>..some content..</p>
- </div>
-</div>
-
-<div class="exa">
-<h1>Example five:</h1>
- <ul>
- <li>related to example two, the menu items can also be passed as a jquery selector (selecting an <ul>-element!)</li>
- </ul>
- <div class="codeheader">JavaScript code:</div>
- <pre name="code" class="JScript">
- var options = {minWidth: 120, arrowSrc: 'arrow_right.gif', copyClassAttr: true};
- $('#menufive>img').menu(options, '#menufivelist');
- </pre>
- <div class="codeheader">HTML markup:</div>
- <pre name="code" class="html">
- <p id="menufive">Menu Button <img src="arrowdown.png" /> - Menu Button <img src="arrowdown.png" /> - Menu Button <img src="arrowdown.png" /></p>
-
- <ul id="menufivelist" style="display:none;">
- <li>one</li>
- <li class="red">two</li>
- <li class="blue">three</li>
- <li>four
- <ul>
- <li>four.1
- <ul>
- <li>four.1.1</li>
- <li>four.1.2</li>
- <li>four.1.3</li>
- </ul>
- </li>
- <li>four.2</li>
- <li>four.3</li>
- </ul>
- </li>
- </ul>
- </pre>
- <div class="resultheader">Result:</div>
- <div class="result">
- <p>..some content..</p>
- <p id="menufive">Menu Button <img src="arrowdown.png" /> - Menu Button <img src="arrowdown.png" /> - Menu Button <img src="arrowdown.png" /></p>
- <p>..some content..</p>
- </div>
- <ul id="menufivelist" style="display:none;">
- <li>one</li>
- <li class="red">two</li>
- <li class="blue">three</li>
- <li>four
- <ul>
- <li>four.1
- <ul>
- <li>four.1.1</li>
- <li>four.1.2</li>
- <li>four.1.3</li>
- </ul>
- </li>
- <li>four.2</li>
- <li>four.3</li>
- </ul>
- </li>
- </ul>
-</div>
-
-</body>
-</html>
--- /dev/null
+<?xml version="1.0" ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>jQuery menu plugin demo page</title>
+<link rel="stylesheet" type="text/css" href="style.css" />
+<script src="../../dev.nocache.js" ></script>
+<script type="text/javascript">
+
+// JsQuery will run this function after it is asynchronously loaded
+onJsQueryLoad = function(){
+ var options = {minWidth: 120, arrowSrc: 'arrow_right.gif', copyClassAttr: true, onClick: function(e, menuItem){
+ alert('you clicked item "' + $(this).text() + '"');
+ }};
+ $('#menuone').menu(options);
+
+ var items = [ {src: 'test', url:'http://www.jquery.com'},
+ {src: ''}, // separator
+ {src: 'test2', subMenu: [ {src: 'sub 1'},
+ {src: 'sub 2', url: 'http://p.sohei.org', target: '_blank'},
+ {src: 'sub 3'}]}];
+ $('#menutwo').menu(options, items);
+ $('#menuthree').menu(options);
+ $('#menufive>img').menu(options, '#menufivelist');
+
+ //creating a menu without items
+ var menu = new $.Menu('#menufour', null, options);
+ //adding items to the menu
+ menu.addItems([
+ new $.MenuItem({src: 'test', url:'http://www.jquery.com'}, options),
+ new $.MenuItem({src: ''}) // separator
+ ]);
+ var itemWithSubmenu = new $.MenuItem({src: 'test2'}, options);
+ //creating a menu with items (as child of itemWithSubmenu)
+ new $.Menu(itemWithSubmenu, [
+ new $.MenuItem({src: 'sub 1'}, options),
+ new $.MenuItem({src: 'sub 2', url: 'http://p.sohei.org', target: '_blank'}, options),
+ new $.MenuItem({src: 'sub 3'}, options)
+ ], options);
+ //adding the submenu to the main menu
+ menu.addItem(itemWithSubmenu);
+}
+
+// If jsQuery or jQuery was already loaded we use the normal way
+if (window.$) {
+ $(document).ready(onJsQueryLoad);
+ onJsQueryLoad = null;
+}
+
+-->
+</script>
+</head>
+<body>
+<div id="header">
+<div class="title">jQuery Menu plugin demo</div>
+<div class="link"><a href="http://p.sohei.org/jquery-plugins/menu">plugin page</a></div>
+</div>
+
+<div class="exa">
+<h1>Available options:</h1>
+ options which affect the menu:
+ <ul>
+ <li><strong>showDelay</strong> - The number of milliseconds to wait before opening the menu after hovering over the target. Default value: 200</li>
+ <li><strong>hideDelay</strong> - The number of milliseconds to wait before closing the menu. Default value: 200</li>
+ <li><strong>hoverOpenDelay</strong> - The number of milliseconds to wait before opening the topmost-menu (root) (without clicking it!). Default value: 0 (disabled!)</li>
+ <li><strong>offsetTop</strong> - The number of pixels to offset the position of the topmost-menu (root) to the top. Default value: 0</li>
+ <li><strong>offsetLeft</strong> - The number of pixels to offset the position of the topmost-menu (root) to the left. Default value: 0</li>
+ <li><strong>minWidth</strong> - The minimal number of pixels of the menus width. Default value: 0</li></li>
+ <li><strong>onOpen</strong> - Callback function which is triggered when a menu is opened. Default value: null</li>
+ <li><strong>onClose</strong> - Callback function which is triggered when a menu is closed. Default value: null</li>
+ </ul>
+ options which affect the menuItems:
+ <ul>
+ <li><strong>onClick</strong> - Callback function which is triggered when a menuItem is clicked. The passed parameters are: the event object and the menuItem instance. Default value: null</li>
+ <li><strong>arrowSrc</strong> - URL of the image to be used as an arrow indicating a submenu. Default value: null (no arrow image!)</li>
+ </ul>
+ options which are only used, when building a menu from HTML markup:
+ <ul>
+ <li><strong>copyClassAttr</strong> - Copies the class attribute of the LI elements to the equivalent menuItems. Default value: false</li>
+ </ul>
+</div>
+
+<div class="exa">
+<h1>Example one:</h1>
+ <ul>
+ <li>create a menubar from an unordered list</li>
+ <li>used on an unordered list, the plugin takes its direct <li>-children, which will be the root items (File, Edit...),
+ and searches each for an <ul>-child, which holds the menu-items (New window, Save, Print...).</li>
+ <li>empty <li>-elements are used as seperators</li>
+ </ul>
+ <div class="codeheader">JavaScript code:</div>
+ <pre name="code" class="JScript">
+ var options = {minWidth: 120, arrowSrc: 'arrow_right.gif', onClick: function(e, menuItem){
+ alert('you clicked item "' + $(this).text() + '"');
+ }};
+ $('#menuone').menu(options);
+ </pre>
+ <div class="codeheader">HTML markup:</div>
+ <pre name="code" class="html">
+ <!-- note: the plugin doesn't need the classes, they're only used for styling! -->
+ <ul id="menuone" class="menu">
+ <li class="menumain">File
+ <ul><li>New window</li>
+ <li></li> <!-- separator -->
+ <li>Save...</li>
+ <li>Print...</li>
+ <li></li> <!-- separator -->
+ <li>Exit</li>
+ </ul>
+ </li>
+ <li class="menumain">Edit
+ <ul><li>Undo</li>
+ <li>Redo</li>
+ <li></li> <!-- separator -->
+ <li>Cut</li>
+ <li>Copy</li>
+ <li>Paste<ul><li>All</li><li>Something</li></ul></li>
+ <li>Delete</li>
+ </ul>
+ </li>
+ <!-- ...and even more... -->
+ </ul>
+ </pre>
+ <div class="resultheader">Result:</div>
+ <div class="result" style="padding:0;">
+ <div style="border-bottom: 1px solid #000;background:#eee;">
+ <ul id="menuone" class="menu">
+ <li class="menumain">File
+ <ul><li>New window</li>
+ <li></li>
+ <li>Save...</li>
+ <li>Print...</li>
+ <li></li>
+ <li>Exit</li>
+ </ul>
+ </li>
+ <li class="menumain">Edit
+ <ul><li>Undo</li>
+ <li>Redo</li>
+ <li></li>
+ <li>Cut</li>
+ <li>Copy</li>
+ <li>Paste<ul><li>All</li><li>Something</li></ul></li>
+ <li>Delete</li>
+ </ul>
+ </li>
+ <li class="menumain">Bookmarks
+ <ul><li>Bookmark manager</li>
+ <li></li>
+ <li>some bookmark</li>
+ <li>another bookmark</li>
+ <li></li>
+ <li>Imported bookmarks
+ <ul><li>bookmark one</li>
+ <li>bookmark two</li>
+ <li>bookmark three</li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li class="menumain" style="float:right;">Help
+ <ul><li>Help index</li>
+ <li></li>
+ <li>About...
+ <ul>
+ <li>me</li>
+ <li>you</li>
+ <li>them</li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <div style="clear:both;"></div>
+ </div>
+ <p>..some content..</p>
+ <p>..some content..</p>
+ <p>..some content..</p>
+ </div>
+</div>
+
+<div class="exa">
+<h1>Example two:</h1>
+ <ul>
+ <li>create a menu from javascript and open it when clicking on the element with the id "menutwo"</li>
+ <li>when a second parameter ist passed (items), the plugin will use it as menu content</li>
+ </ul>
+ <div class="codeheader">JavaScript code:</div>
+ <pre name="code" class="JScript">
+ var options = {minWidth: 120, arrowSrc: 'arrow_right.gif'};
+ var items = [ {src: 'test', url:'http://www.jquery.com'},
+ {src: ''}, /* separator */
+ {src: 'test2', subMenu: [ {src: 'sub 1'},
+ {src: 'sub 2', url: 'http://p.sohei.org', target: '_blank'},
+ {src: 'sub 3'}]}];
+ $('#menutwo').menu(options, items);
+ </pre>
+ <div class="codeheader">HTML markup:</div>
+ <pre name="code" class="html">
+ <p><span id="menutwo">Menu Button</span></p>
+ </pre>
+ <div class="resultheader">Result:</div>
+ <div class="result">
+ <p>..some content..</p>
+ <p><span id="menutwo">Menu Button</span></p>
+ <p>..some content..</p>
+ </div>
+</div>
+
+<div class="exa">
+<h1>Example three:</h1>
+ <ul>
+ <li>same as example two, but without passing the items as parameter to the plugin</li>
+ <li>the plugin looks inside the elment for an unordered list, which holds the menu content</li>
+ </ul>
+ <div class="codeheader">JavaScript code:</div>
+ <pre name="code" class="JScript">
+ var options = {minWidth: 120, arrowSrc: 'arrow_right.gif'};
+ $('#menuthree').menu(options);
+ </pre>
+ <div class="codeheader">HTML markup:</div>
+ <pre name="code" class="html">
+ <div id="menuthree">Menu Button
+ <ul>
+ <li><a href="http://www.jquery.com">test</a></li>
+ <li></li> <!-- separator -->
+ <li>test2
+ <ul>
+ <li>sub 1</li>
+ <li><a href="http://p.sohei.org" target="_blank">sub 2</a></li>
+ <li>sub 3</li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ </pre>
+ <div class="resultheader">Result:</div>
+ <div class="result">
+ <p>..some content..</p>
+ <div id="menuthree">Menu Button
+ <ul>
+ <li><a href="http://www.jquery.com">test</a></li>
+ <li></li>
+ <li>test2
+ <ul>
+ <li>sub 1</li>
+ <li><a href="http://p.sohei.org" target="_blank">sub 2</a></li>
+ <li>sub 3</li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ <p>..some content..</p>
+ </div>
+</div>
+
+<div class="exa">
+<h1>Example four:</h1>
+ <ul>
+ <li>same (result) as example two, but this time creating the menu by using the $.Menu and $.MenuItem classes and its methods</li>
+ </ul>
+ <div class="codeheader">JavaScript code:</div>
+ <pre name="code" class="JScript">
+ var options = {minWidth: 120, arrowSrc: 'arrow_right.gif'};
+
+ //creating a menu without items
+ var menu = new $.Menu('#menufour', null, options);
+
+ //adding items to the menu
+ menu.addItems([
+ new $.MenuItem({src: 'test', url:'http://www.jquery.com'}, options),
+ new $.MenuItem({src: ''}) /* separator */
+ ]);
+ var itemWithSubmenu = new $.MenuItem({src: 'test2'}, options);
+
+ //creating a menu with items (as child of itemWithSubmenu)
+ new $.Menu(itemWithSubmenu, [
+ new $.MenuItem({src: 'sub 1'}, options),
+ new $.MenuItem({src: 'sub 2', url: 'http://p.sohei.org', target: '_blank'}, options),
+ new $.MenuItem({src: 'sub 3'}, options)
+ ], options);
+
+ //adding the submenu to the main menu
+ menu.addItem(itemWithSubmenu);
+ </pre>
+ <div class="codeheader">HTML markup:</div>
+ <pre name="code" class="html">
+ <p><span id="menufour">Menu Button</span></p>
+ </pre>
+ <div class="resultheader">Result:</div>
+ <div class="result">
+ <p>..some content..</p>
+ <p><span id="menufour">Menu Button</span></p>
+ <p>..some content..</p>
+ </div>
+</div>
+
+<div class="exa">
+<h1>Example five:</h1>
+ <ul>
+ <li>related to example two, the menu items can also be passed as a jquery selector (selecting an <ul>-element!)</li>
+ </ul>
+ <div class="codeheader">JavaScript code:</div>
+ <pre name="code" class="JScript">
+ var options = {minWidth: 120, arrowSrc: 'arrow_right.gif', copyClassAttr: true};
+ $('#menufive>img').menu(options, '#menufivelist');
+ </pre>
+ <div class="codeheader">HTML markup:</div>
+ <pre name="code" class="html">
+ <p id="menufive">Menu Button <img src="arrowdown.png" /> - Menu Button <img src="arrowdown.png" /> - Menu Button <img src="arrowdown.png" /></p>
+
+ <ul id="menufivelist" style="display:none;">
+ <li>one</li>
+ <li class="red">two</li>
+ <li class="blue">three</li>
+ <li>four
+ <ul>
+ <li>four.1
+ <ul>
+ <li>four.1.1</li>
+ <li>four.1.2</li>
+ <li>four.1.3</li>
+ </ul>
+ </li>
+ <li>four.2</li>
+ <li>four.3</li>
+ </ul>
+ </li>
+ </ul>
+ </pre>
+ <div class="resultheader">Result:</div>
+ <div class="result">
+ <p>..some content..</p>
+ <p id="menufive">Menu Button <img src="arrowdown.png" /> - Menu Button <img src="arrowdown.png" /> - Menu Button <img src="arrowdown.png" /></p>
+ <p>..some content..</p>
+ </div>
+ <ul id="menufivelist" style="display:none;">
+ <li>one</li>
+ <li class="red">two</li>
+ <li class="blue">three</li>
+ <li>four
+ <ul>
+ <li>four.1
+ <ul>
+ <li>four.1.1</li>
+ <li>four.1.2</li>
+ <li>four.1.3</li>
+ </ul>
+ </li>
+ <li>four.2</li>
+ <li>four.3</li>
+ </ul>
+ </li>
+ </ul>
+</div>
+
+</body>
+</html>
--- /dev/null
+body\r
+{\r
+ background-color: #888;\r
+ font-family: verdana, arial;\r
+ margin: 10px;\r
+ font-size: 0.8em;\r
+}\r
+h1\r
+{\r
+ font-size: 1.3em;\r
+}\r
+table\r
+{\r
+ margin: 10px 50px;\r
+ width: 300px;\r
+ border: 1px solid gray;\r
+ border-collapse: collapse;\r
+ border-spacing: 0;\r
+ float: left;\r
+}\r
+thead\r
+{\r
+ background: bisque;\r
+}\r
+tfoot\r
+{\r
+ background: khaki;\r
+ text-align: center;\r
+}\r
+td, th\r
+{\r
+ border: 1px solid gray;\r
+}\r
+pre\r
+{\r
+ background-color: LemonChiffon;\r
+ border: 1px solid gray;\r
+}\r
+#header {\r
+ background-color: #fffff0;\r
+ border: 1px solid #000;\r
+ margin-bottom: 20px;\r
+ padding: 10px;\r
+}\r
+div.title\r
+{\r
+ text-align: center;\r
+ font-size: 1.5em;\r
+ font-weight: bold;\r
+}\r
+div.link\r
+{\r
+ text-align: center;\r
+}\r
+div.clear\r
+{\r
+ clear: both;\r
+}\r
+div.exa\r
+{\r
+ background-color: #fffff0;\r
+ border: 1px solid #000;\r
+ padding: 0 15px;\r
+ margin-bottom: 20px;\r
+}\r
+div.codeheader {\r
+ margin-bottom: -15px;\r
+}\r
+div.resultheader{\r
+ margin-bottom: 5px;\r
+}\r
+div.result{\r
+ background: #fff;\r
+ border: 1px solid #000;\r
+ margin-bottom: 10px;\r
+ padding: 0 10px;\r
+}\r
+html>body div.outerbox\r
+{\r
+ padding: 0 5px 5px 0;\r
+}\r
+html>body div.outerbox div.shadowbox1\r
+{\r
+ position: absolute;\r
+ right: 0;\r
+ bottom: 5px;\r
+ width: 5px;\r
+ height: 100%;\r
+ background: url(myshadow.png) no-repeat right top;\r
+}\r
+html>body div.outerbox div.shadowbox2\r
+{\r
+ position: absolute;\r
+ bottom: 0;\r
+ right: 5px;\r
+ height: 5px;\r
+ width: 100%;\r
+ background: url(myshadow.png) left bottom;\r
+}\r
+html>body div.outerbox div.shadowbox3\r
+{\r
+ position: absolute;\r
+ bottom: 0;\r
+ right: 0;\r
+ height: 5px;\r
+ width: 5px;\r
+ background: url(myshadow.png) no-repeat right bottom;\r
+}\r
+html>body .innerbox\r
+{\r
+ margin: 0;\r
+ display: inherit;\r
+}\r
+\r
+#root-menu-div ul {\r
+ border: 1px solid #000;\r
+}\r
+#root-menu-div li{\r
+ white-space:nowrap;\r
+}\r
+* html #root-menu-div li{\r
+ height: 1.5em; /* fixing ie6 problem */\r
+}\r
+ul.menu,\r
+#root-menu-div ul {\r
+ background-color: #fff;\r
+ list-style: none;\r
+ margin: 0;\r
+ padding: 0;\r
+}\r
+li.menu-separator.active{\r
+ background-color: transparent;\r
+}\r
+li.active {\r
+ background-color: #888;\r
+}\r
+.activetarget{\r
+ background-color: white;\r
+}\r
+\r
+* html div.menu-item {\r
+ display: inline; /* fixes problem in ie6 */\r
+}\r
+\r
+li.menumain {\r
+ float: left;\r
+ padding: 0 10px;\r
+}\r
+div.menu-item {\r
+ padding: 1px 10px 1px 4px;\r
+}\r
+img.menu-item-arrow{\r
+ position: absolute;\r
+ right: 4px;\r
+ top: 8px;\r
+}\r
+li.menu-separator{\r
+ border-bottom: 1px solid #000;\r
+ font-size: 0; /* for ie */\r
+ height: 0;\r
+ line-height: 0; /* for ie */\r
+ margin: 2px 0;\r
+}\r
+li.red {\r
+ color: red;\r
+}\r
+li.blue {\r
+ color: blue;\r
+}\r
+\r
+\r
+\r
+/* syntaxhighlight stuff */\r
+.dp-highlighter\r
+{\r
+ font-family: "Consolas", "Courier New", Courier, mono, serif;\r
+ font-size: 12px;\r
+ background-color: #E7E5DC;\r
+ width: 99%;\r
+ overflow: auto;\r
+ margin: 18px 0 18px 0 !important;\r
+ padding-top: 1px; /* adds a little border on top when controls are hidden */\r
+}\r
+\r
+/* clear styles */\r
+.dp-highlighter ol,\r
+.dp-highlighter ol li,\r
+.dp-highlighter ol li span \r
+{\r
+ margin: 0;\r
+ padding: 0;\r
+ border: none;\r
+}\r
+\r
+.dp-highlighter a,\r
+.dp-highlighter a:hover\r
+{\r
+ background: none;\r
+ border: none;\r
+ padding: 0;\r
+ margin: 0;\r
+}\r
+\r
+.dp-highlighter .bar\r
+{\r
+ padding-left: 45px;\r
+}\r
+\r
+.dp-highlighter.collapsed .bar,\r
+.dp-highlighter.nogutter .bar\r
+{\r
+ padding-left: 0px;\r
+}\r
+\r
+.dp-highlighter ol\r
+{\r
+ list-style: decimal; /* for ie */\r
+ background-color: #fff;\r
+ margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */\r
+ padding: 0px;\r
+ color: #5C5C5C;\r
+}\r
+\r
+.dp-highlighter.nogutter ol,\r
+.dp-highlighter.nogutter ol li\r
+{\r
+ list-style: none !important;\r
+ margin-left: 0px !important;\r
+}\r
+\r
+.dp-highlighter ol li,\r
+.dp-highlighter .columns div\r
+{\r
+ list-style: decimal-leading-zero; /* better look for others, override cascade from OL */\r
+ list-style-position: outside !important;\r
+ border-left: 3px solid #6CE26C;\r
+ background-color: #F8F8F8;\r
+ color: #5C5C5C;\r
+ padding: 0 3px 0 10px !important;\r
+ margin: 0 !important;\r
+ line-height: 14px;\r
+}\r
+\r
+.dp-highlighter.nogutter ol li,\r
+.dp-highlighter.nogutter .columns div\r
+{\r
+ border: 0;\r
+}\r
+\r
+.dp-highlighter .columns\r
+{\r
+ background-color: #F8F8F8;\r
+ color: gray;\r
+ overflow: hidden;\r
+ width: 100%;\r
+}\r
+\r
+.dp-highlighter .columns div\r
+{\r
+ padding-bottom: 5px;\r
+}\r
+\r
+.dp-highlighter ol li.alt\r
+{\r
+ background-color: #FFF;\r
+ color: inherit;\r
+}\r
+\r
+.dp-highlighter ol li span\r
+{\r
+ color: black;\r
+ background-color: inherit;\r
+}\r
+\r
+/* Adjust some properties when collapsed */\r
+\r
+.dp-highlighter.collapsed ol\r
+{\r
+ margin: 0px;\r
+}\r
+\r
+.dp-highlighter.collapsed ol li\r
+{\r
+ display: none;\r
+}\r
+\r
+/* Additional modifications when in print-view */\r
+\r
+.dp-highlighter.printing\r
+{\r
+ border: none;\r
+}\r
+\r
+.dp-highlighter.printing .tools\r
+{\r
+ display: none !important;\r
+}\r
+\r
+.dp-highlighter.printing li\r
+{\r
+ display: list-item !important;\r
+}\r
+\r
+/* Styles for the tools */\r
+\r
+.dp-highlighter .tools\r
+{\r
+ padding: 3px 8px 3px 10px;\r
+ font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;\r
+ color: silver;\r
+ background-color: #f8f8f8;\r
+ padding-bottom: 10px;\r
+ border-left: 3px solid #6CE26C;\r
+}\r
+\r
+.dp-highlighter.nogutter .tools\r
+{\r
+ border-left: 0;\r
+}\r
+\r
+.dp-highlighter.collapsed .tools\r
+{\r
+ border-bottom: 0;\r
+}\r
+\r
+.dp-highlighter .tools a\r
+{\r
+ font-size: 9px;\r
+ color: #a0a0a0;\r
+ background-color: inherit;\r
+ text-decoration: none;\r
+ margin-right: 10px;\r
+}\r
+\r
+.dp-highlighter .tools a:hover\r
+{\r
+ color: red;\r
+ background-color: inherit;\r
+ text-decoration: underline;\r
+}\r
+\r
+/* About dialog styles */\r
+\r
+.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }\r
+.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }\r
+.dp-about td { padding: 10px; vertical-align: top; }\r
+.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }\r
+.dp-about .title { color: red; background-color: inherit; font-weight: bold; }\r
+.dp-about .para { margin: 0 0 4px 0; }\r
+.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }\r
+.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }\r
+\r
+/* Language specific styles */\r
+\r
+.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }\r
+.dp-highlighter .string { color: blue; background-color: inherit; }\r
+.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }\r
+.dp-highlighter .preprocessor { color: gray; background-color: inherit; }\r
+++ /dev/null
-body\r
-{\r
- background-color: #888;\r
- font-family: verdana, arial;\r
- margin: 10px;\r
- font-size: 0.8em;\r
-}\r
-h1\r
-{\r
- font-size: 1.3em;\r
-}\r
-table\r
-{\r
- margin: 10px 50px;\r
- width: 300px;\r
- border: 1px solid gray;\r
- border-collapse: collapse;\r
- border-spacing: 0;\r
- float: left;\r
-}\r
-thead\r
-{\r
- background: bisque;\r
-}\r
-tfoot\r
-{\r
- background: khaki;\r
- text-align: center;\r
-}\r
-td, th\r
-{\r
- border: 1px solid gray;\r
-}\r
-pre\r
-{\r
- background-color: LemonChiffon;\r
- border: 1px solid gray;\r
-}\r
-#header {\r
- background-color: #fffff0;\r
- border: 1px solid #000;\r
- margin-bottom: 20px;\r
- padding: 10px;\r
-}\r
-div.title\r
-{\r
- text-align: center;\r
- font-size: 1.5em;\r
- font-weight: bold;\r
-}\r
-div.link\r
-{\r
- text-align: center;\r
-}\r
-div.clear\r
-{\r
- clear: both;\r
-}\r
-div.exa\r
-{\r
- background-color: #fffff0;\r
- border: 1px solid #000;\r
- padding: 0 15px;\r
- margin-bottom: 20px;\r
-}\r
-div.codeheader {\r
- margin-bottom: -15px;\r
-}\r
-div.resultheader{\r
- margin-bottom: 5px;\r
-}\r
-div.result{\r
- background: #fff;\r
- border: 1px solid #000;\r
- margin-bottom: 10px;\r
- padding: 0 10px;\r
-}\r
-html>body div.outerbox\r
-{\r
- padding: 0 5px 5px 0;\r
-}\r
-html>body div.outerbox div.shadowbox1\r
-{\r
- position: absolute;\r
- right: 0;\r
- bottom: 5px;\r
- width: 5px;\r
- height: 100%;\r
- background: url(myshadow.png) no-repeat right top;\r
-}\r
-html>body div.outerbox div.shadowbox2\r
-{\r
- position: absolute;\r
- bottom: 0;\r
- right: 5px;\r
- height: 5px;\r
- width: 100%;\r
- background: url(myshadow.png) left bottom;\r
-}\r
-html>body div.outerbox div.shadowbox3\r
-{\r
- position: absolute;\r
- bottom: 0;\r
- right: 0;\r
- height: 5px;\r
- width: 5px;\r
- background: url(myshadow.png) no-repeat right bottom;\r
-}\r
-html>body .innerbox\r
-{\r
- margin: 0;\r
- display: inherit;\r
-}\r
-\r
-#root-menu-div ul {\r
- border: 1px solid #000;\r
-}\r
-#root-menu-div li{\r
- white-space:nowrap;\r
-}\r
-* html #root-menu-div li{\r
- height: 1.5em; /* fixing ie6 problem */\r
-}\r
-ul.menu,\r
-#root-menu-div ul {\r
- background-color: #fff;\r
- list-style: none;\r
- margin: 0;\r
- padding: 0;\r
-}\r
-li.menu-separator.active{\r
- background-color: transparent;\r
-}\r
-li.active {\r
- background-color: #888;\r
-}\r
-.activetarget{\r
- background-color: white;\r
-}\r
-\r
-* html div.menu-item {\r
- display: inline; /* fixes problem in ie6 */\r
-}\r
-\r
-li.menumain {\r
- float: left;\r
- padding: 0 10px;\r
-}\r
-div.menu-item {\r
- padding: 1px 10px 1px 4px;\r
-}\r
-img.menu-item-arrow{\r
- position: absolute;\r
- right: 4px;\r
- top: 8px;\r
-}\r
-li.menu-separator{\r
- border-bottom: 1px solid #000;\r
- font-size: 0; /* for ie */\r
- height: 0;\r
- line-height: 0; /* for ie */\r
- margin: 2px 0;\r
-}\r
-li.red {\r
- color: red;\r
-}\r
-li.blue {\r
- color: blue;\r
-}\r
-\r
-\r
-\r
-/* syntaxhighlight stuff */\r
-.dp-highlighter\r
-{\r
- font-family: "Consolas", "Courier New", Courier, mono, serif;\r
- font-size: 12px;\r
- background-color: #E7E5DC;\r
- width: 99%;\r
- overflow: auto;\r
- margin: 18px 0 18px 0 !important;\r
- padding-top: 1px; /* adds a little border on top when controls are hidden */\r
-}\r
-\r
-/* clear styles */\r
-.dp-highlighter ol,\r
-.dp-highlighter ol li,\r
-.dp-highlighter ol li span \r
-{\r
- margin: 0;\r
- padding: 0;\r
- border: none;\r
-}\r
-\r
-.dp-highlighter a,\r
-.dp-highlighter a:hover\r
-{\r
- background: none;\r
- border: none;\r
- padding: 0;\r
- margin: 0;\r
-}\r
-\r
-.dp-highlighter .bar\r
-{\r
- padding-left: 45px;\r
-}\r
-\r
-.dp-highlighter.collapsed .bar,\r
-.dp-highlighter.nogutter .bar\r
-{\r
- padding-left: 0px;\r
-}\r
-\r
-.dp-highlighter ol\r
-{\r
- list-style: decimal; /* for ie */\r
- background-color: #fff;\r
- margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */\r
- padding: 0px;\r
- color: #5C5C5C;\r
-}\r
-\r
-.dp-highlighter.nogutter ol,\r
-.dp-highlighter.nogutter ol li\r
-{\r
- list-style: none !important;\r
- margin-left: 0px !important;\r
-}\r
-\r
-.dp-highlighter ol li,\r
-.dp-highlighter .columns div\r
-{\r
- list-style: decimal-leading-zero; /* better look for others, override cascade from OL */\r
- list-style-position: outside !important;\r
- border-left: 3px solid #6CE26C;\r
- background-color: #F8F8F8;\r
- color: #5C5C5C;\r
- padding: 0 3px 0 10px !important;\r
- margin: 0 !important;\r
- line-height: 14px;\r
-}\r
-\r
-.dp-highlighter.nogutter ol li,\r
-.dp-highlighter.nogutter .columns div\r
-{\r
- border: 0;\r
-}\r
-\r
-.dp-highlighter .columns\r
-{\r
- background-color: #F8F8F8;\r
- color: gray;\r
- overflow: hidden;\r
- width: 100%;\r
-}\r
-\r
-.dp-highlighter .columns div\r
-{\r
- padding-bottom: 5px;\r
-}\r
-\r
-.dp-highlighter ol li.alt\r
-{\r
- background-color: #FFF;\r
- color: inherit;\r
-}\r
-\r
-.dp-highlighter ol li span\r
-{\r
- color: black;\r
- background-color: inherit;\r
-}\r
-\r
-/* Adjust some properties when collapsed */\r
-\r
-.dp-highlighter.collapsed ol\r
-{\r
- margin: 0px;\r
-}\r
-\r
-.dp-highlighter.collapsed ol li\r
-{\r
- display: none;\r
-}\r
-\r
-/* Additional modifications when in print-view */\r
-\r
-.dp-highlighter.printing\r
-{\r
- border: none;\r
-}\r
-\r
-.dp-highlighter.printing .tools\r
-{\r
- display: none !important;\r
-}\r
-\r
-.dp-highlighter.printing li\r
-{\r
- display: list-item !important;\r
-}\r
-\r
-/* Styles for the tools */\r
-\r
-.dp-highlighter .tools\r
-{\r
- padding: 3px 8px 3px 10px;\r
- font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;\r
- color: silver;\r
- background-color: #f8f8f8;\r
- padding-bottom: 10px;\r
- border-left: 3px solid #6CE26C;\r
-}\r
-\r
-.dp-highlighter.nogutter .tools\r
-{\r
- border-left: 0;\r
-}\r
-\r
-.dp-highlighter.collapsed .tools\r
-{\r
- border-bottom: 0;\r
-}\r
-\r
-.dp-highlighter .tools a\r
-{\r
- font-size: 9px;\r
- color: #a0a0a0;\r
- background-color: inherit;\r
- text-decoration: none;\r
- margin-right: 10px;\r
-}\r
-\r
-.dp-highlighter .tools a:hover\r
-{\r
- color: red;\r
- background-color: inherit;\r
- text-decoration: underline;\r
-}\r
-\r
-/* About dialog styles */\r
-\r
-.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }\r
-.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }\r
-.dp-about td { padding: 10px; vertical-align: top; }\r
-.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }\r
-.dp-about .title { color: red; background-color: inherit; font-weight: bold; }\r
-.dp-about .para { margin: 0 0 4px 0; }\r
-.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }\r
-.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }\r
-\r
-/* Language specific styles */\r
-\r
-.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }\r
-.dp-highlighter .string { color: blue; background-color: inherit; }\r
-.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }\r
-.dp-highlighter .preprocessor { color: gray; background-color: inherit; }\r
</script>
<ul>
<li><a href="javascript:goTo('dev/JsQuery.html')">JsQuery.html</a></li>
+ <li><a href="javascript:goTo('dev/plugins/menu/demo.html')">jquery.menu.html</a></li>
</ul>
</body>
</html>
projects / gwtquery.git / commitdiff
