<parent>
<groupId>com.googlecode.gwtquery</groupId>
<artifactId>gwtquery-project</artifactId>
- <version>1.1.0-SNAPSHOT</version>
+ <version>1.1.1-SNAPSHOT</version>
</parent>
<name>JsQuery</name>
<artifactId>jsquery</artifactId>
<packaging>war</packaging>
+
+ <properties>
+ <gwtversion>2.4.0</gwtversion>
+ <gwtmaven>2.4.0</gwtmaven>
+ </properties>
+
+
<dependencies>
<dependency>
<groupId>${groupId}</groupId>
<dependency>
<groupId>org.timepedia.exporter</groupId>
<artifactId>gwtexporter</artifactId>
- <version>2.3.1-SNAPSHOT</version>
+ <version>2.4.0-SNAPSHOT</version>
<scope>provided</scope>
</dependency>
<dependency>
<version>${gwtmaven}</version>
<configuration>
<logLevel>${gwt.loglevel}</logLevel>
- <style>${gwt.outputstyle}</style>
+ <style>OBF</style>
<optimizationLevel>9</optimizationLevel>
<gwtVersion>${gwtversion}</gwtVersion>
<compileReport>true</compileReport>
<downloadSources>true</downloadSources>
<downloadJavadocs>true</downloadJavadocs>
<additionalBuildcommands>
- <buildCommand>
- <name>
- com.google.gwt.eclipse.core.gwtProjectValidator
- </name>
- </buildCommand>
+ <buildCommand>com.google.gwt.eclipse.core.gwtProjectValidator</buildCommand>
+ <buildcommand>org.eclipse.wst.common.modulecore.ComponentStructuralBuilder</buildcommand>
+ <buildcommand>org.eclipse.jdt.core.javabuilder</buildcommand>
+ <buildcommand>org.eclipse.wst.common.modulecore.ComponentStructuralBuilderDependencyResolver</buildcommand>
</additionalBuildcommands>
<additionalProjectnatures>
- <projectnature>com.google.gwt.eclipse.core.gwtNature
- </projectnature>
+ <projectnature>com.google.gwt.eclipse.core.gwtNature</projectnature>
+ <projectnature>org.eclipse.jdt.core.javanature</projectnature>
+ <projectnature>org.eclipse.wst.common.modulecore.ModuleCoreNature</projectnature>
</additionalProjectnatures>
- </configuration>
+ </configuration>
+ </plugin>
+ <plugin>
+ <artifactId>maven-resources-plugin</artifactId>
+ <version>2.5</version>
+ <executions>
+ <execution>
+ <id>copy-resources</id>
+ <phase>generate-sources</phase>
+ <goals>
+ <goal>copy-resources</goal>
+ </goals>
+ <configuration>
+ <outputDirectory>${project.build.directory}/${project.build.finalName}</outputDirectory>
+ <resources>
+ <resource>
+ <directory>src/main/webapp</directory>
+ <filtering>true</filtering>
+ </resource>
+ </resources>
+ </configuration>
+ </execution>
+ </executions>
</plugin>
</plugins>
+ <outputDirectory>${project.build.directory}/${project.build.finalName}/WEB-INF/classes</outputDirectory>
</build>
</project>
border: none;
}
</style>
- <script language="javascript" src="../target/jsquery-1.1.0-SNAPSHOT/jsquery/jsquery.nocache.js" ></script>
+ <!-- <script language="javascript" src="../target/jsquery-1.1.1-SNAPSHOT/jsquery/jsquery.nocache.js" ></script> -->
+ <script language="javascript" src="../../api/jsquery.nocache.js" ></script>
</head>
<body>
import org.timepedia.exporter.client.Export;
import org.timepedia.exporter.client.ExportClosure;
import org.timepedia.exporter.client.ExportInstanceMethod;
+import org.timepedia.exporter.client.ExportJsInitMethod;
import org.timepedia.exporter.client.ExportOverlay;
import org.timepedia.exporter.client.ExportPackage;
import org.timepedia.exporter.client.Exportable;
import com.google.gwt.query.client.plugins.effects.PropertiesAnimation;
import com.google.gwt.query.client.plugins.effects.PropertiesAnimation.Easing;
import com.google.gwt.user.client.Event;
+import static com.google.gwt.user.client.Window.*;
@ExportPackage("jsQuery")
}-*/;
@Export("$wnd.$")
- public static GQuery StaticDollar(Object o) {
+ public static GQuery staticDollar(Object o) {
if (o instanceof String) {
+// System.out.println("R A");
return GQuery.$((String)o);
} else if (isFunction(o)) {
+// System.out.println("R B");
runFunction(o);
} else if (o instanceof JavaScriptObject) {
- return GQuery.$((JavaScriptObject)o);
+ GQuery r = GQuery.$((JavaScriptObject)o);
+// System.out.println("R C " + r);
+ return r;
}
+// System.out.println("R D");
return GQuery.$();
}
@Export("$wnd.$")
- public static GQuery StaticDollar(String s, Element ctx) {
+ public static GQuery staticDollar(String s, Element ctx) {
return GQuery.$(s, ctx);
}
+
+ @Export("$wnd.$.ready")
+ public static void ready(Function f) {
+ alert("ready");
+ }
+
@Export("$wnd.$.inArray")
public static int inArray(Object o, Object a) {
if (o instanceof JavaScriptObject && JsUtils.isElement((JavaScriptObject)o)) {
- return StaticDollar(a).index((Element)o);
+ return staticDollar(a).index((Element)o);
} else if (a instanceof JavaScriptObject && JsUtils.isArray((JavaScriptObject)a)) {
return ((JsCache)a).indexOf(o);
}
public GQuery find(String... filters) {return null;}
public GQuery first() {return null;}
public GQuery focus(Function... f) {return null;}
+ @ExportJsInitMethod
public NodeList<Element> get() {return null;}
public Element get(int i) {return null;}
public Node getContext() {return null;}
public GQuery wrapInner(Element elem) {return null;}
public GQuery wrapInner(GQuery query) {return null;}
public GQuery wrapInner(String html) {return null;}
+
+ @ExportInstanceMethod
+ public static GQuery ready(Function f) {
+ alert("ready ....");
+ return null;
+ }
+
}
--- /dev/null
+package gwtquery.jsquery.client;
+
+public abstract class JsMenu {
+ public static native void loadPlugin() /*-{
+
+(function($)
+{
+ var window = $wnd;
+ var document = $doc;
+ 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 && items.constructor == Array )
+ 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;
+
+ //is the found node one of the visible menu elements?
+ if ( !$(visibleMenus).filter(function(){ return this.$eDIV[0] == t }).length )
+ {
+ $.Menu.closeAll();
+ }
+ },
+ 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 (0) //$.fn.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 (0) //$.fn.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 && items.constructor == Array )
+ 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;
+ };
+
+})($wnd.$);
+
+ }-*/;
+}
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
+import com.google.gwt.core.client.Scheduler;
+import com.google.gwt.user.client.Timer;
+import static com.google.gwt.user.client.Window.*;
public class JsQuery implements EntryPoint {
GWT.create(JOffset.class);
GWT.create(JEasing.class);
GWT.create(JQ.class);
+// new JQExporterImpl();
GWT.create(Dollar.class);
- onJsQueryLoad();
+// new DollarExporterImpl();
+// System.out.println(testExtend("kaka"));
+ JsMenu.loadPlugin();
+ myJs();
+// onJsQueryLoad();
}
+
+ private native static void myJs() /*-{
+ try {
+ $ = $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);
+ $('#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);
+
+
+ } catch(e){alert(e);}
+ }-*/;
+
+ private native static String testExtend(String s) /*-{
+ $wnd.$.extend({hola: function(){return s;}});
+ return $wnd.$('*').hola();
+ }-*/;
+
private native static void onJsQueryLoad() /*-{
$wnd.onJsQueryLoad && $wnd.onJsQueryLoad();
--- /dev/null
+--- mplugins/jquery.menu.js 2012-03-13 00:35:46.000000000 +0100
++++ jsquery/src/main/java/gwtquery/jsquery/client/JsMenu.java 2012-03-13 00:40:53.000000000 +0100
+@@ -1,5 +1,12 @@
++package gwtquery.jsquery.client;
++
++public abstract class JsMenu {
++ public static native void loadPlugin() /*-{
++
+ (function($)\r
+ {\r
++ var window = $wnd;
++ var document = $doc;
+ var menus = [], //list of all menus\r
+ visibleMenus = [], //list of all visible menus\r
+ activeMenu = activeItem = null,\r
+@@ -221,9 +225,7 @@
+ $.extend(defaults, d);\r
+ },\r
+ prototype : {\r
+- /**\r
+- * create / initialize new menu\r
+- */\r
++
+ init : function()\r
+ {\r
+ var self = this;\r
+@@ -379,7 +381,7 @@
+ this.$eDIV.css({display:'none', visibility: ''}).show();\r
+ \r
+ //IEs default width: auto is bad! ie6 and ie7 have are producing different errors.. (7 = 5px shadowbox + 2px border)\r
+- if ( $.browser.msie )\r
++ if ( 0) //$.browser.msie )
+ this.$eUL.css('width', parseInt($.browser.version) == 6 ? this.$eDIV.width() - 7 : this.$eUL.width());\r
+ \r
+ if ( this.settings.onOpen )\r
+@@ -422,7 +424,7 @@
+ }\r
+ \r
+ //y-pos\r
+- if ( $.fn.scrollTop )\r
++ if (0) //$.fn.scrollTop )
+ {\r
+ wst = $(window).scrollTop();\r
+ if ( wh < height ) //menu is bigger than the window\r
+@@ -461,7 +463,7 @@
+ }\r
+ }\r
+ //x-pos\r
+- if ( $.fn.scrollLeft )\r
++ if (0) //$.fn.scrollLeft )
+ {\r
+ wsl = $(window).scrollLeft();\r
+ if ( ww + wsl < posX + width )\r
+@@ -925,4 +926,7 @@
+ return r;\r
+ };\r
+ \r
+-})(jQuery);\r
++})($wnd.$);
++
++ }-*/;
++}
+<!doctype html>
<html>
<head>
<title>JsQuery</title>
-<script language="javascript"
- src="dev.nocache.js" ></script>
+<script src="dev.nocache.js" ></script>
</head>
<body>
<div id='hello' style='display: none'>Hello</div>
--- /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 type="text/javascript" src="http://p.sohei.org/wp-content/jquery/jquery-1.2.2.pack.js"></script> -->\r
+<!-- <script type="text/javascript" src="jquery.dimensions.min.js"></script> -->
+<!-- <script type="text/javascript" src="../jquery.menu.js"></script> -->
+<script src="dev.nocache.js" ></script>
+<!--
+<script type="text/javascript" src="http://p.sohei.org/wp-content/plugins/syntaxhighlighter-plus/files/shCore.js"></script>\r
+<script type="text/javascript" src="http://p.sohei.org/wp-content/plugins/syntaxhighlighter-plus/files/shBrushXml.js"></script>\r
+<script type="text/javascript" src="http://p.sohei.org/wp-content/plugins/syntaxhighlighter-plus/files/shBrushJScript.js"></script>\r
+-->
+<script type="text/javascript">
+<!--
+onJsQueryLoad = function(){
+$(document).ready(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);
+
+ //highlight stuff..
+ dp.SyntaxHighlighter.ClipboardSwf = 'http://p.sohei.org/wp-content/plugins/syntaxhighlighter-plus/files/clipboard.swf';\r
+ dp.SyntaxHighlighter.HighlightAll('code');
+});
+}
+-->
+</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
}
</script>
<ul>
- <li><a href="javascript:goTo('jsquery/JsQuery.html')">JsQuery.html</a></li>
+ <li><a href="javascript:goTo('dev/JsQuery.html')">JsQuery.html</a></li>
</ul>
</body>
</html>
projects / gwtquery.git / commitdiff
