r2774 - added support for maxHeight and scrolling.
Author: scottjehl
Date: Mon Jun 15 13:00:47 2009
New Revision: 2774
Modified:
branches/labs/selectmenu/index.html
branches/labs/selectmenu/ui.selectmenu.css
branches/labs/selectmenu/ui.selectmenu.js
Log:
added support for maxHeight and scrolling.
Modified: branches/labs/selectmenu/index.html
==============================================================================
--- branches/labs/selectmenu/index.html (original)
+++ branches/labs/selectmenu/index.html Mon Jun 15 13:00:47 2009
@@ -32,6 +32,8 @@
$('select#speedA').selectmenu();
+ $('select#speedAa').selectmenu({maxHeight: 150});
+
$('select#speedB').selectmenu({
width: 300,
format: addressFormatting
@@ -81,7 +83,29 @@
<fieldset>
<label for="speedA">Select a Speed:</label>
<select name="speedA" id="speedA">
- <option value="Slower" class="whoo">Slower</option>
+ <option value="Slower">Slower</option>
+ <option value="Slow">Slow</option>
+ <option value="Medium" selected="selected">Medium</option>
+ <option value="Fast">Fast</option>
+ <option value="Faster">Faster</option>
+ </select>
+ </fieldset>
+
+ <h2>Default: "popup" Style with maxHeight set </h2>
+ <fieldset>
+ <label for="speedAa">Select a Speed:</label>
+ <select name="speedAa" id="speedAa">
+ <option value="Slower">Slower</option>
+ <option value="Slow">Slow</option>
+ <option value="Medium" selected="selected">Medium</option>
+ <option value="Fast">Fast</option>
+ <option value="Faster">Faster</option>
+ <option value="Slower">Slower</option>
+ <option value="Slow">Slow</option>
+ <option value="Medium" selected="selected">Medium</option>
+ <option value="Fast">Fast</option>
+ <option value="Faster">Faster</option>
+ <option value="Slower">Slower</option>
<option value="Slow">Slow</option>
<option value="Medium" selected="selected">Medium</option>
<option value="Fast">Fast</option>
Modified: branches/labs/selectmenu/ui.selectmenu.css
==============================================================================
--- branches/labs/selectmenu/ui.selectmenu.css (original)
+++ branches/labs/selectmenu/ui.selectmenu.css Mon Jun 15 13:00:47 2009
@@ -10,7 +10,7 @@
.ui-selectmenu { display: block; position:relative; height:2em;
text-decoration: none; overflow:hidden;}
.ui-selectmenu-icon { position:absolute; right:6px; margin-top:-8px; top:
50%; }
-.ui-selectmenu-menu { padding:0; margin:0; list-style:none;
position:absolute; top: 0; visibility: hidden; }
+.ui-selectmenu-menu { padding:0; margin:0; list-style:none;
position:absolute; top: 0; visibility: hidden; overflow: auto; }
.ui-selectmenu-open { visibility: visible; }
.ui-selectmenu-menu-popup { margin-top: -1px; }
.ui-selectmenu-menu-dropdown { }
Modified: branches/labs/selectmenu/ui.selectmenu.js
==============================================================================
--- branches/labs/selectmenu/ui.selectmenu.js (original)
+++ branches/labs/selectmenu/ui.selectmenu.js Mon Jun 15 13:00:47 2009
@@ -114,11 +114,11 @@
.data('index',i)
.addClass(s_options[i].classes)
.data('optionClasses', s_options[i].classes)
- .mouseup(function(){
- self.value($(this).data('index'));
- if(self._safemouseup){
- self.close(true);
- }
+ .mouseup(function(event){
+ self.value($(this).data('index'));
+ if(self._safemouseup){
+ self.close(true);
+ }
return false;
})
.click(function(){
@@ -139,6 +139,8 @@
})
.appendTo(this.list);
+ this.list.bind('mousedown mouseup', function(){return false;});
+
//append icon if option is specified
if(o.icons){
for(var j in o.icons){
@@ -176,6 +178,11 @@
//set menu width to either menuWidth option value, width option value,
or select width
if(o.style == 'dropdown'){ this.list.width( (o.menuWidth) ?
o.menuWidth : ((o.width) ? o.width : selectWidth)); }
else { this.list.width( (o.menuWidth) ? o.menuWidth : ((o.width) ?
o.width - o.handleWidth : selectWidth - o.handleWidth)); }
+
+ //set max height from option
+ if(o.maxHeight && o.maxHeight < this.list.height()){
+ this.list.height(o.maxHeight);
+ }
//transfer menu click to menu button
this.list
@@ -311,7 +318,6 @@
open: function(){
this._closeOthers();
- this._refreshPosition();
this.newelement.addClass('ui-state-active');
this.list
.appendTo('body')
@@ -319,6 +325,7 @@
.find('li:eq('+ this._selectedIndex() +') a').focus();
if(this.options.style == "dropdown"){
this.newelement.removeClass('ui-corner-all').addClass('ui-corner-top'); }
+ this._refreshPosition();
return this.element;
},
@@ -411,25 +418,19 @@
.html( this.list.find('li').eq(this._selectedIndex()).find('a').html() );
},
- _refreshPosition: function(offsetTop, offsetLeft){
- var topOffset = offsetTop || 0;
- var leftOffset = offsetLeft || 0;
-
- var menuHeight = this.list.height();
- var sHeight = this.list[0].scrollHeight;
-
+ _refreshPosition: function(){
//set left value
this.list.css('left', this.newelement.offset().left);
//set top value
+ var menuTop = this.newelement.offset().top;
+ var scrolledAmt = this.list[0].scrollTop;
this.list.find('li:lt('+this._selectedIndex()+')').each(function(){
- topOffset -= $(this).outerHeight();
+ scrolledAmt -= $(this).outerHeight();
});
- var menuTop = this.newelement.offset().top;
-
if(this.newelement.is('.ui-selectmenu-popup')){
- menuTop+=topOffset;
+ menuTop+=scrolledAmt;
this.list.css('top', menuTop);
}
else {
@@ -451,6 +452,7 @@
width: null,
menuWidth: null,
handleWidth: 26,
+ maxHeight: null,
icons: null,
format: null
}