Revision: 3205
Author: paul.bakaus
Date: Fri Sep 11 07:49:04 2009
Log: dev: moved existing menu code into new branch, styles and positioning
broken at this point
http://code.google.com/p/jquery-ui/source/detail?r=3205
Added:
/branches/dev/menu/demos/menu
/branches/dev/menu/demos/menu/default.html
/branches/dev/menu/demos/menu/index.html
/branches/dev/menu/themes/base/ui.menu.css
/branches/dev/menu/ui/ui.menu.js
Modified:
/branches/dev/menu/demos/index.html
/branches/dev/menu/themes/base/ui.base.css
=======================================
--- /dev/null
+++ /branches/dev/menu/demos/menu/default.html Fri Sep 11 07:49:04 2009
@@ -0,0 +1,231 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Draggable - Default functionality</title>
+ <link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.position.js"></script>
+ <script type="text/javascript" src="../../ui/ui.menu.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <style type="text/css">
+ #draggable { width: 150px; height: 150px; padding: 0.5em; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+
+ $('#menu1').menu({
+ mode: 'static',
+ type: 'drilldown',
+ //selectCategories: true,
+ choose: function(event, ui) {
+ console.log('Selected item ', ui.item);
+ },
+ browse: function(event, ui) {
+ //console.log('Browsing item ', ui.item);
+ }
+ });
+
+ $('button').menu({
+ items: '#items2',
+ mode: 'dropdown',
+ flyoutDelay: 300,
+ choose: function(event, ui) {
+ console.log('Selected item ', ui.item);
+ },
+ browse: function(event, ui) {
+ //console.log('Browsing item ', ui.item);
+ },
+ open: function(event, ui) {
+
+ //$(this).menu('add', '<li><a href="#">Test Item 1</a></li>', '>
li:eq(5)', 'after');
+ $(this).menu('add', '<li><a href="#">Test Item 2</a><ul><li><a
href="#">Test Item Sub</a></li></ul></li>', ' > li:eq(0)', 'append');
+
+ //console.log('Opened menu');
+ },
+ close: function(event, ui) {
+ //console.log('Closed menu');
+ }
+ });
+
+ $('#menu2').menu({
+ items: {
+ 'Menu Item 1': {
+ items: {
+ 'Sub Item 1': {},
+ 'Sub Item 2': {
+ items: function(ready, ui) {
+
+ window.setTimeout(function() {
+ ready({
+ 'Ajax Item 1': {},
+ 'Ajax Item 2': {}
+ });
+ }, 1000);
+
+
+
+ },
+ cache: false
+ }
+ },
+ icon: null,
+ choose: function() {
+ alert(1);
+ }
+ },
+ 'Menu Item 2': {},
+ 'Menu Item 3': {},
+ 'Menu Item 4': {}
+ },
+ mode: 'context',
+ //appendTo: 'element',
+ //direction: 'left above',
+ choose: function(event, ui) {
+ console.log('Selected item ', ui.item);
+ },
+ browse: function(event, ui) {
+ //console.log('Browsing item ', ui.item);
+ },
+ open: function(event, ui) {
+ //console.log('Opened menu');
+ },
+ close: function(event, ui) {
+ //console.log('Closed menu');
+ }
+ });
+
+
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+ <div id="menu1">
+
+ <ul>
+ <li><a href="#">Celebrity news</a></li>
+ <li><a href="#">Gossip</a></li>
+ <li><a href="#">Movies</a></li>
+ <li><a href="#">Music</a>
+ <ul>
+ <li><a href="#">Alternative</a></li>
+ <li><a href="#">Country</a></li>
+ <li><a href="#">Dance</a></li>
+ <li><a href="#">Electronica</a></li>
+ <li><a href="#">Metal</a></li>
+ <li><a href="#">Pop</a></li>
+ <li><a href="#">Rock</a>
+ <ul>
+ <li><a href="#">Bands</a>
+ <ul>
+ <li><a href="#">Dokken</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Fan Clubs</a></li>
+ <li><a href="#">Songs</a></li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li><a href="#">Slide shows</a></li>
+ <li><a href="#">Red carpet</a></li>
+ </ul>
+
+ </div>
+
+ <button>Open menu!</button>
+
+ <ul id='items2'>
+ <li><a href="#">Celebrity news</a></li>
+ <li><a href="#">Gossip</a></li>
+ <li><a href="#">Movies</a></li>
+ <li><a href="#">Music</a>
+ <ul>
+ <li><a href="#">Alternative</a></li>
+ <li><a href="#">Country</a></li>
+ <li><a href="#">Dance</a></li>
+ <li><a href="#">Electronica</a></li>
+ <li><a href="#">Metal</a></li>
+ <li><a href="#">Pop</a></li>
+ <li><a href="#">Rock</a>
+ <ul>
+ <li><a href="#">Bands</a>
+ <ul>
+ <li><a href="#">Dokken</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Fan Clubs</a></li>
+ <li><a href="#">Songs</a></li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li><a href="#">Slide shows</a></li>
+ <li><a href="#">Red carpet</a></li>
+ </ul>
+
+ <div id='menu2' style='height: 400px; width: 400px; background: green;
overflow: auto; position: relative;'>
+ <p class='test'>Test!
+ </div>
+
+ <ul id='items3'>
+ <li><a href="#">Celebrity news</a></li>
+ <li><a href="#">Gossip</a></li>
+ <li><a href="#">Movies</a></li>
+ <li><a href="#">Music</a>
+ <ul>
+ <li><a href="#">Alternative</a></li>
+ <li><a href="#">Country</a></li>
+ <li><a href="#">Dance</a></li>
+ <li><a href="#">Electronica</a></li>
+ <li><a href="#">Metal</a></li>
+ <li><a href="#">Pop</a></li>
+ <li><a href="#">Rock</a>
+ <ul>
+ <li><a href="#">Bands</a>
+ <ul>
+ <li><a href="#">Dokken</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Fan Clubs</a></li>
+ <li><a href="#">Songs</a></li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li><a href="#">Slide shows</a></li>
+ <li><a href="#">Red carpet</a></li>
+ </ul>
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
+
+
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+
+description here
+
+
+</div><!-- End demo-description -->
+
+</body>
+</html>
=======================================
--- /dev/null
+++ /branches/dev/menu/demos/menu/index.html Fri Sep 11 07:49:04 2009
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Menu Demos</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+</head>
+<body>
+
+<div class="demos-nav">
+ <h4>Examples</h4>
+ <ul>
+ <li class="demo-config-on"><a href="default.html">Default
functionality</a></li>
+ </ul>
+</div>
+
+</body>
+</html>
=======================================
--- /dev/null
+++ /branches/dev/menu/themes/base/ui.menu.css Fri Sep 11 07:49:04 2009
@@ -0,0 +1,105 @@
+/* Styles for jQuery menu widget
+Author: Maggie Wachs, maggie@filamentgroup.com
+Date: September 2008
+*/
+
+
+/* REQUIRED STYLES - the menus will only render correctly with these rules
*/
+
+.ui-menu-container { position: absolute; top:0; left:-999px; }
+.ui-menu, .ui-menu ul { list-style-type:none; visibility:hidden; overflow:
hidden; padding: 0; margin:0; }
+.ui-menu { position:relative; }
+.ui-menu ul { position:absolute; top:0; left:0; }
+
+.ui-menu li { clear:both; float:left; width:100% !important; }
+.ui-menu li li { font-size:1em; } /* inner li font size must be reset so
that they don't blow up */
+
+.ui-menu.ui-menu-flyout, .ui-menu.ui-menu-flyout ul { overflow: visible; }
+
+
+/* REQIRED LINK STYLES: links are "display:block" by default; if the menu
options are split into
+ selectable node links and 'next' links, the script floats the node links
left and floats the 'next' links to the right */
+
+.ui-menu a:link,
+.ui-menu a:visited,
+.ui-menu a:hover,
+.ui-menu a:active { display:block; padding:.3em .6em; line-height:1.2em;
text-decoration:none; outline: 0 !important; }
+
+.ui-menu a.ui-state-hover:link,
+.ui-menu a.ui-state-hover:visited,
+.ui-menu a.ui-state-hover:hover,
+.ui-menu a.ui-state-hover:active { border:0; }
+
+.ui-menu .ui-arrow-right-default,
+.ui-menu .ui-arrow-right-default:hover, .ui-menu .ui-arrow-right-hover,
+.ui-menu .ui-arrow-right-default:active, .ui-menu .ui-arrow-right-active {
background-position: right 50%; }
+
+.ui-menu-crumb .ui-arrow-right-default,
+.ui-menu-crumb.
ui-arrow-right-default:hover, .ui-menu-crumb .ui-arrow-right-hover,
+.ui-menu-crumb.
ui-arrow-right-default:active, .ui-menu-crumb .ui-arrow-right-active {
background-position: right 50% !important; }
+
+
+
+ /* SUGGESTED STYLES - for use with jQuery UI Themeroller CSS */
+
+.ui-menu .ui-state-default { border:0; }
+
+.ui-menu li { margin:1px 0; }
+.ui-menu li.ui-widget-content { background:transparent; border-left:0;
border-right:0; margin:0; }
+
+.ui-menu-dd { clear:both; }
+.ui-menu-dd.ui-widget-content,
+.ui-menu-dd ul.ui-widget-content { border:0; }
+
+.ui-menu-dd-breadcrumb { float:left; width:100%; margin:0; padding:.5em 0;
}
+
+.ui-menu-dd-breadcrumb.ui-widget-content { border-left:0; border-right:0; }
+.ui-menu-dd-breadcrumb.ui-widget-content.ui-menu-footer { border-bottom:0;
}
+.ui-menu-dd-breadcrumb.ui-widget-content.ui-menu-header { border-top:0; }
+
+.ui-menu-dd-breadcrumb li { float: left; list-style: none; margin: 0;
padding:.1em .5em; }
+.ui-menu-dd-breadcrumb li.ui-menu-prev-list,
+.ui-menu-dd-breadcrumb li.ui-menu-current-crumb { clear: left; float:
none; }
+.ui-menu-dd-breadcrumb li.ui-menu-current-crumb { padding-top:.5em; }
+
+.ui-menu-dd-breadcrumb a,
+.ui-menu-dd-breadcrumb span { white-space:nowrap; font-size: 1em; }
+
+.ui-menu-dd-breadcrumb a:link,
+.ui-menu-dd-breadcrumb a:visited,
+.ui-menu-dd-breadcrumb a:hover,
+.ui-menu-dd-breadcrumb a:active { }
+
+.ui-menu-dd-breadcrumb .ui-menu-prev-list.ui-arrow-left-default {
background-position: left 50%; padding-left:12px; margin-left:.5em; }
+
+.ui-menu-dd-breadcrumb .ui-menu-prev-list a:link,
+.ui-menu-dd-breadcrumb .ui-menu-prev-list a:visited,
+.ui-menu-dd-breadcrumb .ui-menu-prev-list a:hover,
+.ui-menu-dd-breadcrumb .ui-menu-prev-list a:active { background-image:
none; text-decoration:none; }
+
+.ui-menu-dd-breadcrumb .ui-menu-current-crumb a:link,
+.ui-menu-dd-breadcrumb .ui-menu-current-crumb a:visited,
+.ui-menu-dd-breadcrumb .ui-menu-current-crumb a:hover,
+.ui-menu-dd-breadcrumb .ui-menu-current-crumb a:active { display:block;
background-image:none; font-size:1.3em; text-decoration:none; }
+
+.ui-menu-dd a.ui-state-hover:link,
+.ui-menu-dd a.ui-state-hover:visited,
+.ui-menu-dd a.ui-state-hover:hover,
+.ui-menu-dd a.ui-state-hover:active { border:0; }
+
+.ui-menu.ui-menu-dd a.ui-menu-split-btn:link,
+.ui-menu.ui-menu-dd a.ui-menu-split-btn:visited,
+.ui-menu.ui-menu-dd a.ui-menu-split-btn:hover,
+.ui-menu.ui-menu-dd a.ui-menu-split-btn:active { float:left; width:88%;
padding:0; }
+
+.ui-menu.ui-menu-dd a.ui-menu-nextlevel:link,
+.ui-menu.ui-menu-dd a.ui-menu-nextlevel:visited,
+.ui-menu.ui-menu-dd a.ui-menu-nextlevel:hover,
+.ui-menu.ui-menu-dd a.ui-menu-nextlevel:active { float:right; width:12%;
padding:0; }
+
+.ui-menu a span { display:block; }
+.ui-menu.ui-menu-dd a.ui-menu-split-btn span { float:left;
padding:.3em .6em; }
+.ui-menu.ui-menu-dd a.ui-menu-nextlevel span { float:right;
padding:.3em .6em; text-indent:-9999px; overflow:hidden; }
+.ui-menu.ui-menu-dd a.ui-menu-nextlevel span.ui-arrow-right-default {
background-position: left center !important; }
+
+
=======================================
--- /dev/null
+++ /branches/dev/menu/ui/ui.menu.js Fri Sep 11 07:49:04 2009
@@ -0,0 +1,576 @@
+/*
+ * jQuery UI Draggable
+ *
+ * Copyright (c) 2008 Paul Bakaus
+ * Dual licensed under the MIT (MIT-LICENSE.txt)
+ * and GPL (GPL-LICENSE.txt) licenses.
+ *
+ * http://docs.jquery.com/UI/Menu
+ *
+ * Depends:
+ * ui.core.js
+ */
+(function($) {
+
+$(document).ready(function() {
+ $(document).bind('click', function(event) {
+ $.ui.menu.prototype.closeAll(event);
+ });
+});
+
+$.widget("ui.menu", {
+
+ _init: function() {
+
+ var o = this.options;
+ $.extend(this, {
+ _showTimers: [],
+ _hideTimers: []
+ });
+
+ //Prepare a nodelist of list items that's not in the DOM (anymore)
+ if(o.items.constructor == String) {
+ this.items = $(this.options.items, this.element).length ?
$(this.options.items, this.element).remove() :
$(this.options.items).remove();
+ } else {
+ this.items = o.items.length ? o.items.remove() :
this._generateMarkupFromJSON(o.items);
+ }
+
+ //Create the actual wrapping menu and append the markup
+ this._createMenu();
+
+ },
+
+ _generateMarkupFromJSON: function(json, cache) {
+
+ var html = $('<ul></ul>');
+ if($.isFunction(json)) {
+ json.cache = cache;
+ return html.data('menu-ajax', json);
+ }
+
+ for(var i in json) {
+ var item = $('<li><a href="#">'+i+'</a></li>').appendTo(html);
+ if(json[i].items)
item.append(this._generateMarkupFromJSON(json[i].items, json[i].cache));
+
+ }
+
+ return html;
+
+ },
+
+ _createMenu: function() {
+
+ var o = this.options, self = this;
+
+ this.menu = $('<div class="ui-widget ui-widget-content"></div>')
+ .css({ width: o.width })
+ .append(this.items.addClass('ui-menu')) //Append the actual item
structure
+ .appendTo(o.mode == 'static' ? this.element : (o.appendTo
== 'element' ? this.element : o.appendTo)); //Append to the selected
element, otherwise to this.options.appendTo (body by default)
+
+ //If the menu should be rendered to the page statically, add a wrapper
class that positions it absolutely
+ if(o.mode != 'static')
+ this.menu.addClass('ui-menu-container');
+
+ //Attach hover states for items
+ this._attachHoverStates(this.items);
+
+ // when there are multiple levels of hierarchy, create flyout or
drilldown menu
+ if ($('ul', this.items).length) {
+ if(this.options.type == 'drilldown')
+ this._prepareDrilldown();
+ if(this.options.type == 'flyout')
+ this._prepareFlyout();
+ }
+
+ this.items.css('visibility', 'visible');
+ if(this.menu.css('position') != 'absolute' &&
this.options.type != 'drilldown') //If the position isn't absolute,
+
this.menu.css('position', 'absolute').height(this.menu.height()).css('position', 'relative');
//set a hard value for the height
+
+
+ if(o.mode != 'static') {
+
+ if(o.mode == 'dropdown') {
+ &