diff options
| author | Felix Nagel <info@felixnagel.com> | 2010-11-13 00:43:12 +0100 |
|---|---|---|
| committer | Felix Nagel <info@felixnagel.com> | 2010-11-13 00:43:12 +0100 |
| commit | b6ce8d61be449fefdac6983c0f62aa3f57f46615 (patch) | |
| tree | d9bf14942221df12324663b5225a3ffe14ce9ed6 | |
| parent | 226b659c4012d7f145f12da0568d8a2c8cc24412 (diff) | |
| download | jquery-ui-b6ce8d61be449fefdac6983c0f62aa3f57f46615.tar.gz jquery-ui-b6ce8d61be449fefdac6983c0f62aa3f57f46615.zip | |
updated: positioning functionality is now based upon position plugin, this shopuld fix a few issues, see http://jqueryui.com/demos/position/
updated: demos
added: positioning demo
| -rw-r--r-- | demos/selectmenu/background_image.html | 1 | ||||
| -rw-r--r-- | demos/selectmenu/default.html | 65 | ||||
| -rw-r--r-- | demos/selectmenu/positioning.html | 246 | ||||
| -rw-r--r-- | ui/jquery.ui.selectmenu.js | 60 |
4 files changed, 300 insertions, 72 deletions
diff --git a/demos/selectmenu/background_image.html b/demos/selectmenu/background_image.html index 92a9e3909..63dd599bb 100644 --- a/demos/selectmenu/background_image.html +++ b/demos/selectmenu/background_image.html @@ -116,7 +116,6 @@ <option value="somefile">Some unknown file</option> </select> </fieldset> - <h2>Default: "popup" Style with custom icon images</h2> <fieldset> <label for="filesB">Select a File:</label> diff --git a/demos/selectmenu/default.html b/demos/selectmenu/default.html index 210bcb2d6..86b00fb5c 100644 --- a/demos/selectmenu/default.html +++ b/demos/selectmenu/default.html @@ -22,24 +22,35 @@ </style> <script type="text/javascript"> $(function(){ - $('select#speedA').selectmenu(); + $('select#speedA').selectmenu({style:'popup'}); - $('select#speedAa').selectmenu({maxHeight: 150}); + $('select#speedAa').selectmenu({ + style:'popup', + maxHeight: 150 + }); $('select#speedB').selectmenu({ + style:'popup', width: 300, format: addressFormatting }); - $('select#speedC').selectmenu({style:'dropdown'}); + $('select#speedC').selectmenu(); $('select#speedD').selectmenu({ - style:'dropdown', + style:'popup', menuWidth: 400, format: addressFormatting }); - $('select#filesC').selectmenu(); + $('select#filesC').selectmenu({ + style:'popup', + positionOptions: { + my: "left center", + at: "right center", + offset: "10 0" + } + }); }); //a custom format option callback @@ -64,38 +75,37 @@ <script type="text/javascript"> $(function(){ $('<div style="position: absolute; top: 20px; right: 10px;" />').appendTo('body').themeswitcher(); }); </script> </head> <body> + <br /> + <br /> <form action="#"> - <h2>Default: "popup" Style</h2> + <h2>"default popup" Style</h2> <fieldset> <label for="speedA">Select a Speed:</label> <select name="speedA" id="speedA"> <option value="Slower">Slower</option> - <option value="Slow">Slow</option> - <option value="Medium" selected="selected">Medium</option> + <option value="Slow" selected="selected">Slow</option> + <option value="Medium">Medium</option> <option value="Fast">Fast</option> <option value="Faster">Faster</option> </select> </fieldset> - - <h2>Default: "popup" Style with maxHeight set </h2> + <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> - <option value="Faster">Faster</option> + <option value="Slower">-6 Slower</option> + <option value="Slower">-5 Slower</option> + <option value="Slower">-4 Slower</option> + <option value="Slow">-3 Slow</option> + <option value="Slow">-2 Slow</option> + <option value="Slow">-1 Slow</option> + <option value="Medium" selected="selected">0 Medium</option> + <option value="Fast">1 Fast</option> + <option value="Fast">2 Fast</option> + <option value="Fast">3 Fast</option> + <option value="Faster">4 Faster</option> + <option value="Faster">5 Faster</option> + <option value="Faster">6 Faster</option> </select> </fieldset> @@ -133,8 +143,7 @@ </select> </fieldset> - <h2>Demo with optgroups</h2> - <fieldset> + <h2>"popup" Style with custom positioning and optgroups</h2> <fieldset> <label for="filesC">Select a File:</label> <select name="filesC" id="filesC"> <optgroup label="scripts"> @@ -143,7 +152,7 @@ </optgroup> <optgroup label="Label with space"> <option value="somefile">Some unknown file</option> - <option value="someotherfile">Some other unknown file</option> + <option value="someotherfile">Some other file</option> </optgroup> </select> </fieldset> diff --git a/demos/selectmenu/positioning.html b/demos/selectmenu/positioning.html new file mode 100644 index 000000000..af712084d --- /dev/null +++ b/demos/selectmenu/positioning.html @@ -0,0 +1,246 @@ +<!DOCTYPE html> +<html> + <head> + <meta http-equiv="content-type" content="text/html; charset=utf-8" /> + <title>Positioning Demos for jQuery UI selectmenu</title> + + <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> + <link type="text/css" href="../../themes/base/jquery.ui.selectmenu.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.2.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> + + <script type="text/javascript" src="../../ui/jquery.ui.selectmenu.js"></script> + + <style type="text/css"> + /*demo styles*/ + body {font-size: 62.5%; font-family:"Verdana",sans-serif; } + fieldset { border:0; } + label,select,.ui-select-menu { float: left; margin-right: 10px; } + select { width: 200px; } + + /*select with custom icons*/ + body a.customicons { height: 2.8em;} + body .customicons li a, body a.customicons span.ui-selectmenu-status { line-height: 2em; padding-left: 30px !important; } + body .video .ui-selectmenu-item-icon, body .podcast .ui-selectmenu-item-icon, body .rss .ui-selectmenu-item-icon { height: 24px; width: 24px; } + body .video .ui-selectmenu-item-icon { background: url(images/24-video-square.png) 0 0 no-repeat; } + body .podcast .ui-selectmenu-item-icon { background: url(images/24-podcast-square.png) 0 0 no-repeat; } + body .rss .ui-selectmenu-item-icon { background: url(images/24-rss-square.png) 0 0 no-repeat; } + + /*select with avatar icons*/ + body a.avatars { height: 2.8em;} + body .avatars li a, body a.avatars span.ui-selectmenu-status { line-height: 2em; padding-left: 30px !important; } + body .avatar .ui-selectmenu-item-icon { height: 25px; width: 25px; } + + .scroller {overflow: auto; height: 100px; background-color: #aed6f1;} + + </style> + <script type="text/javascript"> + $(function(){ + $('select#positionA, select#positionB, select#positionD, select#positionE').selectmenu({ + maxHeight: 150, + }); + + $('select#positionC').selectmenu({ + style: "popup", + maxHeight: 150, + menuWidth: "300px", + icons: [ + {find: '.video'}, + {find: '.podcast'}, + {find: '.rss'} + ] + }); + + $('#scrollerB').scroll(function() { + $("select#positionE").selectmenu("close"); + }) + + }); + </script> + <script type="text/javascript" src="http://ui.jquery.com/applications/themeroller/themeswitchertool/"></script> + <script type="text/javascript"> $(function(){ $('<div style="position: absolute; top: 20px; right: 10px;" />').appendTo('body').themeswitcher(); }); </script> +</head> +<body> + <form action="#"> + <h2>Set maxHeight to 150px with lots of content</h2> + <p>Select something besides the default and the menu appears correctly the next time you open it. + If you add some <BR> tags before the <FORM> tag, then this selectmenu doesn't work + correctly either. NOTE: This is now fixed and should work correctly. See an older version of + selectmenu to see it not work properly.</p> + <fieldset> + <label for="positionA">Select Media:</label> + <select name="positionA" id="positionA" class="customicons"> + <optgroup label="Podcasts"> + <option value="p1" class="podcast">Podcast 1</option> + <option value="p2" class="podcast">Podcast 2</option> + <option value="p3" class="podcast">Podcast 3</option> + <option value="p4" class="podcast">Podcast 4</option> + <option value="p5" class="podcast">Podcast 5</option> + <option value="p6" class="podcast">Podcast 6</option> + </optgroup> + <optgroup label="Videos"> + <option value="v1" class="video">Video 1</option> + <option value="v2" class="video">Video 2</option> + <option value="v3" class="video">Video 3</option> + <option value="v4" class="video">Video 4</option> + <option value="v5" class="video">Video 5</option> + <option value="v6" class="video">Video 6</option> + <option value="v7" class="video">Video 7</option> + <option value="v8" class="video">Video 8</option> + <option value="v9" class="video">Video 9</option> + </optgroup> + <optgroup label="RSS Feeds"> + <option value="r1" class="rss">Feed 1</option> + <option value="r2" class="rss">Feed 2</option> + <option value="r3" class="rss">Feed 3</option> + <option value="r4" class="rss">Feed 4</option> + <option value="r5" class="rss">Feed 5</option> + <option value="r6" class="rss">Feed 6</option> + <option value="r7" class="rss">Feed 7</option> + <option value="r8" class="rss">Feed 8</option> + <option value="r9" class="rss">Feed 9</option> + <option value="r10" class="rss">Feed 10</option> + <option value="r11" class="rss">Feed 11</option> + <option value="r12" class="rss">Feed 12</option> + </optgroup> + </select> + </fieldset> + <h2>Exactly the same as previous: Set maxHeight to 150px with lots of content</h2> + <p>Select something besides the default and the menu appears in the wrong place next time you open it. NOTE: + This is now fixed and should work correctly. See an older version of + selectmenu to see it not work properly.</p> + <fieldset> + <label for="positionB">Select Media:</label> + <select name="positionB" id="positionB" class="customicons"> + <optgroup label="Podcasts"> + <option value="p1" class="podcast">Podcast 1</option> + <option value="p2" class="podcast">Podcast 2</option> + <option value="p3" class="podcast">Podcast 3</option> + <option value="p4" class="podcast">Podcast 4</option> + <option value="p5" class="podcast">Podcast 5</option> + <option value="p6" class="podcast">Podcast 6</option> + </optgroup> + <optgroup label="Videos"> + <option value="v1" class="video">Video 1</option> + <option value="v2" class="video">Video 2</option> + <option value="v3" class="video">Video 3</option> + <option value="v4" class="video">Video 4</option> + <option value="v5" class="video">Video 5</option> + <option value="v6" class="video">Video 6</option> + <option value="v7" class="video">Video 7</option> + <option value="v8" class="video">Video 8</option> + <option value="v9" class="video">Video 9</option> + </optgroup> + <optgroup label="RSS Feeds"> + <option value="r1" class="rss">Feed 1</option> + <option value="r2" class="rss">Feed 2</option> + <option value="r3" class="rss">Feed 3</option> + <option value="r4" class="rss">Feed 4</option> + <option value="r5" class="rss">Feed 5</option> + <option value="r6" class="rss">Feed 6</option> + <option value="r7" class="rss">Feed 7</option> + <option value="r8" class="rss">Feed 8</option> + <option value="r9" class="rss">Feed 9</option> + <option value="r10" class="rss">Feed 10</option> + <option value="r11" class="rss">Feed 11</option> + <option value="r12" class="rss">Feed 12</option> + </optgroup> + </select> + </fieldset> + <h2>Set maxHeight to 150px, using optgroups and custom icons</h2> + <fieldset> + <label for="positionC">Select Media:</label> + <select name="positionC" id="positionC" class="customicons"> + <optgroup label="Podcasts"> + <option value="p1" class="podcast">Podcast 1</option> + <option value="p2" class="podcast">Podcast 2</option> + <option value="p3" class="podcast">Podcast 3</option> + <option value="p4" class="podcast">Podcast 4</option> + <option value="p5" class="podcast">Podcast 5</option> + <option value="p6" class="podcast">Podcast 6</option> + </optgroup> + <optgroup label="Videos"> + <option value="v1" class="video">Video 1</option> + <option value="v2" class="video">Video 2</option> + <option value="v3" class="video">Video 3</option> + <option value="v4" class="video">Video 4</option> + <option value="v5" class="video">Video 5</option> + <option value="v6" class="video">Video 6</option> + <option value="v7" class="video">Video 7</option> + <option value="v8" class="video">Video 8</option> + <option value="v9" class="video">Video 9</option> + </optgroup> + <optgroup label="RSS Feeds"> + <option value="r1" class="rss">Feed 1</option> + <option value="r2" class="rss">Feed 2</option> + <option value="r3" class="rss">Feed 3</option> + <option value="r4" class="rss">Feed 4</option> + <option value="r5" class="rss">Feed 5</option> + <option value="r6" class="rss">Feed 6</option> + <option value="r7" class="rss">Feed 7</option> + <option value="r8" class="rss">Feed 8</option> + <option value="r9" class="rss">Feed 9</option> + <option value="r10" class="rss">Feed 10</option> + <option value="r11" class="rss">Feed 11</option> + <option value="r12" class="rss">Feed 12</option> + </optgroup> + </select> + </fieldset> + <h2>Inside of a scrolling container</h2> + <p>Not working correctly: Scroll down, open the selectmenu, then use scroll wheel over blue area. Note that blue area scrolls and selectmenu stays visible in same position.</p> + <fieldset> + <div id="scrollerA" class="scroller"> + <p>Scroll down</p> + <p>Scroll down</p> + <p>Scroll down</p> + <p>Scroll down</p> + <p>Scroll down</p> + <p>Scroll down</p> + <label for="positionD">Select Media:</label> + <select name="positionD" id="positionD" class="customicons"> + <option value="p1" class="podcast">Podcast 1</option> + <option value="p2" class="podcast">Podcast 2</option> + <option value="p3" class="podcast">Podcast 3</option> + <option value="p4" class="podcast">Podcast 4</option> + <option value="p5" class="podcast">Podcast 5</option> + <option value="p6" class="podcast">Podcast 6</option> + </select> + <p>Scroll up</p> + <p>Scroll up</p> + <p>Scroll up</p> + <p>Scroll up</p> + <p>Scroll up</p> + </div> + </fieldset> + <h2>Inside of a scrolling container - close selectmenu on scroll</h2> + <p>Working correctly: Scroll down, open the selectmenu, then use scroll wheel over blue area. Note that blue area scrolls and selectmenu immediately closes on scroll.</p> + <fieldset> + <div id="scrollerB" class="scroller"> + <p>Scroll down</p> + <p>Scroll down</p> + <p>Scroll down</p> + <p>Scroll down</p> + <p>Scroll down</p> + <p>Scroll down</p> + <label for="positionE">Select Media:</label> + <select name="positionE" id="positionE" class="customicons"> + <option value="p1" class="podcast">Podcast 1</option> + <option value="p2" class="podcast">Podcast 2</option> + <option value="p3" class="podcast">Podcast 3</option> + <option value="p4" class="podcast">Podcast 4</option> + <option value="p5" class="podcast">Podcast 5</option> + <option value="p6" class="podcast">Podcast 6</option> + </select> + <p>Scroll up</p> + <p>Scroll up</p> + <p>Scroll up</p> + <p>Scroll up</p> + <p>Scroll up</p> + </div> + </fieldset> + </form> + <div id="output"></div> +</body> +</html> diff --git a/ui/jquery.ui.selectmenu.js b/ui/jquery.ui.selectmenu.js index 8c326bd86..b58f8045b 100644 --- a/ui/jquery.ui.selectmenu.js +++ b/ui/jquery.ui.selectmenu.js @@ -16,7 +16,12 @@ $.widget("ui.selectmenu", { eventPrefix: "selectmenu", options: { transferClasses: true, - style: 'popup', + style: 'dropdown', + positionOptions: { + my: "left top", + at: "left bottom", + offset: null + }, width: null, menuWidth: null, handleWidth: 26, @@ -387,7 +392,6 @@ $.widget("ui.selectmenu", { .attr('aria-hidden', false) .find('li:not(.'+ self.widgetBaseClass +'-group):eq('+ this._selectedIndex() +') a')[0].focus(); if(this.options.style == "dropdown"){ this.newelement.removeClass('ui-corner-all').addClass('ui-corner-top'); } - this._refreshPosition(); this._trigger("open", event, this._uiHash()); } }, @@ -514,49 +518,19 @@ $.widget("ui.selectmenu", { this.list.attr('aria-activedescendant', activeID); }, _refreshPosition: function(){ - var self = this, o = this.options; - - // get some vars - var pageScroll = self._pageScroll(); - var menuTop = this.newelement.offset().top; - var viewportHeight = $(window).height(); - var listHeight = $(this.list[0]).outerHeight(); - - // check if there's enough room to expand to the bottom - if ((menuTop + listHeight) > (viewportHeight + pageScroll)) { - menuTop -= listHeight; - //check top - } else if ((menuTop - pageScroll) < (listHeight)) { - menuTop += this.newelement.height() + 4; // FIMXE: this is quick & dirty but we'll change to position - } else { - if (this.newelement.is('.'+this.widgetBaseClass+'-popup')) { - var scrolledAmt = this.list[0].scrollTop; - this.list.find('li:lt('+this._selectedIndex()+')').each(function() { - scrolledAmt -= $(this).outerHeight(); - }); - menuTop+=scrolledAmt; - } else { - menuTop += this.newelement.height(); - } + var o = this.options; + // if its a native pop-up we need to calculate the position of the selected li + if (o.style == "popup" && !o.positionOptions.offset) { + var selected = this.list.find('li:not(.ui-selectmenu-group):eq('+this._selectedIndex()+')'); + var _offset = "0 -" + (selected.outerHeight() + selected.offset().top - this.list.offset().top); } - // set values - this.list.css({ - top: menuTop, - left: this.newelement.offset().left + this.list.position({ + // set options for position plugin + of: o.positionOptions.of || this.newelement, + my: o.positionOptions.my, + at: o.positionOptions.at, + offset: o.positionOptions.offset || _offset }); - }, - _pageScroll: function() { - var yScroll; - if (self.pageYOffset) { - yScroll = self.pageYOffset; - // Explorer 6 Strict - } else if (document.documentElement && document.documentElement.scrollTop) { - yScroll = document.documentElement.scrollTop; - // all other Explorers - } else if (document.body) { - yScroll = document.body.scrollTop; - } - return yScroll; } }); })(jQuery);
\ No newline at end of file |