r900 - in branches/experimental: tests/visual/menu ui
Author: paul.bakaus
Date: Mon Nov 10 06:50:04 2008
New Revision: 900
Modified:
branches/experimental/tests/visual/menu/menu.html
branches/experimental/ui/ui.core.position.js
branches/experimental/ui/ui.menu.js
Log:
menu: added defaults for direction and forceDirection, set default mode to
static
positionAround: fixed some bugs, mostly related to the parent container
Modified: branches/experimental/tests/visual/menu/menu.html
==============================================================================
--- branches/experimental/tests/visual/menu/menu.html (original)
+++ branches/experimental/tests/visual/menu/menu.html Mon Nov 10 06:50:04
2008
@@ -7,9 +7,11 @@
<link rel="stylesheet" href="css/ui.menus.css" type="text/css"
media="screen" title="no title" charset="utf-8">
<script type="text/javascript" src="../../../jquery-1.2.6.js"></script>
- <script type="text/javascript" src="../../../ui/ui.core.js"></script>
+ <script src="../../../../../trunk/ui/ui.core.js"
type="text/javascript"></script>
<script type="text/javascript" src="../../../ui/ui.menu.js"></script>
<script src="../../../ui/ui.core.position.js" type="text/javascript"
charset="utf-8"></script>
+
+
<style type="text/css" media="screen">
@@ -20,7 +22,7 @@
}
#menu2 {
- border: 5px solid black;
+ border: 10px solid black;
}
</style>
@@ -32,46 +34,48 @@
$('#menu1').menu({
mode: 'static',
type: 'drilldown',
- selectCategories: true,
+ //selectCategories: true,
select: function(e, ui) {
- console.log('Selected item ', ui.item);
+ //console.log('Selected item ', ui.item);
},
browse: function(e, ui) {
- console.log('Browsing item ', ui.item);
+ //console.log('Browsing item ', ui.item);
}
});
$('button').menu({
items: '#items2',
- //type: 'drilldown',
+ mode: 'dropdown',
select: function(e, ui) {
- console.log('Selected item ', ui.item);
+ //console.log('Selected item ', ui.item);
},
browse: function(e, ui) {
- console.log('Browsing item ', ui.item);
+ //console.log('Browsing item ', ui.item);
},
open: function(e, ui) {
- console.log('Opened menu');
+ //console.log('Opened menu');
},
close: function(e, ui) {
- console.log('Closed menu');
+ //console.log('Closed menu');
}
});
$('#menu2').menu({
items: '#items3',
mode: 'context',
+ appendTo: 'element',
+ direction: 'left above',
select: function(e, ui) {
- console.log('Selected item ', ui.item);
+ //console.log('Selected item ', ui.item);
},
browse: function(e, ui) {
- console.log('Browsing item ', ui.item);
+ //console.log('Browsing item ', ui.item);
},
open: function(e, ui) {
- console.log('Opened menu');
+ //console.log('Opened menu');
},
close: function(e, ui) {
- console.log('Closed menu');
+ //console.log('Closed menu');
}
});
@@ -148,7 +152,9 @@
<li><a href="#">Red carpet</a></li>
</ul>
- <div id='menu2' style='height: 100px; width: 100px; background:
green;'></div>
+ <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>
@@ -178,6 +184,22 @@
<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.
+
</body>
</html>
Modified: branches/experimental/ui/ui.core.position.js
==============================================================================
--- branches/experimental/ui/ui.core.position.js (original)
+++ branches/experimental/ui/ui.core.position.js Mon Nov 10 06:50:04 2008
@@ -4,22 +4,29 @@
around: 'mouse',
direction: 'default',
forceDirection: false,
- offset: [0, 0]
+ offset: [0, 0]
}, o);
var leftOffset = 0,
topOffset = 0,
height = this[0].offsetHeight,
width = this[0].offsetWidth,
- parentOffset= this.offsetParent().offset()
+ op = this.offsetParent(),
+ sp = $(this.scrollParent()[0] || document.body),
+ spBorderTop = parseInt(op.css('borderTopWidth'),10),
+ spBorderLeft= parseInt(op.css('borderLeftWidth'),10),
+ opBorderTop = parseInt(op.css('borderTopWidth'),10),
+ opBorderLeft= parseInt(op.css('borderLeftWidth'),10),
+ opOffset = op.offset(),
+ spOffset = sp.offset()
;
//Ugly fix for the issues of offset related to the body element
- parentOffset = {
- top: this.offsetParent()[0] == document.body ? 0 : parentOffset.top,
- left: this.offsetParent()[0] == document.body ? 0 : parentOffset.left
- };
+ opOffset = (/(html|body)/).test(op[0].tagName.toLowerCase()) ? { top: 0,
left: 0 } : opOffset;
+ spOffset = (/(html|body)/).test(op[0].tagName.toLowerCase()) ? { top: 0,
left: 0 } : spOffset;
+ var bottomEdge = (/(html|body)/).test(op[0].tagName.toLowerCase()) ?
$(window).height() : spOffset.top + spBorderTop + sp.height();
+ var rightEdge = (/(html|body)/).test(op[0].tagName.toLowerCase()) ?
$(window).width() : spOffset.left + spBorderLeft + sp.width();
if($(options.around).length && $(options.around)[0].nodeName) { //If
around is an element
@@ -30,34 +37,36 @@
;
if((/(left|right)/).test(options.direction)) {
- leftOffset = ( options.direction == 'left' ? (offset.left > width ||
options.forceDirection) : ($(window).width()-offset.left-relWidth < width
&& !options.forceDirection) ) ? -(width) : relWidth;
- topOffset = e ? ( $(window).height()-offset.top < height ?
-(height-relHeight) : 0 ) : 0;
+
+ leftOffset = ( options.direction == 'left' ? (offset.left -
spOffset.left - spBorderLeft > width || options.forceDirection) :
(rightEdge-offset.left-relWidth < width && !options.forceDirection) ) ?
-(width) : relWidth;
+ topOffset = e ? ( bottomEdge - offset.top < height ?
-(height-relHeight) : 0 ) : 0;
} else {
- topOffset = ( options.direction == 'above' ? (offset.top > height ||
options.forceDirection) : ($(window).height()-offset.top-relHeight < height
&& !options.forceDirection) ) ? -(height) : relHeight;
+ topOffset = ( options.direction == 'above' ? (offset.top - spOffset.top
- spBorderTop > height || options.forceDirection) :
(bottomEdge-offset.top-relHeight < height && !options.forceDirection) ) ?
-(height) : relHeight;
}
this.css({
- left: offset.left - parentOffset.left + leftOffset + options.offset[0],
- top: offset.top - parentOffset.top + topOffset + options.offset[1]
+ left: offset.left - opOffset.left - opBorderLeft + leftOffset +
options.offset[0],
+ top: offset.top - opOffset.top - opBorderTop + topOffset +
options.offset[1]
});
} else {
-
+
if((/(below|default)/).test(options.direction)) {
- topOffset = $(window).height()-e.pageY < height
&& !options.forceDirection ? -(height) : 0;
+ topOffset = bottomEdge-e.pageY < height && !options.forceDirection ?
-(height) : 0;
} else if ((/above/).test(options.direction)) {
- topOffset = e.pageY > height || options.forceDirection ? -(height) : 0;
+ topOffset = (e.pageY - spOffset.top - spBorderTop) > height ||
options.forceDirection ? -(height) : 0;
}
if((/(right|default)/).test(options.direction)) {
- leftOffset = $(window).width()-e.pageX < width
&& !options.forceDirection ? -(width) : 0;
+ leftOffset = rightEdge-e.pageX < width && !options.forceDirection ?
-(width) : 0;
} else if ((/left/).test(options.direction)) {
- leftOffset = e.pageX > width || options.forceDirection ? -(width) : 0;
+ leftOffset = (e.pageX - spOffset.left - spBorderLeft) > width ||
options.forceDirection ? -(width) : 0;
}
+
this.css({
- left: e.pageX - parentOffset.left + leftOffset + options.offset[0],
- top: e.pageY - parentOffset.top + topOffset + options.offset[1]
+ left: e.pageX - opOffset.left - opBorderLeft + leftOffset +
options.offset[0],
+ top: e.pageY - opOffset.top - opBorderTop + topOffset +
options.offset[1]
});
}
Modified: branches/experimental/ui/ui.menu.js
==============================================================================
--- branches/experimental/ui/ui.menu.js (original)
+++ branches/experimental/ui/ui.menu.js Mon Nov 10 06:50:04 2008
@@ -39,11 +39,11 @@
_createMenu: function() {
var o = this.options, self = this;
-
+
this.menu = $('<div class="ui-component ui-component-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); //Append to
the selected element, otherwise to this.options.appendTo (body by default)
+ .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')
@@ -387,13 +387,15 @@
manager: [],
defaults: {
type: 'normal', //Can be set to either normal, drilldown or toolbar
- mode: 'dropdown', //Can be set to context (open on right click),
dropdown or static (render into the selected element)
+ mode: 'static', //Can be set to context (open on right click), dropdown
or static (render into the selected element)
items: '> ul', //Can be either a jQuery selector, therefore using markup
in the selected node, or a JSON list of menu entries
appendTo: 'body', //Only in case of context/dropdown - where the actual
menu is being appended to,
exclusive: true, //Defines wether only this menu can be shown at the
same time
width: 180,
- maxHeight: 200, //If height specified and surpassed, scrollbars will be
added to the drilldown
+ maxHeight: 200, //If height specified and surpassed, scrollbars will be
added to the drilldown,
+ forceDirection: false,
+ direction: undefined,
hoverClass: 'ui-hover-state',
hoverClassSecondary: 'ui-component-content',
Topic Participants
Paul Bakaus