jQuery UI Selectmenu - Default functionality

").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 59d15809a3c621ee20ea28ecfeed0d57e085420f Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Tue, 21 Feb 2012 20:22:13 +0100 Subject: Selectmenu: Introduce menuWidget method, to get access to the menu element. Fix various tests and simplify demos accordingly. Add comment about optgroup-click-handling. --- demos/selectmenu/custom_render.html | 6 ++-- demos/selectmenu/default.html | 4 +-- tests/unit/selectmenu/selectmenu_core.js | 17 ++++------- tests/unit/selectmenu/selectmenu_events.js | 15 ++++------ tests/unit/selectmenu/selectmenu_methods.js | 45 ++++++++++------------------- tests/unit/selectmenu/selectmenu_options.js | 8 ++--- tests/visual/selectmenu/disabled.html | 5 ++-- ui/jquery.ui.selectmenu.js | 8 ++++- 8 files changed, 45 insertions(+), 63 deletions(-) (limited to 'demos/selectmenu/custom_render.html') diff --git a/demos/selectmenu/custom_render.html b/demos/selectmenu/custom_render.html index 7e69dc3e1..2e775084c 100644 --- a/demos/selectmenu/custom_render.html +++ b/demos/selectmenu/custom_render.html @@ -36,15 +36,15 @@ var files = $('select#files').iconselectmenu({ dropdown: false }); - files.iconselectmenu("widget").children("ul").addClass("ui-menu-icons"); + files.iconselectmenu("menuWidget").addClass("ui-menu-icons"); var filesB = $('select#filesB').iconselectmenu({ dropdown: false }); - filesB.iconselectmenu("widget").children("ul").addClass("ui-menu-icons customicons"); + filesB.iconselectmenu("menuWidget").addClass("ui-menu-icons customicons"); var peopleA = $('select#peopleA').iconselectmenu(); - peopleA.iconselectmenu("widget").children("ul").addClass("ui-menu-icons avatar"); + peopleA.iconselectmenu("menuWidget").addClass("ui-menu-icons avatar"); }); 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 = $( '