jQuery UI Selectmenu - Default functionality

' }); $('select#filesC').selectmenu(); }); @@ -38,7 +38,7 @@

Select a Speed: - @@ -60,8 +60,8 @@ - - + + @@ -75,7 +75,7 @@
Select a file: + Select a speed: + + Select a number: + - + Select a file: + @@ -92,8 +92,8 @@

The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.

The datasource is a simple JavaScript array, provided to the widget using the source-option.

The Selectmenu widgets provides a styleable select element replacement. It will act as a proxy back to the original select element, controlling its state for form submission or serialization

The datasource is a native select element or a simple JavaScript array, provided to the widget using the source-option.

diff --git a/tests/visual/selectmenu/disabled.html b/tests/visual/selectmenu/disabled.html new file mode 100644 index 000000000..baf0dcf46 --- /dev/null +++ b/tests/visual/selectmenu/disabled.html @@ -0,0 +1,136 @@ + + + + + jQuery UI Selectmenu - Default functionality + + + + + + + + + + + + + + +

+ + +

+ Select a speed: + +
+
+
+ Select a number: + +
+
+
+ Select a file: + +
+
+
+ Select a file: + +
+ + + +

+ + +

+ + + + + diff --git a/ui/jquery.ui.selectmenu.js b/ui/jquery.ui.selectmenu.js index 4cb72ae57..6d54fa248 100644 --- a/ui/jquery.ui.selectmenu.js +++ b/ui/jquery.ui.selectmenu.js @@ -351,6 +351,11 @@ $.widget( "ui.selectmenu", { } if ( key === "disabled" ) { this.newelement.button( "option", "disabled", value ); + if ( value ) { + this.element.attr( "disabled", "disabled" ); + } else { + this.element.removeAttr( "disabled" ); + } this.list.attr( "aria-disabled", value ); this.close(); } -- cgit v1.2.3 From a9aef0974b7fca878e4a88d8a2e1beacc940eae5 Mon Sep 17 00:00:00 2001 From: Felix Nagel Date: Fri, 30 Sep 2011 21:51:37 +0200 Subject: Selectmenu: removed option wrapperElement --- demos/selectmenu/default.html | 8 +++++--- tests/visual/selectmenu/disabled.html | 6 +++--- ui/jquery.ui.selectmenu.js | 15 +++++++++------ 3 files changed, 17 insertions(+), 12 deletions(-) (limited to 'demos/selectmenu') diff --git a/demos/selectmenu/default.html b/demos/selectmenu/default.html index eecc25d12..8e481ea63 100644 --- a/demos/selectmenu/default.html +++ b/demos/selectmenu/default.html @@ -17,11 +17,13 @@ $('select#speed').selectmenu({ dropdown: false }); - $('select#number').selectmenu({ - dropdown: false, - wrapperElement: '

' ) + that.newelementWrap = $( '' ) .append( that.newelement ) .insertAfter( that.element ); }, -- cgit v1.2.3 From ba748232c13e65b1f1ae1a781a8e3a7378d6532d Mon Sep 17 00:00:00 2001 From: Felix Nagel Date: Sun, 9 Oct 2011 01:54:36 +0200 Subject: Selectmenu: added custom_render.html demo, removed widgetBaseClass --- demos/selectmenu/custom_render.html | 120 ++++++++++++++++++++++++++ demos/selectmenu/images/24-podcast-square.png | Bin 0 -> 681 bytes demos/selectmenu/images/24-rss-square.png | Bin 0 -> 594 bytes demos/selectmenu/images/24-video-square.png | Bin 0 -> 649 bytes ui/jquery.ui.selectmenu.js | 10 +-- 5 files changed, 125 insertions(+), 5 deletions(-) create mode 100644 demos/selectmenu/custom_render.html create mode 100644 demos/selectmenu/images/24-podcast-square.png create mode 100644 demos/selectmenu/images/24-rss-square.png create mode 100644 demos/selectmenu/images/24-video-square.png (limited to 'demos/selectmenu') diff --git a/demos/selectmenu/custom_render.html b/demos/selectmenu/custom_render.html new file mode 100644 index 000000000..c2620c3db --- /dev/null +++ b/demos/selectmenu/custom_render.html @@ -0,0 +1,120 @@ + + + + + jQuery UI Selectmenu - Default functionality + + + + + + + + + + + + + + +

+ + + +

The whole rendering process is extendable to make custom styling as easy as possible.

+ + + diff --git a/demos/selectmenu/images/24-podcast-square.png b/demos/selectmenu/images/24-podcast-square.png new file mode 100644 index 000000000..3c3e38f3f Binary files /dev/null and b/demos/selectmenu/images/24-podcast-square.png differ diff --git a/demos/selectmenu/images/24-rss-square.png b/demos/selectmenu/images/24-rss-square.png new file mode 100644 index 000000000..f59b69ed3 Binary files /dev/null and b/demos/selectmenu/images/24-rss-square.png differ diff --git a/demos/selectmenu/images/24-video-square.png b/demos/selectmenu/images/24-video-square.png new file mode 100644 index 000000000..ce50ccfde Binary files /dev/null and b/demos/selectmenu/images/24-video-square.png differ diff --git a/ui/jquery.ui.selectmenu.js b/ui/jquery.ui.selectmenu.js index c0d6fbe40..4b385f6dd 100644 --- a/ui/jquery.ui.selectmenu.js +++ b/ui/jquery.ui.selectmenu.js @@ -97,7 +97,7 @@ $.widget( "ui.selectmenu", { // wrap and insert new button that.newelementWrap = $( '' ) - .addClass( that.widgetBaseClass + '-button' ) + .addClass( 'ui-selectmenu-button' ) .append( that.newelement ) .insertAfter( that.element ); }, @@ -125,7 +125,7 @@ $.widget( "ui.selectmenu", { // wrap list that.listWrap = $( '

' ) - .addClass( that.widgetBaseClass + '-menu' ) + .addClass( 'ui-selectmenu-menu' ) .width( setWidth ) .append( that.list ) .appendTo( options.appendTo ); @@ -207,7 +207,7 @@ $.widget( "ui.selectmenu", { if ( !options.disabled ) { // close all other selectmenus - $( '.' + that.widgetBaseClass + '-open' ).not( that.newelement ).each( function() { + $( '.ui-selectmenu-open' ).not( that.newelement ).each( function() { $( this ).children( 'ul.ui-menu' ).data( 'element.selectelemenu' ).selectmenu( 'close' ); }); @@ -217,7 +217,7 @@ $.widget( "ui.selectmenu", { .removeClass( 'ui-corner-all' ); } - that.listWrap.addClass( that.widgetBaseClass + '-open' ); + that.listWrap.addClass( 'ui-selectmenu-open' ); that.list.menu( "focus", null, currentItem ); if ( !options.dropdown ) { @@ -255,7 +255,7 @@ $.widget( "ui.selectmenu", { .removeClass( 'ui-corner-top' ); } - that.listWrap.removeClass( that.widgetBaseClass + '-open' ); + that.listWrap.removeClass( 'ui-selectmenu-open' ); this.opened = false; if (focus) that.newelement.focus(); -- cgit v1.2.3 From ace8f3ed535d2c7ab5c90675cfe844e7f0ee0e57 Mon Sep 17 00:00:00 2001 From: Felix Nagel Date: Mon, 10 Oct 2011 21:11:15 +0200 Subject: Selectmenu: added custom_render.html demo to index.html --- demos/selectmenu/index.html | 1 + 1 file changed, 1 insertion(+) (limited to 'demos/selectmenu') diff --git a/demos/selectmenu/index.html b/demos/selectmenu/index.html index 909c3e262..45aa0c8e1 100644 --- a/demos/selectmenu/index.html +++ b/demos/selectmenu/index.html @@ -10,6 +10,7 @@

Examples

Default functionality

Custom item rendering functionality

-- cgit v1.2.3 From 2ed360c380541857c392117c300b8f900377a855 Mon Sep 17 00:00:00 2001 From: Felix Nagel Date: Mon, 17 Oct 2011 22:13:36 +0200 Subject: Selectmenu: code cleanup --- demos/selectmenu/default.html | 3 ++- themes/base/jquery.ui.selectmenu.css | 5 +++-- ui/jquery.ui.selectmenu.js | 8 ++++---- 3 files changed, 9 insertions(+), 7 deletions(-) (limited to 'demos/selectmenu') diff --git a/demos/selectmenu/default.html b/demos/selectmenu/default.html index d8296dedb..7851b554a 100644 --- a/demos/selectmenu/default.html +++ b/demos/selectmenu/default.html @@ -17,6 +17,7 @@ $('select#speed').selectmenu({ dropdown: false }); + var withOverflow = $('select#number').selectmenu({ dropdown: false }); @@ -31,7 +32,7 @@ fieldset { border: 0; } label { display: block; } select { width: 200px; } - .overflow ul { height: 200px; overflow: auto; } + .overflow ul { height: 200px; overflow: auto; overflow-y: auto; overflow-x: hidden;} diff --git a/themes/base/jquery.ui.selectmenu.css b/themes/base/jquery.ui.selectmenu.css index 46b78ea44..2b3c148a0 100644 --- a/themes/base/jquery.ui.selectmenu.css +++ b/themes/base/jquery.ui.selectmenu.css @@ -9,11 +9,12 @@ */ .ui-selectmenu-menu { padding: 0; margin: 0; position:absolute; top: 0; display: none; } -.ui-selectmenu-menu .ui-menu .ui-menu-item { width: auto; } .ui-selectmenu-menu .ui-menu .ui-menu-item a { padding: 0.3em 1em 0.3em 1em; } .ui-selectmenu-menu .ui-menu li.ui-state-disabled { padding: 0.3em 1em 0.3em 1em; } .ui-selectmenu-menu .ui-menu li.ui-selectmenu-optgroup { font-weight: bold; line-height: 1.5; padding: 2px 0.4em; margin: 0.5em 0 0 0; } .ui-selectmenu-open { display: block; } .ui-selectmenu-button span.ui-icon { right: 0.5em; left: auto; } -.ui-selectmenu-button span.ui-button-text { text-align: left; padding: 0.4em 2.1em 0.4em 1em } \ No newline at end of file +.ui-selectmenu-button span.ui-button-text { text-align: left; padding: 0.4em 2.1em 0.4em 1em } + +.ui-selectmenu-menu .ui-menu .ui-menu-item { width: auto; } /* IE7 fix */ \ No newline at end of file diff --git a/ui/jquery.ui.selectmenu.js b/ui/jquery.ui.selectmenu.js index 3090edd05..b6ec800db 100644 --- a/ui/jquery.ui.selectmenu.js +++ b/ui/jquery.ui.selectmenu.js @@ -251,6 +251,10 @@ $.widget( "ui.selectmenu", { } }, + widget: function() { + return this.buttonWrap.add( this.menuWrap ); + }, + _renderMenu: function( ul, items ) { var that = this, currentOptgroup = ""; @@ -379,10 +383,6 @@ $.widget( "ui.selectmenu", { this.menu.attr( "aria-disabled", value ); } }, - - widget: function() { - return this.buttonWrap.add( this.menuWrap ); - }, _readOptions: function() { var data = []; -- cgit v1.2.3 From 02ac48f18e4f893a28db3afc85eab44700b16abc Mon Sep 17 00:00:00 2001 From: Felix Nagel Date: Thu, 27 Oct 2011 19:35:56 +0200 Subject: Selectmenu: fixed default.html demo --- demos/selectmenu/default.html | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'demos/selectmenu') diff --git a/demos/selectmenu/default.html b/demos/selectmenu/default.html index 7851b554a..1d159205d 100644 --- a/demos/selectmenu/default.html +++ b/demos/selectmenu/default.html @@ -14,9 +14,7 @@ + diff --git a/demos/selectmenu/default.html b/demos/selectmenu/default.html index 1d159205d..5ae45472a 100644 --- a/demos/selectmenu/default.html +++ b/demos/selectmenu/default.html @@ -4,7 +4,7 @@ jQuery UI Selectmenu - Default functionality - + diff --git a/tests/visual/selectmenu/autocomplete.html b/tests/visual/selectmenu/autocomplete.html index 609f5d88f..ad7b80640 100644 --- a/tests/visual/selectmenu/autocomplete.html +++ b/tests/visual/selectmenu/autocomplete.html @@ -4,7 +4,7 @@ jQuery UI Selectmenu - Event functionality - + diff --git a/tests/visual/selectmenu/dialog.html b/tests/visual/selectmenu/dialog.html index 52a9cfaa5..e8aac5f67 100644 --- a/tests/visual/selectmenu/dialog.html +++ b/tests/visual/selectmenu/dialog.html @@ -4,7 +4,7 @@ jQuery UI Selectmenu - Event functionality - + diff --git a/tests/visual/selectmenu/disabled.html b/tests/visual/selectmenu/disabled.html index 0e98e014e..508cb7bf9 100644 --- a/tests/visual/selectmenu/disabled.html +++ b/tests/visual/selectmenu/disabled.html @@ -4,7 +4,7 @@ jQuery UI Selectmenu - Disable functionality - + diff --git a/tests/visual/selectmenu/events.html b/tests/visual/selectmenu/events.html index 7c7d0ac57..021dfcb48 100644 --- a/tests/visual/selectmenu/events.html +++ b/tests/visual/selectmenu/events.html @@ -4,7 +4,7 @@ jQuery UI Selectmenu - Event functionality - + diff --git a/tests/visual/selectmenu/methods.html b/tests/visual/selectmenu/methods.html index 5611b49ea..1cb527444 100644 --- a/tests/visual/selectmenu/methods.html +++ b/tests/visual/selectmenu/methods.html @@ -4,7 +4,7 @@ jQuery UI Selectmenu - Event functionality - + diff --git a/tests/visual/selectmenu/option.html b/tests/visual/selectmenu/option.html index fe04c89fa..33dd381c3 100644 --- a/tests/visual/selectmenu/option.html +++ b/tests/visual/selectmenu/option.html @@ -4,7 +4,7 @@ jQuery UI Selectmenu - Event functionality - + diff --git a/tests/visual/selectmenu/tabs.html b/tests/visual/selectmenu/tabs.html index ce36a04fe..da1221c7a 100644 --- a/tests/visual/selectmenu/tabs.html +++ b/tests/visual/selectmenu/tabs.html @@ -4,7 +4,7 @@ jQuery UI Selectmenu - Event functionality - + -- cgit v1.2.3 From 769abbabc3b7b27f6131705b5ebd64fb3120b817 Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Thu, 24 Nov 2011 11:27:35 +0100 Subject: Upgrade jQuery to 1.7.1. --- demos/selectmenu/custom_render.html | 34 +++++++++++++++---------------- demos/selectmenu/default.html | 10 ++++----- tests/visual/selectmenu/autocomplete.html | 10 ++++----- tests/visual/selectmenu/dialog.html | 12 +++++------ tests/visual/selectmenu/disabled.html | 10 ++++----- tests/visual/selectmenu/events.html | 14 ++++++------- tests/visual/selectmenu/methods.html | 12 +++++------ tests/visual/selectmenu/option.html | 8 ++++---- tests/visual/selectmenu/tabs.html | 8 ++++---- 9 files changed, 59 insertions(+), 59 deletions(-) (limited to 'demos/selectmenu') diff --git a/demos/selectmenu/custom_render.html b/demos/selectmenu/custom_render.html index f993bab2a..7e69dc3e1 100644 --- a/demos/selectmenu/custom_render.html +++ b/demos/selectmenu/custom_render.html @@ -4,7 +4,7 @@ jQuery UI Selectmenu - Default functionality - + @@ -14,7 +14,7 @@ + @@ -15,14 +15,14 @@ - +

diff --git a/tests/visual/selectmenu/autocomplete.html b/tests/visual/selectmenu/autocomplete.html index ad7b80640..b9c161699 100644 --- a/tests/visual/selectmenu/autocomplete.html +++ b/tests/visual/selectmenu/autocomplete.html @@ -4,7 +4,7 @@ jQuery UI Selectmenu - Event functionality - + @@ -14,9 +14,9 @@ + @@ -14,9 +14,9 @@ @@ -28,11 +28,11 @@ - +

Some example content

Test Link

diff --git a/tests/visual/selectmenu/disabled.html b/tests/visual/selectmenu/disabled.html index 508cb7bf9..e2bc436ac 100644 --- a/tests/visual/selectmenu/disabled.html +++ b/tests/visual/selectmenu/disabled.html @@ -4,7 +4,7 @@ jQuery UI Selectmenu - Disable functionality - + @@ -21,9 +21,9 @@ dropdown: false }); withOverflow.selectmenu("widget").addClass("overflow"); - $('select#files').selectmenu(); + $('select#files').selectmenu(); var files2 = $('select#files2').selectmenu(); - + $("#disable_select").toggle( function() { files2.selectmenu("disable"); }, function() { @@ -43,7 +43,7 @@ }, function() { files2.find("optgroup:eq(0)").removeAttr("disabled"); files2.selectmenu("refresh"); - + }); }); @@ -56,7 +56,7 @@ - +

diff --git a/tests/visual/selectmenu/events.html b/tests/visual/selectmenu/events.html index 021dfcb48..e17434add 100644 --- a/tests/visual/selectmenu/events.html +++ b/tests/visual/selectmenu/events.html @@ -4,7 +4,7 @@ jQuery UI Selectmenu - Event functionality - + @@ -16,19 +16,19 @@ $(function() { var log = $("#log"); var index = 0; - $('select').selectmenu({ + $('select').selectmenu({ open: function(event, ui) { $("

").text( index++ + " Opened").prependTo(log); - }, + }, close: function(event, ui) { $("

").text( index++ + " Closed").prependTo(log); - }, + }, focus : function(event, ui) { $("

").text( index++ + " Focused: " + ui.item.label + " #" + ui.item.index ).prependTo(log); - }, + }, select: function(event, ui) { $("

").text( index++ + " Selected: " + ui.item.label + " #" + ui.item.index ).prependTo(log); - }, + }, change: function(event, ui) { $("

").text( index++ + " Changed to: " + ui.item.label + " #" + ui.item.index ).prependTo(log); } @@ -44,7 +44,7 @@ - +

diff --git a/tests/visual/selectmenu/methods.html b/tests/visual/selectmenu/methods.html index 1cb527444..5476dfff8 100644 --- a/tests/visual/selectmenu/methods.html +++ b/tests/visual/selectmenu/methods.html @@ -4,7 +4,7 @@ jQuery UI Selectmenu - Event functionality - + @@ -15,21 +15,21 @@ + @@ -15,11 +15,11 @@ + @@ -14,9 +14,9 @@ - +

-- cgit v1.2.3 From aa84b39ccd541eaa6f3632d1ca2f9f1bce90d462 Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Tue, 21 Feb 2012 17:52:58 +0100 Subject: Selectmenu: Simplify id-selectors, no need for element-selector --- demos/selectmenu/default.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'demos/selectmenu') diff --git a/demos/selectmenu/default.html b/demos/selectmenu/default.html index decaca0fd..804cc6bc3 100644 --- a/demos/selectmenu/default.html +++ b/demos/selectmenu/default.html @@ -14,14 +14,14 @@ -- cgit v1.2.3 From d5c74f77c8630922d8eb78fe10e8cb433e42dc9d Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Tue, 21 Feb 2012 17:56:04 +0100 Subject: Selectmenu: Reorder default demo to reduce the odd top-margin (still needed to fully show the popup menu) --- demos/selectmenu/default.html | 35 +++++++++++++++++------------------ 1 file changed, 17 insertions(+), 18 deletions(-) (limited to 'demos/selectmenu') diff --git a/demos/selectmenu/default.html b/demos/selectmenu/default.html index 804cc6bc3..5653ac76c 100644 --- a/demos/selectmenu/default.html +++ b/demos/selectmenu/default.html @@ -16,17 +16,16 @@ $(function() { $('#speed').selectmenu(); + $('#files').selectmenu(); + var withOverflow = $('#number').selectmenu({ dropdown: false }); withOverflow.selectmenu("widget").addClass("overflow"); - - $('#files').selectmenu(); - }); diff --git a/tests/unit/selectmenu/selectmenu_core.js b/tests/unit/selectmenu/selectmenu_core.js index c6dff8a74..4fabdc15f 100644 --- a/tests/unit/selectmenu/selectmenu_core.js +++ b/tests/unit/selectmenu/selectmenu_core.js @@ -4,21 +4,19 @@ module( "selectmenu: core" ); test("accessibility", function () { var element = $('#speed').selectmenu(), - widget = element.selectmenu("widget"), - button = widget.filter(".ui-selectmenu-button"), - menu = widget.filter(".ui-selectmenu-menu"), + button = element.selectmenu("widget").parent(), + menu = element.selectmenu("menuWidget").parent(), link = button.find("a"), selected = element.find("option:selected"), ul = menu.children("ul"), links = ul.find("li.ui-menu-item a"); - expect(13 + links.length * 2); + expect(12 + links.length * 2); equals( link.attr("role"), "combobox", "button link role" ); equals( link.attr("aria-haspopup"), "true", "button link aria-haspopup" ); equals( link.attr("aria-expanded"), "false", "button link aria-expanded" ); equals( link.attr("aria-autocomplete"), "list", "button link aria-autocomplete" ); - equals( link.attr("aria-activedescendant"), links.eq(element[0].selectedIndex).attr("id"), "button link aria-activedescendant" ); equals( link.attr("aria-owns"), ul.attr("id"), "button link aria-owns" ); equals( link.attr("tabindex"), 0, "button link tabindex" ); @@ -46,12 +44,11 @@ $.each([ } ], function( i, settings ) { test("state synchronization - " + settings.type, function () { - expect(10); + expect(8); var element = $(settings.selector).selectmenu(), - widget = element.selectmenu("widget"), - button = widget.filter(".ui-selectmenu-button"), - menu = widget.filter(".ui-selectmenu-menu"), + button = element.selectmenu("widget").parent(), + menu = element.selectmenu("menuWidget").parent(), link = button.find("a"), ul = menu.children("ul"), links = ul.find("li.ui-menu-item a"), @@ -59,7 +56,6 @@ $.each([ link.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); equals( ul.attr("aria-activedescendant"), links.eq(element[0].selectedIndex).attr("id"), "after keydown menu aria-activedescendant" ); - equals( link.attr("aria-activedescendant"), links.eq(element[0].selectedIndex).attr("id"), "after keydown button link aria-activedescendant" ); equals( links.eq(element[0].selectedIndex).attr("aria-selected"), "true", "after keydown selected menu link aria-selected" ); equals( element.find("option:selected").val(), selected.next("option").val() , "after keydown original select state" ); equals( button.text(), selected.next("option").text(), "after keydown button text" ); @@ -67,7 +63,6 @@ $.each([ link.simulate( "click" ); menu.find("a").last().simulate( "mouseover" ).trigger( "click" ); equals( ul.attr("aria-activedescendant"), links.eq(element[0].selectedIndex).attr("id"), "after click menu aria-activedescendant" ); - equals( link.attr("aria-activedescendant"), links.eq(element[0].selectedIndex).attr("id"), "after click button link aria-activedescendant" ); equals( links.eq(element[0].selectedIndex).attr("aria-selected"), "true", "after click selected menu link aria-selected" ); equals( element.find("option:selected").val(), element.find("option").last().val(), "after click original select state" ); equals( button.text(), element.find("option").last().text(), "after click button text" ); diff --git a/tests/unit/selectmenu/selectmenu_events.js b/tests/unit/selectmenu/selectmenu_events.js index b5adbc0f5..dcc7c71c7 100644 --- a/tests/unit/selectmenu/selectmenu_events.js +++ b/tests/unit/selectmenu/selectmenu_events.js @@ -19,9 +19,8 @@ test("change", function () { } }); - var widget = this.element.selectmenu("widget"), - menu = widget.filter(".ui-selectmenu-menu"), - button = widget.filter(".ui-selectmenu-button"), + var button = this.element.selectmenu("widget").parent(), + menu = this.element.selectmenu("menuWidget").parent(), value = this.element.find("option").first().text(); button.find("a").simulate( "click" ); @@ -61,9 +60,8 @@ test("focus", function () { } }); - var widget = this.element.selectmenu("widget"), - button = widget.filter(".ui-selectmenu-button"), - menu = widget.filter(".ui-selectmenu-menu"); + var button = this.element.selectmenu("widget").parent(), + menu = this.element.selectmenu("menuWidget").parent(); button.find("a").simulate( "click" ); menu.find(".ui-menu-item").simulate("mouseover"); @@ -97,9 +95,8 @@ test("select", function () { } }); - var widget = this.element.selectmenu("widget"), - button = widget.filter(".ui-selectmenu-button"), - menu = widget.filter(".ui-selectmenu-menu"); + var button = this.element.selectmenu("widget").parent(), + menu = this.element.selectmenu("menuWidget").parent(); button.find("a").simulate( "click" ); menu.find("a").first().simulate( "mouseover" ).trigger("click"); diff --git a/tests/unit/selectmenu/selectmenu_methods.js b/tests/unit/selectmenu/selectmenu_methods.js index 942ab9e7b..bd94068a7 100644 --- a/tests/unit/selectmenu/selectmenu_methods.js +++ b/tests/unit/selectmenu/selectmenu_methods.js @@ -14,9 +14,8 @@ test( "open / close", function() { expect( 4 ); var element = $('#speed').selectmenu(), - widget = element.selectmenu("widget"), - button = widget.filter(".ui-selectmenu-button"), - menu = widget.filter(".ui-selectmenu-menu"); + button = element.selectmenu("widget").parent(), + menu = element.selectmenu("menuWidget").parent(); element.selectmenu("open"); ok( menu.is( ":visible" ), "menu visible" ); @@ -29,31 +28,26 @@ test( "open / close", function() { test("enable / disable", function () { - expect(14); + expect(10); var element = $('#speed').selectmenu(), - widget = element.selectmenu("widget"), - button = widget.filter(".ui-selectmenu-button"), - menu = widget.filter(".ui-selectmenu-menu"), + button = element.selectmenu("widget"), + menu = element.selectmenu("menuWidget"), link = button.find("a"); element.selectmenu("disable"); ok( element.selectmenu("option", "disabled"), "disable: widget option" ); equals( element.attr("disabled"), "disabled", "disable: native select disabled" ); equals( button.attr("aria-disabled"), "true", "disable: button wrapper ARIA" ); - equals( link.attr("aria-disabled"), "true", "disable: button ARIA" ); - equals( link.attr("tabindex"), -1, "disable: button tabindex" ); + equals( button.attr("tabindex"), -1, "disable: button tabindex" ); equals( menu.attr("aria-disabled"), "true", "disable: menu wrapper ARIA" ); - equals( menu.children("ul").attr("aria-disabled"), "true", "disable: menu ARIA" ); element.selectmenu("enable"); ok( !element.selectmenu("option", "disabled"), "enable: widget option" ); equals( element.attr("disabled"), undefined, "enable: native select disabled" ); equals( button.attr("aria-disabled"), "false", "enable: button wrapper ARIA" ); - equals( link.attr("aria-disabled"), "false", "enable: button ARIA" ); - equals( link.attr("tabindex"), 0, "enable: button tabindex" ); + equals( button.attr("tabindex"), 0, "enable: button tabindex" ); equals( menu.attr("aria-disabled"), "false", "enable: menu wrapper ARIA" ); - equals( menu.children("ul").attr("aria-disabled"), "false", "enable: menu ARIA" ); }); @@ -61,9 +55,7 @@ test("refresh - structure", function () { expect(3); var element = $('#speed').selectmenu(), - widget = element.selectmenu("widget"), - button = widget.filter(".ui-selectmenu-button"), - menu = widget.filter(".ui-selectmenu-menu"); + menu = element.selectmenu("menuWidget").parent(); element.find("option").eq(2).remove(); element.find("option").eq(3).remove(); @@ -80,22 +72,19 @@ test("refresh - structure", function () { test("refresh - disabled select", function () { - expect(6); + expect(4); var element = $('#speed').selectmenu(), - widget = element.selectmenu("widget"), - button = widget.filter(".ui-selectmenu-button"), - menu = widget.filter(".ui-selectmenu-menu"); + button = element.selectmenu("widget"), + menu = element.selectmenu("menuWidget"); element.attr("disabled", "disabled"); element.selectmenu("refresh"); ok( element.selectmenu("option", "disabled"), "widget option" ); equals( button.attr("aria-disabled"), "true", "button wrapper ARIA" ); - equals( button.children("a").attr("aria-disabled"), "true", "button ARIA" ); - equals( button.children("a").attr("tabindex"), -1, "button tabindex" ); + equals( button.attr("tabindex"), -1, "button tabindex" ); equals( menu.attr("aria-disabled"), "true", "menu wrapper ARIA" ); - equals( menu.children("ul").attr("aria-disabled"), "true", "mene ARIA" ); }); @@ -103,9 +92,8 @@ test("refresh - disabled option", function () { expect(2); var element = $('#speed').selectmenu(), - widget = element.selectmenu("widget"), - button = widget.filter(".ui-selectmenu-button"), - menu = widget.filter(".ui-selectmenu-menu"); + button = element.selectmenu("widget").parent(), + menu = element.selectmenu("menuWidget").parent(); element.attr("disabled", "disabled"); element.find("option").eq(2).attr("disabled", "disabled"); @@ -120,9 +108,8 @@ test("refresh - disabled option", function () { test("refresh - disabled optgroup", function () { var element = $('#files').selectmenu(), - widget = element.selectmenu("widget"), - button = widget.filter(".ui-selectmenu-button"), - menu = widget.filter(".ui-selectmenu-menu"), + button = element.selectmenu("widget").parent(), + menu = element.selectmenu("menuWidget").parent(), originalDisabledOptgroup = element.find("optgroup").first(), originalDisabledOptions = originalDisabledOptgroup.find("option"); diff --git a/tests/unit/selectmenu/selectmenu_options.js b/tests/unit/selectmenu/selectmenu_options.js index d5a787455..2271df167 100644 --- a/tests/unit/selectmenu/selectmenu_options.js +++ b/tests/unit/selectmenu/selectmenu_options.js @@ -17,11 +17,9 @@ test("appendTo another element", function () { test("dropdown: CSS styles", function () { expect(4); - var widget = this.element.selectmenu("widget"), - button = widget.filter(".ui-selectmenu-button"), - link = button.find("a"), - menu = widget.filter(".ui-selectmenu-menu"), - ul = widget.find("ul"); + var button = this.element.selectmenu("widget").parent(), + ul = this.element.selectmenu("menuWidget"), + link = button.find("a"); this.element.selectmenu("open"); ok( link.hasClass("ui-corner-top") && !link.hasClass("ui-corner-all"), "button styles dropdown"); diff --git a/tests/visual/selectmenu/disabled.html b/tests/visual/selectmenu/disabled.html index e2bc436ac..b74b93530 100644 --- a/tests/visual/selectmenu/disabled.html +++ b/tests/visual/selectmenu/disabled.html @@ -20,7 +20,7 @@ var withOverflow = $('select#number').selectmenu({ dropdown: false }); - withOverflow.selectmenu("widget").addClass("overflow"); + withOverflow.selectmenu("menuWidget").addClass("overflow"); $('select#files').selectmenu(); var files2 = $('select#files2').selectmenu(); @@ -43,7 +43,6 @@ }, function() { files2.find("optgroup:eq(0)").removeAttr("disabled"); files2.selectmenu("refresh"); - }); }); @@ -52,7 +51,7 @@ fieldset { border: 0; } label { display: block; } select { width: 200px; } - .overflow ul { height: 200px; overflow: auto; } + .overflow { height: 200px; overflow: auto; } diff --git a/ui/jquery.ui.selectmenu.js b/ui/jquery.ui.selectmenu.js index cedfc1f4a..193cd01f9 100644 --- a/ui/jquery.ui.selectmenu.js +++ b/ui/jquery.ui.selectmenu.js @@ -248,7 +248,11 @@ $.widget( "ui.selectmenu", { }, widget: function() { - return this.buttonWrap.add( this.menuWrap ); + return this.button; + }, + + menuWidget: function() { + return this.menu; }, _renderMenu: function( ul, items ) { @@ -260,6 +264,8 @@ $.widget( "ui.selectmenu", { var optgroup = $( '

+ + +

+ Select a speed: + + + Select a speed: + +
+
+
+ Select a number: + +
+
+
+ Select a file: + +

+ + +

" ).data( "item.selectmenu", item ); + var li = $( "

Select a Person:

-- cgit v1.2.3 From dec83993fc7aab7f2a75675d01d7dd4e21205737 Mon Sep 17 00:00:00 2001 From: Felix Nagel Date: Fri, 23 Nov 2012 13:44:50 +0100 Subject: Selectmenu: Upgrade jQuery to 1.8.3 --- demos/selectmenu/custom_render.html | 2 +- demos/selectmenu/default.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'demos/selectmenu') diff --git a/demos/selectmenu/custom_render.html b/demos/selectmenu/custom_render.html index f345aac3b..df99532e2 100644 --- a/demos/selectmenu/custom_render.html +++ b/demos/selectmenu/custom_render.html @@ -4,7 +4,7 @@ jQuery UI Selectmenu - Default functionality - + diff --git a/demos/selectmenu/default.html b/demos/selectmenu/default.html index c439ca1ee..6b1aacdfb 100644 --- a/demos/selectmenu/default.html +++ b/demos/selectmenu/default.html @@ -4,7 +4,7 @@ jQuery UI Selectmenu - Default functionality - + -- cgit v1.2.3 From 40b8567526ad790fb31d03ee43588a226551dbc8 Mon Sep 17 00:00:00 2001 From: Felix Nagel Date: Mon, 3 Dec 2012 23:13:26 +0100 Subject: Selectmenu: fix jQuery UI framework icon demo --- demos/selectmenu/custom_render.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'demos/selectmenu') diff --git a/demos/selectmenu/custom_render.html b/demos/selectmenu/custom_render.html index df99532e2..e6efb12d1 100644 --- a/demos/selectmenu/custom_render.html +++ b/demos/selectmenu/custom_render.html @@ -64,7 +64,7 @@ /* select with CSS avatar icons */ option.avatar { background-repeat: no-repeat !important; padding-left: 20px; } - .ui-icon { background-position: left top; } + .avatar .ui-icon { background-position: left top; } -- cgit v1.2.3 From 7a05c65644690000c046ce111c7b20840069e470 Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Fri, 7 Dec 2012 16:20:18 +0100 Subject: Selectmenu: Cleanup demo markup --- demos/index.html | 1 + demos/selectmenu/index.html | 14 ++++++-------- 2 files changed, 7 insertions(+), 8 deletions(-) (limited to 'demos/selectmenu') diff --git a/demos/index.html b/demos/index.html index 4739d76cd..338da841a 100644 --- a/demos/index.html +++ b/demos/index.html @@ -24,6 +24,7 @@

diff --git a/demos/selectmenu/index.html b/demos/selectmenu/index.html index cd5275efd..ef7162c4d 100644 --- a/demos/selectmenu/index.html +++ b/demos/selectmenu/index.html @@ -3,15 +3,13 @@ jQuery UI Selectmenu Demos - -

Examples

+ +

+ -- cgit v1.2.3 From 15032d17d921602c156fcb2ef4f6be5408774e41 Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Sun, 9 Dec 2012 12:36:35 +0100 Subject: Selectmenu: Remove colons from labels, annoying for screenreader-users. Cleanup whitespace. --- demos/selectmenu/default.html | 6 +++--- ui/jquery.ui.selectmenu.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'demos/selectmenu') diff --git a/demos/selectmenu/default.html b/demos/selectmenu/default.html index 6b1aacdfb..824f89fa2 100644 --- a/demos/selectmenu/default.html +++ b/demos/selectmenu/default.html @@ -37,7 +37,7 @@

- Select a speed: + Select a speed @@ -62,7 +62,7 @@

- Select a number: + Select a number ", options: { appendTo: null, - dropdown: true, + icons: { + button: "ui-icon-triangle-1-s" + }, position: { my: "left top", at: "left bottom", collision: "none" }, - icons: { - dropdown: "ui-icon-triangle-1-s", - popup: "ui-icon-triangle-2-n-s" - }, // callbacks change: null, @@ -84,7 +82,7 @@ $.widget( "ui.selectmenu", { }); this.button.prepend( $( "", { - "class": "ui-icon " + ( this.options.dropdown ? this.options.icons.dropdown : this.options.icons.popup ) + "class": "ui-icon " + this.options.icons.button })); this.buttonText = $( "", { @@ -119,7 +117,7 @@ $.widget( "ui.selectmenu", { // wrap menu this.menuWrap = $( "

", { "class": "ui-selectmenu-menu", - width: ( this.options.dropdown ) ? this.button.outerWidth() : this.buttonText.width() + parseFloat( this.buttonText.css( "padding-left" ) ) || 0 + parseFloat( this.buttonText.css( "margin-left") ) || 0 + width: this.button.outerWidth() }) .append( this.menu ) .appendTo( this._appendTo() ); @@ -155,10 +153,8 @@ $.widget( "ui.selectmenu", { }) .data( "ui-menu" ); - // dropdown style needs border on bottom only - if ( this.options.dropdown ) { - this.menu.addClass( "ui-corner-bottom" ).removeClass( "ui-corner-all" ); - } + // adjust border radius + this.menu.addClass( "ui-corner-bottom" ).removeClass( "ui-corner-all" ); // make sure focus stays on selected item menuInstance.delay = 999999999; @@ -194,28 +190,9 @@ $.widget( "ui.selectmenu", { return; } - var currentItem, - _position = { - of: this.button - }; - this.isOpen = true; this._toggleAttr(); - - // do not change position if non default position options are set (needed for custom positioned popup menus) - if ( this.items && !this.options.dropdown && this.options.position.my === "left top" && this.options.position.at === "left bottom" ) { - currentItem = this._getSelectedItem(); - // center current item - if ( this.menu.outerHeight() < this.menu.prop( "scrollHeight" ) ) { - this.menuWrap.css( "left" , -10000 ); - this.menu.scrollTop( this.menu.scrollTop() + currentItem.position().top - this.menu.outerHeight() / 2 + currentItem.outerHeight() / 2 ); - this.menuWrap.css( "left" , "auto" ); - } - _position.my = "left top" + ( this.menu.offset().top - currentItem.offset().top + ( this.button.outerHeight() - currentItem.outerHeight() ) / 2 ); - _position.at = "left top"; - } - - this.menuWrap.position( $.extend( {}, this.options.position, _position ) ); + this.menuWrap.position( $.extend( {}, this.options.position, { of: this.button } ) ); this._trigger( "open", event ); }, @@ -444,9 +421,7 @@ $.widget( "ui.selectmenu", { }, _toggleAttr: function(){ - if ( this.options.dropdown ) { - this.button.toggleClass( "ui-corner-top", this.isOpen ).toggleClass( "ui-corner-all", !this.isOpen ); - } + this.button.toggleClass( "ui-corner-top", this.isOpen ).toggleClass( "ui-corner-all", !this.isOpen ); this.menuWrap.toggleClass( "ui-selectmenu-open", this.isOpen ); this.menu.attr( "aria-hidden", !this.isOpen); this.button.attr( "aria-expanded", this.isOpen); -- cgit v1.2.3 From de149c47d79bf5822baad786591eb837fe2af769 Mon Sep 17 00:00:00 2001 From: Felix Nagel Date: Fri, 18 Jan 2013 19:28:13 +0100 Subject: Selectmenu: Updating to jQuery 1.9.0 --- demos/selectmenu/custom_render.html | 2 +- demos/selectmenu/default.html | 2 +- tests/visual/selectmenu/compatibility.html | 2 +- tests/visual/selectmenu/disabled_empty.html | 2 +- tests/visual/selectmenu/events_methods.html | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) (limited to 'demos/selectmenu') diff --git a/demos/selectmenu/custom_render.html b/demos/selectmenu/custom_render.html index c4fd2cd3b..225be6750 100644 --- a/demos/selectmenu/custom_render.html +++ b/demos/selectmenu/custom_render.html @@ -4,7 +4,7 @@ jQuery UI Selectmenu - Default functionality - + diff --git a/demos/selectmenu/default.html b/demos/selectmenu/default.html index 20a2c6bc8..6fbd80e80 100644 --- a/demos/selectmenu/default.html +++ b/demos/selectmenu/default.html @@ -4,7 +4,7 @@ jQuery UI Selectmenu - Default functionality - + diff --git a/tests/visual/selectmenu/compatibility.html b/tests/visual/selectmenu/compatibility.html index 6210aa293..94d7549f2 100644 --- a/tests/visual/selectmenu/compatibility.html +++ b/tests/visual/selectmenu/compatibility.html @@ -4,7 +4,7 @@ jQuery UI Selectmenu - Compatibility with other widgets - + diff --git a/tests/visual/selectmenu/disabled_empty.html b/tests/visual/selectmenu/disabled_empty.html index e7a9e9fb2..6a484ff3c 100644 --- a/tests/visual/selectmenu/disabled_empty.html +++ b/tests/visual/selectmenu/disabled_empty.html @@ -4,7 +4,7 @@ jQuery UI Selectmenu - Disabled & empty elements functionality - + diff --git a/tests/visual/selectmenu/events_methods.html b/tests/visual/selectmenu/events_methods.html index 2829337b4..aab2a5242 100644 --- a/tests/visual/selectmenu/events_methods.html +++ b/tests/visual/selectmenu/events_methods.html @@ -4,7 +4,7 @@ jQuery UI Selectmenu - Events & methods functionality - + -- cgit v1.2.3 From 78f93628821164b3045749540ac27b5031be056c Mon Sep 17 00:00:00 2001 From: Felix Nagel Date: Sat, 9 Feb 2013 03:31:43 +0100 Subject: Selectmenu: Updating jQuery to 1.9.1. --- demos/selectmenu/custom_render.html | 2 +- demos/selectmenu/default.html | 2 +- tests/visual/selectmenu/compatibility.html | 2 +- tests/visual/selectmenu/disabled_empty.html | 2 +- tests/visual/selectmenu/events_methods.html | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) (limited to 'demos/selectmenu') diff --git a/demos/selectmenu/custom_render.html b/demos/selectmenu/custom_render.html index 225be6750..a69b296ff 100644 --- a/demos/selectmenu/custom_render.html +++ b/demos/selectmenu/custom_render.html @@ -4,7 +4,7 @@ jQuery UI Selectmenu - Default functionality - + diff --git a/demos/selectmenu/default.html b/demos/selectmenu/default.html index 6fbd80e80..aa642032e 100644 --- a/demos/selectmenu/default.html +++ b/demos/selectmenu/default.html @@ -4,7 +4,7 @@ jQuery UI Selectmenu - Default functionality - + diff --git a/tests/visual/selectmenu/compatibility.html b/tests/visual/selectmenu/compatibility.html index 94d7549f2..45f0b4d31 100644 --- a/tests/visual/selectmenu/compatibility.html +++ b/tests/visual/selectmenu/compatibility.html @@ -4,7 +4,7 @@ jQuery UI Selectmenu - Compatibility with other widgets - + diff --git a/tests/visual/selectmenu/disabled_empty.html b/tests/visual/selectmenu/disabled_empty.html index 6a5f02d14..5190391b3 100644 --- a/tests/visual/selectmenu/disabled_empty.html +++ b/tests/visual/selectmenu/disabled_empty.html @@ -4,7 +4,7 @@ jQuery UI Selectmenu - Disabled & empty elements functionality - + diff --git a/tests/visual/selectmenu/events_methods.html b/tests/visual/selectmenu/events_methods.html index aab2a5242..e0ea8ce53 100644 --- a/tests/visual/selectmenu/events_methods.html +++ b/tests/visual/selectmenu/events_methods.html @@ -4,7 +4,7 @@ jQuery UI Selectmenu - Events & methods functionality - + -- cgit v1.2.3 From a6e2863a5c4d22647c973da376b1d1867b673340 Mon Sep 17 00:00:00 2001 From: Felix Nagel Date: Sat, 9 Mar 2013 14:18:48 +0100 Subject: Selectmenu: simplify overflow selectmenu init in default demo --- demos/selectmenu/default.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'demos/selectmenu') diff --git a/demos/selectmenu/default.html b/demos/selectmenu/default.html index aa642032e..48007e2cd 100644 --- a/demos/selectmenu/default.html +++ b/demos/selectmenu/default.html @@ -17,8 +17,7 @@ $('#files').selectmenu(); - var withOverflow = $('#number').selectmenu(); - withOverflow.selectmenu("menuWidget").addClass("overflow"); + $('#number').selectmenu().selectmenu("menuWidget").addClass("overflow"); }); @@ -75,8 +112,8 @@

Selectmenu with framework icons

- Select a File: - @@ -97,8 +134,8 @@

Selectmenu with custom avatar 16x16 images as CSS background

- Select a Person: - @@ -107,13 +144,10 @@ -

- - +

The whole rendering process is extendable to make custom styling as easy as possible.

- +

-- cgit v1.2.3 From c0fa69d9270da09289208ef0249e3d52184ae325 Mon Sep 17 00:00:00 2001 From: Felix Nagel Date: Mon, 29 Apr 2013 20:22:15 +0200 Subject: Selectmenu: clean up default demo --- demos/selectmenu/default.html | 44 ++++++++++++++++++++++++------------------- 1 file changed, 25 insertions(+), 19 deletions(-) (limited to 'demos/selectmenu') diff --git a/demos/selectmenu/default.html b/demos/selectmenu/default.html index 48007e2cd..62da27788 100644 --- a/demos/selectmenu/default.html +++ b/demos/selectmenu/default.html @@ -13,19 +13,30 @@ @@ -33,6 +44,7 @@

- - +

The Selectmenu widgets provides a styleable select element replacement. It will act as a proxy back to the original select element, controlling its state for form submission or serialization

The datasource is a native select element. Supports optgroups.

- +

-- cgit v1.2.3 From 666927ba916d3f3f90e48677e4884ffd0d7cc398 Mon Sep 17 00:00:00 2001 From: Felix Nagel Date: Mon, 29 Apr 2013 23:05:07 +0200 Subject: Selectmenu: add renderItemData method similar to autocomplete --- demos/selectmenu/custom_render.html | 2 +- ui/jquery.ui.selectmenu.js | 12 ++++++++---- 2 files changed, 9 insertions(+), 5 deletions(-) (limited to 'demos/selectmenu') diff --git a/demos/selectmenu/custom_render.html b/demos/selectmenu/custom_render.html index 09e6811f0..03f873d19 100644 --- a/demos/selectmenu/custom_render.html +++ b/demos/selectmenu/custom_render.html @@ -16,7 +16,7 @@ $.widget( "custom.iconselectmenu", $.ui.selectmenu, { _renderItem: function( ul, item ) { var element, span, - li = $( "

" ).data( "ui-selectmenu-item", item ); + li = $( "

" ); if ( item.disabled ) { li.addClass( "ui-state-disabled" ).text( item.label ); diff --git a/ui/jquery.ui.selectmenu.js b/ui/jquery.ui.selectmenu.js index ffcfcb852..4ec8fcd8d 100644 --- a/ui/jquery.ui.selectmenu.js +++ b/ui/jquery.ui.selectmenu.js @@ -163,11 +163,11 @@ $.widget( "ui.selectmenu", { var item, options = this.element.find( "option" ); - + if ( !options.length ) { return; } - + this._readOptions( options ); this._renderMenu( this.menu, this.items ); @@ -235,12 +235,16 @@ $.widget( "ui.selectmenu", { }).appendTo( ul ); currentOptgroup = item.optgroup; } - that._renderItem( ul, item ); + that._renderItemData( ul, item ); }); }, + _renderItemData: function( ul, item ) { + return this._renderItem( ul, item ).data( "ui-selectmenu-item", item ); + }, + _renderItem: function( ul, item ) { - var li = $( "

" ).data( "ui-selectmenu-item", item ), + var li = $( "

" ), a = $( "", { href: "#" }); if ( item.disabled ) { -- cgit v1.2.3 From 255d4f6d0a3394102d04bf0e3cdd9bea14c0bf03 Mon Sep 17 00:00:00 2001 From: Felix Nagel Date: Tue, 30 Apr 2013 23:40:53 +0200 Subject: Selectmenu; improve HTML building in custom render demo --- demos/selectmenu/custom_render.html | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) (limited to 'demos/selectmenu') diff --git a/demos/selectmenu/custom_render.html b/demos/selectmenu/custom_render.html index 03f873d19..941c94da6 100644 --- a/demos/selectmenu/custom_render.html +++ b/demos/selectmenu/custom_render.html @@ -15,23 +15,20 @@ $(function() { $.widget( "custom.iconselectmenu", $.ui.selectmenu, { _renderItem: function( ul, item ) { - var element, span, + var a, span, li = $( "

" ); if ( item.disabled ) { li.addClass( "ui-state-disabled" ).text( item.label ); } else { - element = item.element; + a = $( "", { + text: item.label, + href: "#" + }).appendTo( li ); span = $( "", { - style: element.attr( "style" ), - "class": "ui-icon " + element.attr( "class" ) - }); - $( "", { - text: item.label, - href: "#" - }) - .append( span ) - .appendTo( li ); + style: item.element.attr( "style" ), + "class": "ui-icon " + item.element.attr( "class" ) + }).appendTo( a ); } return li.appendTo( ul ); -- cgit v1.2.3 From 2290e308918c5edc28b8f4432e0f46c100ec2cc1 Mon Sep 17 00:00:00 2001 From: Felix Nagel Date: Tue, 9 Jul 2013 23:00:22 +0200 Subject: Selectmenu: Updating jQuery to 1.10.2. --- demos/selectmenu/custom_render.html | 2 +- demos/selectmenu/default.html | 2 +- tests/visual/compound/tabs_selectmenu.html | 2 +- tests/visual/selectmenu/selectmenu.html | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) (limited to 'demos/selectmenu') diff --git a/demos/selectmenu/custom_render.html b/demos/selectmenu/custom_render.html index 941c94da6..7d33eee8c 100644 --- a/demos/selectmenu/custom_render.html +++ b/demos/selectmenu/custom_render.html @@ -4,7 +4,7 @@ jQuery UI Selectmenu - Default functionality - + diff --git a/demos/selectmenu/default.html b/demos/selectmenu/default.html index 62da27788..9775d190a 100644 --- a/demos/selectmenu/default.html +++ b/demos/selectmenu/default.html @@ -4,7 +4,7 @@ jQuery UI Selectmenu - Default functionality - + diff --git a/tests/visual/compound/tabs_selectmenu.html b/tests/visual/compound/tabs_selectmenu.html index ca4e53e92..9554562c5 100644 --- a/tests/visual/compound/tabs_selectmenu.html +++ b/tests/visual/compound/tabs_selectmenu.html @@ -5,7 +5,7 @@ Compound Visual Test : Selectmenu in Tabs - + diff --git a/tests/visual/selectmenu/selectmenu.html b/tests/visual/selectmenu/selectmenu.html index df3971c9a..fab7c0a7c 100644 --- a/tests/visual/selectmenu/selectmenu.html +++ b/tests/visual/selectmenu/selectmenu.html @@ -4,7 +4,7 @@ Selectmenu Visual Test: Default - + -- cgit v1.2.3 From f2d06bf06391a746b030b5f6af532ed5aeaea0a2 Mon Sep 17 00:00:00 2001 From: Felix Nagel Date: Sun, 29 Sep 2013 15:33:14 +0200 Subject: Selectmenu: add widthMenu and widthButton options --- demos/selectmenu/default.html | 2 +- ui/jquery.ui.selectmenu.js | 22 +++++++++++++++++++--- 2 files changed, 20 insertions(+), 4 deletions(-) (limited to 'demos/selectmenu') diff --git a/demos/selectmenu/default.html b/demos/selectmenu/default.html index 9775d190a..2e35599bc 100644 --- a/demos/selectmenu/default.html +++ b/demos/selectmenu/default.html @@ -63,7 +63,7 @@ - + diff --git a/ui/jquery.ui.selectmenu.js b/ui/jquery.ui.selectmenu.js index a5f9485bd..7d7c3fb98 100644 --- a/ui/jquery.ui.selectmenu.js +++ b/ui/jquery.ui.selectmenu.js @@ -29,6 +29,8 @@ $.widget( "ui.selectmenu", { at: "left bottom", collision: "none" }, + widthButton: null, + widthMenu: null, // callbacks change: null, @@ -74,7 +76,6 @@ $.widget( "ui.selectmenu", { "class": "ui-selectmenu-button ui-widget ui-state-default ui-corner-all", tabindex: tabindex || this.options.disabled ? -1 : 0, id: this.ids.button, - width: this.element.outerWidth(), role: "combobox", "aria-expanded": "false", "aria-autocomplete": "list", @@ -91,7 +92,9 @@ $.widget( "ui.selectmenu", { "class": "ui-selectmenu-text" }) .appendTo( this.button ); + this._setText( this.buttonText, this.element.find( "option:selected" ).text() ); + this._setOption( "widthButton", this.options.widthButton ); this._on( this.button, this._buttonEvents ); this._hoverable( this.button ); @@ -110,8 +113,7 @@ $.widget( "ui.selectmenu", { // Wrap menu this.menuWrap = $( "

", { - "class": "ui-selectmenu-menu ui-front", - outerWidth: this.button.outerWidth() + "class": "ui-selectmenu-menu ui-front" }) .append( this.menu ) .appendTo( this._appendTo() ); @@ -203,6 +205,7 @@ $.widget( "ui.selectmenu", { this.isOpen = true; this._toggleAttr(); + this._resizeMenu(); this._position(); this._on( this.document, this._documentClick ); @@ -440,6 +443,12 @@ $.widget( "ui.selectmenu", { this.button.attr( "tabindex", 0 ); } } + if ( key === "widthButton" ) { + if ( !value ) { + value = this.element.outerWidth(); + } + this.button.outerWidth( value ); + } }, _appendTo: function() { @@ -471,6 +480,13 @@ $.widget( "ui.selectmenu", { this.button.attr( "aria-expanded", this.isOpen ); }, + _resizeMenu: function() { + this.menu.outerWidth( this.options.widthMenu || Math.max( + this.button.outerWidth(), + this.menu.width( "" ).outerWidth() + ) ); + }, + _getCreateOptions: function() { return { disabled: this.element.prop( "disabled" ) }; }, -- cgit v1.2.3 From 1bc5d087467c913b92c927d05259eea72f96f4ed Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Mon, 25 Nov 2013 14:24:19 +0100 Subject: Demos: Add meta-viewport element for better 'mobile' testing --- demos/selectmenu/custom_render.html | 1 + demos/selectmenu/default.html | 3 ++- demos/selectmenu/index.html | 1 + 3 files changed, 4 insertions(+), 1 deletion(-) (limited to 'demos/selectmenu') diff --git a/demos/selectmenu/custom_render.html b/demos/selectmenu/custom_render.html index 7d33eee8c..b037d325a 100644 --- a/demos/selectmenu/custom_render.html +++ b/demos/selectmenu/custom_render.html @@ -2,6 +2,7 @@ + jQuery UI Selectmenu - Default functionality diff --git a/demos/selectmenu/default.html b/demos/selectmenu/default.html index 2e35599bc..69bde2a55 100644 --- a/demos/selectmenu/default.html +++ b/demos/selectmenu/default.html @@ -2,6 +2,7 @@ + jQuery UI Selectmenu - Default functionality @@ -90,7 +91,7 @@

- +

diff --git a/demos/selectmenu/index.html b/demos/selectmenu/index.html index ef7162c4d..3b035f5fb 100644 --- a/demos/selectmenu/index.html +++ b/demos/selectmenu/index.html @@ -2,6 +2,7 @@ + jQuery UI Selectmenu Demos -- cgit v1.2.3 From 32b0936e409426b861bf5e84bab40007395ded03 Mon Sep 17 00:00:00 2001 From: Felix Nagel Date: Tue, 26 Nov 2013 00:32:27 +0100 Subject: Selectmenu: remove link element and adjust styles in custom renderer demo --- demos/selectmenu/custom_render.html | 20 ++++++-------------- 1 file changed, 6 insertions(+), 14 deletions(-) (limited to 'demos/selectmenu') diff --git a/demos/selectmenu/custom_render.html b/demos/selectmenu/custom_render.html index b037d325a..fb8127bbd 100644 --- a/demos/selectmenu/custom_render.html +++ b/demos/selectmenu/custom_render.html @@ -16,20 +16,15 @@ $(function() { $.widget( "custom.iconselectmenu", $.ui.selectmenu, { _renderItem: function( ul, item ) { - var a, span, - li = $( "

" ); + var li = $( "

", { text: item.label } ); if ( item.disabled ) { li.addClass( "ui-state-disabled" ).text( item.label ); } else { - a = $( "", { - text: item.label, - href: "#" - }).appendTo( li ); - span = $( "", { + $( "", { style: item.element.attr( "style" ), "class": "ui-icon " + item.element.attr( "class" ) - }).appendTo( a ); + }).appendTo( li ); } return li.appendTo( ul ); @@ -66,21 +61,18 @@ width: 200px; } - .ui-selectmenu-menu .ui-menu .ui-icon { - top: 0.4em; - } .ui-selectmenu-menu .ui-menu .ui-menu-item a { padding-left: 2em; } /* select with custom icons */ - .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item a { + .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item { padding: 0.5em 0 0.5em 3em; } - .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item a .ui-icon { + .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon { height: 24px; width: 24px; - top: 0.2em; + top: 0.1em; } .ui-icon.video { background: url(images/24-video-square.png) 0 0 no-repeat; -- cgit v1.2.3

"popup" style with framework icons

"popup" style with custom icon images

"dropdown" style with custom avatar 16x16 images as CSS background

Examples

Examples

Selectmenu with framework icons

Selectmenu with custom avatar 16x16 images as CSS background

Examples