diff options
Diffstat (limited to 'jsquery/src/main/java/gwtquery/jsplugins/menu/public/demo.html')
| -rw-r--r-- | jsquery/src/main/java/gwtquery/jsplugins/menu/public/demo.html | 358 |
1 files changed, 358 insertions, 0 deletions
diff --git a/jsquery/src/main/java/gwtquery/jsplugins/menu/public/demo.html b/jsquery/src/main/java/gwtquery/jsplugins/menu/public/demo.html new file mode 100644 index 00000000..1e55c326 --- /dev/null +++ b/jsquery/src/main/java/gwtquery/jsplugins/menu/public/demo.html @@ -0,0 +1,358 @@ +<?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="jsmenu.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> |