mirror of
https://github.com/jquery/jquery-ui.git
synced 2025-01-07 20:34:24 +00:00
Merge branch 'selectmenu'
This commit is contained in:
TJ VanToll
commit
77bf202e58
@ -35,6 +35,7 @@ var
|
||||
"progressbar",
|
||||
"resizable",
|
||||
"selectable",
|
||||
"selectmenu",
|
||||
"slider",
|
||||
"spinner",
|
||||
"tabs",
|
||||
|
||||
@ -26,6 +26,7 @@ var versions = {
|
||||
"Progressbar": "progressbar/progressbar.html",
|
||||
"Resizable": "resizable/resizable.html",
|
||||
"Selectable": "selectable/selectable.html",
|
||||
"Selectmenu": "selectmenu/selectmenu.html",
|
||||
"Slider": "slider/slider.html",
|
||||
"Sortable": "sortable/sortable.html",
|
||||
"Spinner": "spinner/spinner.html",
|
||||
|
||||
@ -24,6 +24,7 @@
|
||||
<li><a href="removeClass/">removeClass</a></li>
|
||||
<li><a href="resizable/">resizable</a></li>
|
||||
<li><a href="selectable/">selectable</a></li>
|
||||
<li><a href="selectmenu/">selectmenu</a></li>
|
||||
<li><a href="show/">show</a></li>
|
||||
<li><a href="slider/">slider</a></li>
|
||||
<li><a href="sortable/">sortable</a></li>
|
||||
|
||||
143
demos/selectmenu/custom_render.html
Normal file
143
demos/selectmenu/custom_render.html
Normal file
@ -0,0 +1,143 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery UI Selectmenu - Default functionality</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.menu.js"></script>
|
||||
<script src="../../ui/jquery.ui.selectmenu.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$.widget( "custom.iconselectmenu", $.ui.selectmenu, {
|
||||
_renderItem: function( ul, item ) {
|
||||
var li = $( "<li>", { text: item.label } );
|
||||
|
||||
if ( item.disabled ) {
|
||||
li.addClass( "ui-state-disabled" ).text( item.label );
|
||||
} else {
|
||||
$( "<span>", {
|
||||
style: item.element.attr( "style" ),
|
||||
"class": "ui-icon " + item.element.attr( "class" )
|
||||
}).appendTo( li );
|
||||
}
|
||||
|
||||
return li.appendTo( ul );
|
||||
}
|
||||
});
|
||||
|
||||
$( "#filesA" )
|
||||
.iconselectmenu()
|
||||
.iconselectmenu( "menuWidget" )
|
||||
.addClass( "ui-menu-icons" );
|
||||
|
||||
$( "#filesB" )
|
||||
.iconselectmenu()
|
||||
.iconselectmenu( "menuWidget" )
|
||||
.addClass( "ui-menu-icons customicons" );
|
||||
|
||||
$( "#people" )
|
||||
.iconselectmenu()
|
||||
.iconselectmenu( "menuWidget")
|
||||
.addClass( "ui-menu-icons avatar" );
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
h2 {
|
||||
margin: 30px 0 0 0
|
||||
}
|
||||
fieldset {
|
||||
border: 0;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
select {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
padding: 0.5em 0 0.5em 3em;
|
||||
}
|
||||
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
top: 0.1em;
|
||||
}
|
||||
.ui-icon.video {
|
||||
background: url(images/24-video-square.png) 0 0 no-repeat;
|
||||
}
|
||||
.ui-icon.podcast {
|
||||
background: url(images/24-podcast-square.png) 0 0 no-repeat;
|
||||
}
|
||||
.ui-icon.rss {
|
||||
background: url(images/24-rss-square.png) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* select with CSS avatar icons */
|
||||
option.avatar {
|
||||
background-repeat: no-repeat !important;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.avatar .ui-icon {
|
||||
background-position: left top;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<form action="#">
|
||||
|
||||
<h2>Selectmenu with framework icons</h2>
|
||||
<fieldset>
|
||||
<label for="filesA">Select a File:</label>
|
||||
<select name="filesA" id="filesA">
|
||||
<option value="jquery" class="ui-icon-script">jQuery.js</option>
|
||||
<option value="jquerylogo" class="ui-icon-image">jQuery Logo</option>
|
||||
<option value="jqueryui" class="ui-icon-script">ui.jQuery.js</option>
|
||||
<option value="jqueryuilogo" selected="selected" class="ui-icon-image">jQuery UI Logo</option>
|
||||
<option value="somefile">Some unknown file</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
|
||||
<h2>Selectmenu with custom icon images</h2>
|
||||
<fieldset>
|
||||
<label for="filesB">Select a podcast:</label>
|
||||
<select name="filesB" id="filesB">
|
||||
<option value="mypodcast" class="podcast">John Resig Podcast</option>
|
||||
<option value="myvideo" class="video">Scott Gonzales Video</option>
|
||||
<option value="myrss" class="rss">jQuery RSS XML</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
|
||||
<h2>Selectmenu with custom avatar 16x16 images as CSS background</h2>
|
||||
<fieldset>
|
||||
<label for="people">Select a Person:</label>
|
||||
<select name="people" id="people">
|
||||
<option value="1" class="avatar" style="background-image: url(http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&r=g&s=16);">John Resig</option>
|
||||
<option value="2" class="avatar" style="background-image: url(http://www.gravatar.com/avatar/e42b1e5c7cfd2be0933e696e292a4d5f?d=monsterid&r=g&s=16);">Tauren Mills</option>
|
||||
<option value="3" class="avatar" style="background-image: url(http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&r=g&s=16);">Jane Doe</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>The whole rendering process is extendable to make custom styling as easy as possible.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
104
demos/selectmenu/default.html
Normal file
104
demos/selectmenu/default.html
Normal file
@ -0,0 +1,104 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery UI Selectmenu - Default functionality</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.menu.js"></script>
|
||||
<script src="../../ui/jquery.ui.selectmenu.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#speed" ).selectmenu();
|
||||
|
||||
$( "#files" ).selectmenu();
|
||||
|
||||
$( "#number" )
|
||||
.selectmenu()
|
||||
.selectmenu( "menuWidget" )
|
||||
.addClass( "overflow" );
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
fieldset {
|
||||
border: 0;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
margin: 30px 0 0 0;
|
||||
}
|
||||
select {
|
||||
width: 200px;
|
||||
}
|
||||
.overflow {
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<form action="#">
|
||||
|
||||
<fieldset>
|
||||
<label for="speed">Select a speed</label>
|
||||
<select name="speed" id="speed">
|
||||
<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>
|
||||
|
||||
<label for="files">Select a file</label>
|
||||
<select name="files" id="files">
|
||||
<optgroup label="Scripts">
|
||||
<option value="jquery">jQuery.js</option>
|
||||
<option value="jqueryui">ui.jQuery.js</option>
|
||||
</optgroup>
|
||||
<optgroup label="Other files">
|
||||
<option value="somefile">Some unknown file</option>
|
||||
<option value="someotherfile">Some other file with a very long option text</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
|
||||
<label for="number">Select a number</label>
|
||||
<select name="number" id="number">
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected="selected">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
<option value="10">10</option>
|
||||
<option value="11">11</option>
|
||||
<option value="12">12</option>
|
||||
<option value="13">13</option>
|
||||
<option value="14">14</option>
|
||||
<option value="15">15</option>
|
||||
<option value="16">16</option>
|
||||
<option value="17">17</option>
|
||||
<option value="18">18</option>
|
||||
<option value="19">19</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>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 </p>
|
||||
<p>The datasource is a native select element. Supports optgroups.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
demos/selectmenu/images/24-podcast-square.png
Normal file
BIN
demos/selectmenu/images/24-podcast-square.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 681 B |
BIN
demos/selectmenu/images/24-rss-square.png
Normal file
BIN
demos/selectmenu/images/24-rss-square.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 594 B |
BIN
demos/selectmenu/images/24-video-square.png
Normal file
BIN
demos/selectmenu/images/24-video-square.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 649 B |
16
demos/selectmenu/index.html
Normal file
16
demos/selectmenu/index.html
Normal file
@ -0,0 +1,16 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery UI Selectmenu Demos</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="custom_render.html">Custom item rendering functionality</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
30
tests/unit/selectmenu/all.html
Normal file
30
tests/unit/selectmenu/all.html
Normal file
@ -0,0 +1,30 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Selectmenu Test Suite</title>
|
||||
|
||||
<script src="../../../jquery-1.9.1.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="../../../external/qunit.css">
|
||||
<link rel="stylesheet" href="../qunit-composite.css">
|
||||
<script src="../../../external/qunit.js"></script>
|
||||
<script src="../qunit-composite.js"></script>
|
||||
<script src="../subsuite.js"></script>
|
||||
|
||||
<script>
|
||||
testAllVersions( "selectmenu" );
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 id="qunit-header">jQuery UI Selectmenu Test Suite</h1>
|
||||
<h2 id="qunit-banner"></h2>
|
||||
<div id="qunit-testrunner-toolbar"></div>
|
||||
<h2 id="qunit-userAgent"></h2>
|
||||
<ol id="qunit-tests"></ol>
|
||||
<div id="qunit-fixture">
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
91
tests/unit/selectmenu/selectmenu.html
Normal file
91
tests/unit/selectmenu/selectmenu.html
Normal file
@ -0,0 +1,91 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Selectmenu Test Suite</title>
|
||||
|
||||
<script src="../../jquery.js"></script>
|
||||
<link rel="stylesheet" href="../../../external/qunit.css">
|
||||
<script src="../../../external/qunit.js"></script>
|
||||
<script src="../../jquery.simulate.js"></script>
|
||||
<script src="../testsuite.js"></script>
|
||||
<script>
|
||||
TestHelpers.loadResources({
|
||||
css: [ "ui.core", "ui.menu" , "ui.selectmenu" ],
|
||||
js: [
|
||||
"ui/jquery.ui.core.js",
|
||||
"ui/jquery.ui.widget.js",
|
||||
"ui/jquery.ui.position.js",
|
||||
"ui/jquery.ui.menu.js",
|
||||
"ui/jquery.ui.selectmenu.js"
|
||||
]
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="selectmenu_common.js"></script>
|
||||
<script src="selectmenu_core.js"></script>
|
||||
<script src="selectmenu_events.js"></script>
|
||||
<script src="selectmenu_methods.js"></script>
|
||||
<script src="selectmenu_options.js"></script>
|
||||
|
||||
<script src="../swarminject.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 id="qunit-header">jQuery UI Selectmenu Test Suite</h1>
|
||||
<h2 id="qunit-banner"></h2>
|
||||
<div id="qunit-testrunner-toolbar"></div>
|
||||
<h2 id="qunit-userAgent"></h2>
|
||||
<ol id="qunit-tests"></ol>
|
||||
<div id="qunit-fixture">
|
||||
<div id="selectmenu-wrap1" class="selectmenu-wrap"></div>
|
||||
|
||||
<div id="selectmenu-wrap2" class="selectmenu-wrap">
|
||||
<label for="speed">Select a speed:</label>
|
||||
<select name="speed" id="speed">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<label for="number">Select a number:</label>
|
||||
<select name="number" id="number">
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected="selected">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
<option value="10">10</option>
|
||||
<option value="11">11</option>
|
||||
<option value="12">12</option>
|
||||
<option value="13">13</option>
|
||||
<option value="14">14</option>
|
||||
<option value="15">15</option>
|
||||
<option value="16">16</option>
|
||||
<option value="17">17</option>
|
||||
<option value="18">18</option>
|
||||
<option value="19">19</option>
|
||||
</select>
|
||||
|
||||
<label for="files">Select a file:</label>
|
||||
<select name="files" id="files">
|
||||
<optgroup label="Scripts">
|
||||
<option value="jquery">jQuery.js</option>
|
||||
<option value="jqueryui">ui.jQuery.js</option>
|
||||
</optgroup>
|
||||
<optgroup label="Other files">
|
||||
<option value="somefile">Some unknown file</option>
|
||||
<option value="someotherfile">Some other file</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
23
tests/unit/selectmenu/selectmenu_common.js
Normal file
23
tests/unit/selectmenu/selectmenu_common.js
Normal file
@ -0,0 +1,23 @@
|
||||
TestHelpers.commonWidgetTests( "selectmenu", {
|
||||
defaults: {
|
||||
appendTo: null,
|
||||
disabled: false,
|
||||
icons: {
|
||||
button: "ui-icon-triangle-1-s"
|
||||
},
|
||||
position: {
|
||||
my: "left top",
|
||||
at: "left bottom",
|
||||
collision: "none"
|
||||
},
|
||||
width: null,
|
||||
|
||||
// callbacks
|
||||
create: null,
|
||||
change: null,
|
||||
close: null,
|
||||
focus: null,
|
||||
open: null,
|
||||
select: null
|
||||
}
|
||||
});
|
||||
235
tests/unit/selectmenu/selectmenu_core.js
Normal file
235
tests/unit/selectmenu/selectmenu_core.js
Normal file
@ -0,0 +1,235 @@
|
||||
(function( $ ) {
|
||||
|
||||
module( "selectmenu: core" );
|
||||
|
||||
asyncTest( "accessibility", function() {
|
||||
var links,
|
||||
element = $( "#speed" ).selectmenu(),
|
||||
button = element.selectmenu( "widget" ),
|
||||
menu = element.selectmenu( "menuWidget" );
|
||||
|
||||
button.simulate( "focus" );
|
||||
links = menu.find( "li.ui-menu-item" );
|
||||
|
||||
expect( 12 + links.length * 2 );
|
||||
|
||||
setTimeout(function() {
|
||||
equal( button.attr( "role" ), "combobox", "button link role" );
|
||||
equal( button.attr( "aria-haspopup" ), "true", "button link aria-haspopup" );
|
||||
equal( button.attr( "aria-expanded" ), "false", "button link aria-expanded" );
|
||||
equal( button.attr( "aria-autocomplete" ), "list", "button link aria-autocomplete" );
|
||||
equal( button.attr( "aria-owns" ), menu.attr("id"), "button link aria-owns" );
|
||||
equal(
|
||||
button.attr( "aria-labelledby" ),
|
||||
links.eq( element[ 0 ].selectedIndex ).attr( "id" ),
|
||||
"button link aria-labelledby"
|
||||
);
|
||||
equal( button.attr( "tabindex" ), 0, "button link tabindex" );
|
||||
|
||||
equal( menu.attr( "role" ), "listbox", "menu role" );
|
||||
equal( menu.attr( "aria-labelledby" ), button.attr( "id" ), "menu aria-labelledby" );
|
||||
equal( menu.attr( "aria-hidden" ), "true", "menu aria-hidden" );
|
||||
equal( menu.attr( "tabindex" ), 0, "menu tabindex" );
|
||||
equal(
|
||||
menu.attr( "aria-activedescendant" ),
|
||||
links.eq( element[ 0 ].selectedIndex ).attr( "id" ),
|
||||
"menu aria-activedescendant"
|
||||
);
|
||||
$.each( links, function( index ){
|
||||
equal( $( this ).attr( "role" ), "option", "menu link #" + index +" role" );
|
||||
equal( $( this ).attr( "tabindex" ), -1, "menu link #" + index +" tabindex" );
|
||||
});
|
||||
start();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
$.each([
|
||||
{
|
||||
type: "default",
|
||||
selector: "#speed"
|
||||
},
|
||||
{
|
||||
type: "optgroups",
|
||||
selector: "#files"
|
||||
}
|
||||
], function( i, settings ) {
|
||||
asyncTest( "state synchronization - after keydown on button - " + settings.type, function () {
|
||||
expect( 4 );
|
||||
|
||||
var links,
|
||||
element = $( settings.selector ).selectmenu(),
|
||||
button = element.selectmenu( "widget" ),
|
||||
menu = element.selectmenu( "menuWidget" ),
|
||||
selected = element.find( "option:selected" );
|
||||
|
||||
button.simulate( "focus" );
|
||||
setTimeout(function() {
|
||||
links = menu.find("li.ui-menu-item");
|
||||
|
||||
button.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
|
||||
equal(
|
||||
menu.attr( "aria-activedescendant" ),
|
||||
links.eq( element[ 0 ].selectedIndex ).attr( "id" ),
|
||||
"menu aria-activedescendant"
|
||||
);
|
||||
equal(
|
||||
button.attr( "aria-activedescendant" ),
|
||||
links.eq( element[ 0 ].selectedIndex ).attr( "id" ),
|
||||
"button aria-activedescendant"
|
||||
);
|
||||
equal(
|
||||
element.find( "option:selected" ).val(),
|
||||
selected.next( "option" ).val() ,
|
||||
"original select state"
|
||||
);
|
||||
equal( button.text(), selected.next( "option" ).text(), "button text" );
|
||||
start();
|
||||
}, 1 );
|
||||
});
|
||||
|
||||
asyncTest( "state synchronization - after click on item - " + settings.type, function () {
|
||||
expect( 4 );
|
||||
|
||||
var links,
|
||||
element = $( settings.selector ).selectmenu(),
|
||||
button = element.selectmenu( "widget" ),
|
||||
menu = element.selectmenu( "menuWidget" );
|
||||
|
||||
button.simulate( "focus" );
|
||||
setTimeout(function() {
|
||||
links = menu.find("li.ui-menu-item");
|
||||
|
||||
button.trigger( "click" );
|
||||
menu.find( "li" ).last().simulate( "mouseover" ).trigger( "click" );
|
||||
equal(
|
||||
menu.attr( "aria-activedescendant" ),
|
||||
links.eq( element[ 0 ].selectedIndex ).attr( "id" ),
|
||||
"menu aria-activedescendant"
|
||||
);
|
||||
equal(
|
||||
button.attr( "aria-activedescendant" ),
|
||||
links.eq( element[ 0 ].selectedIndex ).attr( "id" ),
|
||||
"button aria-activedescendant"
|
||||
);
|
||||
equal(
|
||||
element.find( "option:selected" ).val(),
|
||||
element.find( "option" ).last().val(),
|
||||
"original select state"
|
||||
);
|
||||
equal( button.text(), element.find( "option" ).last().text(), "button text" );
|
||||
start();
|
||||
}, 1 );
|
||||
});
|
||||
|
||||
asyncTest( "state synchronization - after focus item and keydown on button - " + settings.type, function () {
|
||||
expect( 4 );
|
||||
|
||||
var links,
|
||||
element = $( settings.selector ).selectmenu(),
|
||||
button = element.selectmenu( "widget" ),
|
||||
menu = element.selectmenu( "menuWidget" ),
|
||||
options = element.find( "option" );
|
||||
|
||||
// init menu
|
||||
button.simulate( "focus" );
|
||||
|
||||
setTimeout(function() {
|
||||
links = menu.find( "li.ui-menu-item" );
|
||||
// open menu and click first item
|
||||
button.trigger( "click" );
|
||||
links.first().simulate( "mouseover" ).trigger( "click" );
|
||||
// open menu again and hover item
|
||||
button.trigger( "click" );
|
||||
links.eq( 3 ).simulate( "mouseover" );
|
||||
// close and use keyboard control on button
|
||||
button.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } );
|
||||
button.simulate( "focus" );
|
||||
setTimeout(function() {
|
||||
button.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
|
||||
|
||||
equal( menu.attr( "aria-activedescendant" ), links.eq( 1 ).attr( "id" ), "menu aria-activedescendant" );
|
||||
equal( button.attr( "aria-activedescendant" ), links.eq( 1 ).attr( "id" ), "button aria-activedescendant" );
|
||||
equal( element.find( "option:selected" ).val(), options.eq( 1 ).val() , "original select state" );
|
||||
equal( button.text(), options.eq( 1 ).text(), "button text" );
|
||||
start();
|
||||
}, 1 );
|
||||
}, 1 );
|
||||
});
|
||||
|
||||
asyncTest( "item looping - " + settings.type, function () {
|
||||
expect( 2 );
|
||||
|
||||
var links,
|
||||
element = $( settings.selector ).selectmenu(),
|
||||
button = element.selectmenu( "widget" ),
|
||||
menu = element.selectmenu( "menuWidget" );
|
||||
|
||||
// init menu
|
||||
button.simulate( "focus" );
|
||||
|
||||
setTimeout(function() {
|
||||
links = menu.find( "li.ui-menu-item" );
|
||||
|
||||
button.trigger( "click" );
|
||||
links.first().simulate( "mouseover" ).trigger( "click" );
|
||||
button.simulate( "keydown", { keyCode: $.ui.keyCode.UP } );
|
||||
equal( element[ 0 ].selectedIndex, 0, "No looping beyond first item" );
|
||||
|
||||
button.trigger( "click" );
|
||||
links.last().simulate( "mouseover" ).trigger( "click" );
|
||||
button.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
|
||||
equal( element[ 0 ].selectedIndex + 1, links.length, "No looping behind last item" );
|
||||
start();
|
||||
}, 1 );
|
||||
});
|
||||
|
||||
asyncTest( "item focus and active state - " + settings.type, function () {
|
||||
expect( 8 );
|
||||
|
||||
var element = $( settings.selector ).selectmenu(),
|
||||
button = element.selectmenu( "widget" ),
|
||||
menu = element.selectmenu( "menuWidget" ),
|
||||
links, focusedItem, activeItem;
|
||||
|
||||
// init menu
|
||||
button.simulate( "focus" );
|
||||
|
||||
setTimeout(function() {
|
||||
links = menu.find( "li.ui-menu-item" );
|
||||
|
||||
button.trigger( "click" );
|
||||
setTimeout(function() {
|
||||
checkItemClasses();
|
||||
|
||||
links.eq( 3 ).simulate( "mouseover" ).trigger( "click" );
|
||||
|
||||
button.trigger( "click" );
|
||||
links.eq( 2 ).simulate( "mouseover" );
|
||||
$( document ).trigger( "click" );
|
||||
|
||||
button.trigger( "click" );
|
||||
links.eq( 1 ).simulate( "mouseover" );
|
||||
$( document ).trigger( "click" );
|
||||
|
||||
button.trigger( "click" );
|
||||
setTimeout(function() {
|
||||
checkItemClasses();
|
||||
start();
|
||||
}, 350 );
|
||||
}, 350 );
|
||||
}, 1 );
|
||||
|
||||
function checkItemClasses() {
|
||||
focusedItem = menu.find( "li.ui-state-focus" );
|
||||
equal( focusedItem.length, 1, "only one item has ui-state-focus class" );
|
||||
equal( focusedItem.attr( "id" ), links.eq( element[ 0 ].selectedIndex ).attr( "id" ), "selected item has ui-state-focus class" );
|
||||
|
||||
activeItem = menu.find( "li.ui-state-active" );
|
||||
equal( activeItem.length, 1, "only one item has ui-state-active class" );
|
||||
equal( activeItem.attr( "id" ), links.eq( element[ 0 ].selectedIndex ).attr( "id" ), "selected item has ui-state-active class" );
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
})( jQuery );
|
||||
135
tests/unit/selectmenu/selectmenu_events.js
Normal file
135
tests/unit/selectmenu/selectmenu_events.js
Normal file
@ -0,0 +1,135 @@
|
||||
(function ( $ ) {
|
||||
|
||||
module( "selectmenu: events", {
|
||||
setup: function () {
|
||||
this.element = $( "#speed" );
|
||||
}
|
||||
});
|
||||
|
||||
asyncTest( "change", function () {
|
||||
expect( 5 );
|
||||
|
||||
var optionIndex = 1,
|
||||
button, menu, options;
|
||||
|
||||
this.element.selectmenu({
|
||||
change: function ( event, ui ) {
|
||||
ok( event, "change event fired on change" );
|
||||
equal( event.type, "selectmenuchange", "event type set to selectmenuchange" );
|
||||
equal( ui.item.index, optionIndex, "ui.item.index contains correct option index" );
|
||||
equal( ui.item.element[ 0 ], options.eq( optionIndex )[ 0 ], "ui.item.element contains original option element" );
|
||||
equal( ui.item.value, options.eq( optionIndex ).text(), "ui.item.value property updated correctly" );
|
||||
}
|
||||
});
|
||||
|
||||
button = this.element.selectmenu( "widget" );
|
||||
menu = this.element.selectmenu( "menuWidget" ).parent();
|
||||
options = this.element.find( "option" );
|
||||
|
||||
button.simulate( "focus" );
|
||||
|
||||
setTimeout(function() {
|
||||
button.trigger( "click" );
|
||||
menu.find( "li" ).eq( optionIndex ).simulate( "mouseover" ).trigger( "click" );
|
||||
start();
|
||||
}, 1 );
|
||||
});
|
||||
|
||||
|
||||
test( "close", function () {
|
||||
expect( 4 );
|
||||
|
||||
this.element.selectmenu({
|
||||
close: function ( event ) {
|
||||
ok( event, "close event fired on close" );
|
||||
equal( event.type, "selectmenuclose", "event type set to selectmenuclose" );
|
||||
}
|
||||
});
|
||||
|
||||
this.element.selectmenu( "open" ).selectmenu( "close" );
|
||||
|
||||
this.element.selectmenu( "open" );
|
||||
$( "body" ).trigger( "mousedown" );
|
||||
});
|
||||
|
||||
|
||||
asyncTest( "focus", function () {
|
||||
expect( 12 );
|
||||
|
||||
var that = this,
|
||||
optionIndex = this.element[ 0 ].selectedIndex + 1,
|
||||
options = this.element.find( "option" ),
|
||||
button, menu, links;
|
||||
|
||||
this.element.selectmenu({
|
||||
focus: function ( event, ui ) {
|
||||
ok( event, "focus event fired on element #" + optionIndex + " mouseover" );
|
||||
equal( event.type, "selectmenufocus", "event type set to selectmenufocus" );
|
||||
equal( ui.item.index, optionIndex, "ui.item.index contains correct option index" );
|
||||
equal( ui.item.element[ 0 ], options.eq( optionIndex )[ 0 ], "ui.item.element contains original option element" );
|
||||
}
|
||||
});
|
||||
|
||||
button = this.element.selectmenu( "widget" );
|
||||
menu = this.element.selectmenu( "menuWidget" );
|
||||
|
||||
button.simulate( "focus" );
|
||||
|
||||
setTimeout(function() {
|
||||
button.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
|
||||
|
||||
button.trigger( "click" );
|
||||
links = menu.find( "li.ui-menu-item" );
|
||||
optionIndex = 0;
|
||||
links.eq( optionIndex ).simulate( "mouseover" );
|
||||
optionIndex += 1;
|
||||
links.eq( optionIndex ).simulate( "mouseover" );
|
||||
|
||||
// this tests for unwanted, additional focus event on close
|
||||
that.element.selectmenu( "close" );
|
||||
start();
|
||||
}, 1 );
|
||||
});
|
||||
|
||||
|
||||
test( "open", function () {
|
||||
expect( 2 );
|
||||
|
||||
this.element.selectmenu({
|
||||
open: function ( event ) {
|
||||
ok( event, "open event fired on open" );
|
||||
equal( event.type, "selectmenuopen", "event type set to selectmenuopen" );
|
||||
}
|
||||
});
|
||||
|
||||
this.element.selectmenu( "open" );
|
||||
});
|
||||
|
||||
|
||||
asyncTest( "select", function () {
|
||||
expect( 4 );
|
||||
|
||||
this.element.selectmenu({
|
||||
select: function ( event, ui ) {
|
||||
ok( event, "select event fired on item select" );
|
||||
equal( event.type, "selectmenuselect", "event type set to selectmenuselect" );
|
||||
equal( ui.item.index, optionIndex, "ui.item.index contains correct option index" );
|
||||
equal( ui.item.element[ 0 ], options.eq( optionIndex )[ 0 ], "ui.item.element contains original option element" );
|
||||
}
|
||||
});
|
||||
|
||||
var button = this.element.selectmenu( "widget" ),
|
||||
menu = this.element.selectmenu( "menuWidget" ).parent(),
|
||||
options = this.element.find( "option" ),
|
||||
optionIndex = 1;
|
||||
|
||||
button.simulate( "focus" );
|
||||
|
||||
setTimeout(function() {
|
||||
button.trigger( "click" );
|
||||
menu.find( "li" ).eq( optionIndex ).simulate( "mouseover" ).trigger( "click" );
|
||||
start();
|
||||
}, 1 );
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
169
tests/unit/selectmenu/selectmenu_methods.js
Normal file
169
tests/unit/selectmenu/selectmenu_methods.js
Normal file
@ -0,0 +1,169 @@
|
||||
(function( $ ) {
|
||||
|
||||
module( "selectmenu: methods" );
|
||||
|
||||
test( "destroy", function() {
|
||||
expect( 1 );
|
||||
domEqual( "#speed", function() {
|
||||
$( "#speed" ).selectmenu().selectmenu( "destroy" );
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
test( "open / close", function() {
|
||||
expect( 4 );
|
||||
|
||||
var element = $( "#speed" ).selectmenu(),
|
||||
menu = element.selectmenu( "menuWidget" );
|
||||
|
||||
element.selectmenu( "open" );
|
||||
ok( menu.is( ":visible" ), "open: menu visible" );
|
||||
equal( menu.attr( "aria-hidden" ), "false", "open: menu aria-disabled" );
|
||||
|
||||
element.selectmenu( "close" );
|
||||
ok( menu.is( ":hidden" ), "close: menu hidden" );
|
||||
equal( menu.attr( "aria-hidden" ), "true", "close: menu aria-disabled" );
|
||||
});
|
||||
|
||||
|
||||
test( "enable / disable", function () {
|
||||
expect(10);
|
||||
|
||||
var element = $( "#speed" ).selectmenu(),
|
||||
button = element.selectmenu( "widget" ),
|
||||
menu = element.selectmenu( "menuWidget" );
|
||||
|
||||
element.selectmenu( "disable" );
|
||||
ok( element.selectmenu( "option", "disabled" ), "disable: widget option" );
|
||||
equal( element.attr( "disabled" ), "disabled", "disable: native select disabled" );
|
||||
equal( button.attr( "aria-disabled" ), "true", "disable: button wrapper ARIA" );
|
||||
equal( button.attr( "tabindex" ), -1, "disable: button tabindex" );
|
||||
equal( menu.attr( "aria-disabled" ), "true", "disable: menu wrapper ARIA" );
|
||||
|
||||
element.selectmenu( "enable" );
|
||||
ok( !element.selectmenu( "option", "disabled" ), "enable: widget option" );
|
||||
equal( element.attr( "disabled" ), undefined, "enable: native select disabled" );
|
||||
equal( button.attr( "aria-disabled" ), "false", "enable: button wrapper ARIA" );
|
||||
equal( button.attr( "tabindex" ), 0, "enable: button tabindex" );
|
||||
equal( menu.attr( "aria-disabled" ), "false", "enable: menu wrapper ARIA" );
|
||||
});
|
||||
|
||||
|
||||
test( "refresh - structure", function () {
|
||||
expect( 3 );
|
||||
|
||||
var element = $( "#speed" ).selectmenu(),
|
||||
menu = element.selectmenu( "menuWidget" ).parent();
|
||||
|
||||
element.find( "option" ).eq( 2 ).remove();
|
||||
element.find( "option" ).eq( 3 ).remove();
|
||||
element.append( "<option value=\"added_option\">Added option</option>" );
|
||||
element.find( "option" ).first()
|
||||
.attr( "value", "changed_value" )
|
||||
.text( "Changed value" );
|
||||
element.selectmenu( "refresh" );
|
||||
|
||||
equal( element.find( "option" ).length, menu.find( "li" ).not( ".ui-selectmenu-optgroup" ).length, "menu item length" );
|
||||
equal( element.find( "option" ).last().text(), menu.find( "li" ).not( ".ui-selectmenu-optgroup" ).last().text(), "added item" );
|
||||
equal( element.find( "option" ).first().text(), menu.find( "li" ).not( ".ui-selectmenu-optgroup" ).first().text(), "changed item" );
|
||||
});
|
||||
|
||||
asyncTest( "refresh - change selected option", function () {
|
||||
expect( 4 );
|
||||
|
||||
var element = $( "#speed" ).selectmenu(),
|
||||
button = element.selectmenu( "widget" );
|
||||
|
||||
equal( element.find( "option:selected" ).text(), button.text(), "button text after init" );
|
||||
|
||||
button.simulate( "focus" );
|
||||
|
||||
setTimeout(function() {
|
||||
equal( element.find( "option:selected" ).text(), button.text(), "button text after focus" );
|
||||
|
||||
element[ 0 ].selectedIndex = 0;
|
||||
element.selectmenu( "refresh" );
|
||||
equal( element.find( "option:selected" ).text(), button.text(), "button text after changing selected option" );
|
||||
|
||||
element.find( "option" ).removeAttr( "selected" );
|
||||
element.prepend( "<option selected value=\"selected_option\">Selected option</option>" );
|
||||
element.selectmenu( "refresh" );
|
||||
equal( element.find( "option:selected" ).text(), button.text(), "button text after adding selected option" );
|
||||
|
||||
start();
|
||||
}, 1 );
|
||||
});
|
||||
|
||||
|
||||
test( "refresh - disabled select", function () {
|
||||
expect( 4 );
|
||||
|
||||
var element = $( "#speed" ).selectmenu(),
|
||||
button = element.selectmenu( "widget" ),
|
||||
menu = element.selectmenu( "menuWidget" );
|
||||
|
||||
element.attr( "disabled", "disabled" );
|
||||
element.selectmenu( "refresh" );
|
||||
|
||||
ok( element.selectmenu( "option", "disabled" ), "widget option" );
|
||||
equal( button.attr( "aria-disabled" ), "true", "button wrapper ARIA" );
|
||||
equal( button.attr( "tabindex" ), -1, "button tabindex" );
|
||||
equal( menu.attr( "aria-disabled" ), "true", "menu wrapper ARIA" );
|
||||
});
|
||||
|
||||
|
||||
test( "refresh - disabled option", function () {
|
||||
expect(1);
|
||||
|
||||
var disabledItem,
|
||||
element = $( "#speed" ).selectmenu(),
|
||||
menu = element.selectmenu( "menuWidget" ).parent();
|
||||
|
||||
element.attr( "disabled", "disabled" );
|
||||
element.find( "option" ).eq( 2 ).attr( "disabled", "disabled" );
|
||||
element.selectmenu( "refresh" );
|
||||
|
||||
disabledItem = menu.find( "li" ).not( ".ui-selectmenu-optgroup" ).eq(2);
|
||||
ok( disabledItem.hasClass( "ui-state-disabled" ), "class" );
|
||||
});
|
||||
|
||||
|
||||
test( "refresh - disabled optgroup", function () {
|
||||
|
||||
var i, item,
|
||||
element = $( "#files" ).selectmenu(),
|
||||
menu = element.selectmenu( "menuWidget" ).parent(),
|
||||
originalDisabledOptgroup = element.find( "optgroup" ).first(),
|
||||
originalDisabledOptions = originalDisabledOptgroup.find( "option" );
|
||||
|
||||
expect( 2 + originalDisabledOptions.length );
|
||||
|
||||
originalDisabledOptgroup.attr( "disabled", "disabled" );
|
||||
element.selectmenu( "refresh" );
|
||||
|
||||
item = menu.find( "li.ui-selectmenu-optgroup" ).first();
|
||||
ok( item.hasClass( "ui-state-disabled" ), "class" );
|
||||
|
||||
equal( menu.find( "li" ).not( ".ui-selectmenu-optgroup" ).filter( ".ui-state-disabled" ).length, originalDisabledOptions.length, "disabled options" );
|
||||
for ( i = 0; i < originalDisabledOptions.length; i++ ) {
|
||||
item = item.next( "li" );
|
||||
ok( item.hasClass( "ui-state-disabled" ), "item #" + i + ": class" );
|
||||
}
|
||||
});
|
||||
|
||||
test( "widget and menuWidget", function() {
|
||||
expect( 4 );
|
||||
var element = $( "#speed" ).selectmenu(),
|
||||
button = element.selectmenu( "widget" ),
|
||||
menu = element.selectmenu( "menuWidget" );
|
||||
|
||||
element.selectmenu( "refresh" );
|
||||
|
||||
equal( button.length, 1, "button: one element" );
|
||||
ok( button.is( ".ui-selectmenu-button" ), "button: class" );
|
||||
|
||||
equal( menu.length, 1, "Menu Widget: one element" );
|
||||
ok( menu.is( "ul.ui-menu" ), "Menu Widget: element and class" );
|
||||
});
|
||||
|
||||
})( jQuery );
|
||||
60
tests/unit/selectmenu/selectmenu_options.js
Normal file
60
tests/unit/selectmenu/selectmenu_options.js
Normal file
@ -0,0 +1,60 @@
|
||||
(function ( $ ) {
|
||||
|
||||
module( "selectmenu: options" );
|
||||
|
||||
test( "appendTo another element", function () {
|
||||
expect( 8 );
|
||||
|
||||
var detached = $( "<div>" ),
|
||||
element = $( "#speed" ).selectmenu();
|
||||
equal( element.selectmenu( "menuWidget" ).parent().parent()[ 0 ], document.body, "defaults to body" );
|
||||
element.selectmenu( "destroy" );
|
||||
|
||||
element.selectmenu({
|
||||
appendTo: ".selectmenu-wrap"
|
||||
});
|
||||
equal( element.selectmenu( "menuWidget" ).parent().parent()[ 0 ], $( "#selectmenu-wrap1" )[ 0 ], "first found element" );
|
||||
equal( $( "#selectmenu-wrap2 .ui-selectmenu" ).length, 0, "only appends to one element" );
|
||||
element.selectmenu( "destroy" );
|
||||
|
||||
$( "#selectmenu-wrap2" ).addClass( "ui-front" );
|
||||
element.selectmenu();
|
||||
equal( element.selectmenu( "menuWidget" ).parent().parent()[ 0 ], $( "#selectmenu-wrap2" )[ 0 ], "null, inside .ui-front" );
|
||||
element.selectmenu( "destroy" );
|
||||
$( "#selectmenu-wrap2" ).removeClass( "ui-front" );
|
||||
|
||||
element.selectmenu().selectmenu( "option", "appendTo", "#selectmenu-wrap1" );
|
||||
equal( element.selectmenu( "menuWidget" ).parent().parent()[ 0 ], $( "#selectmenu-wrap1" )[ 0 ], "modified after init" );
|
||||
element.selectmenu( "destroy" );
|
||||
|
||||
element.selectmenu({
|
||||
appendTo: detached
|
||||
});
|
||||
equal( element.selectmenu( "menuWidget" ).parent().parent()[ 0 ], detached[ 0 ], "detached jQuery object" );
|
||||
element.selectmenu( "destroy" );
|
||||
|
||||
element.selectmenu({
|
||||
appendTo: detached[ 0 ]
|
||||
});
|
||||
equal( element.selectmenu( "menuWidget" ).parent().parent()[ 0 ], detached[ 0 ], "detached DOM element" );
|
||||
element.selectmenu( "destroy" );
|
||||
|
||||
element.selectmenu().selectmenu( "option", "appendTo", detached );
|
||||
equal( element.selectmenu( "menuWidget" ).parent().parent()[ 0 ], detached[ 0 ], "detached DOM element via option()" );
|
||||
element.selectmenu( "destroy" );
|
||||
});
|
||||
|
||||
|
||||
test( "CSS styles", function () {
|
||||
expect( 2 );
|
||||
|
||||
var element = $( "#speed" ).selectmenu(),
|
||||
button = element.selectmenu( "widget" ),
|
||||
menu = element.selectmenu( "menuWidget" );
|
||||
|
||||
element.selectmenu( "open" );
|
||||
ok( button.hasClass( "ui-corner-top" ) && !button.hasClass( "ui-corner-all" ) && button.find( "span.ui-icon" ).hasClass( "ui-icon-triangle-1-s" ), "button styles dropdown" );
|
||||
ok( menu.hasClass( "ui-corner-bottom" ) && !menu.hasClass( "ui-corner-all" ), "menu styles dropdown" );
|
||||
});
|
||||
|
||||
})( jQuery );
|
||||
@ -22,8 +22,10 @@
|
||||
<script src="../../../ui/jquery.ui.slider.js"></script>
|
||||
<script src="../../../ui/jquery.ui.tabs.js"></script>
|
||||
<script src="../../../ui/jquery.ui.tooltip.js"></script>
|
||||
<script src="../../../ui/jquery.ui.selectmenu.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#dialog" ).dialog();
|
||||
$( "[title]" ).tooltip();
|
||||
$( "#accordion" ).accordion();
|
||||
$( "#autocomplete" ).autocomplete({
|
||||
@ -45,7 +47,7 @@
|
||||
}
|
||||
});
|
||||
$( "#tabs" ).tabs();
|
||||
$( "#dialog" ).dialog();
|
||||
$( '#select' ).selectmenu();
|
||||
$( "#dialog2" ).dialog({
|
||||
autoOpen: false,
|
||||
width: 100,
|
||||
@ -92,6 +94,13 @@
|
||||
<div id="tabs-2">Phasellus mattis tincidunt nibh.</div>
|
||||
<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
|
||||
</div>
|
||||
<select id="select">
|
||||
<option>Slower</option>
|
||||
<option>Slow</option>
|
||||
<option>Medium</option>
|
||||
<option>Fast</option>
|
||||
<option>Faster</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="dialog2">
|
||||
Yay, another dialog.
|
||||
|
||||
53
tests/visual/compound/tabs_selectmenu.html
Normal file
53
tests/visual/compound/tabs_selectmenu.html
Normal file
@ -0,0 +1,53 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Compound Visual Test : Selectmenu in Tabs</title>
|
||||
<link rel="stylesheet" href="../visual.css">
|
||||
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../../jquery-1.10.2.js"></script>
|
||||
<script src="../../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../../ui/jquery.ui.menu.js"></script>
|
||||
<script src="../../../ui/jquery.ui.selectmenu.js"></script>
|
||||
<script src="../../../ui/jquery.ui.tabs.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#tabs" ).tabs();
|
||||
$( "select" ).selectmenu();
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
select { width: 200px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="tabs">
|
||||
<ul>
|
||||
<li><a href="#tabs-1">First</a></li>
|
||||
<li><a href="#tabs-2">Second</a></li>
|
||||
</ul>
|
||||
<div id="tabs-1">
|
||||
<select>
|
||||
<option>Slower</option>
|
||||
<option>Slow</option>
|
||||
<option>Medium</option>
|
||||
<option>Fast</option>
|
||||
<option>Faster</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="tabs-2">
|
||||
<select>
|
||||
<option>Slower</option>
|
||||
<option>Slow</option>
|
||||
<option>Medium</option>
|
||||
<option>Fast</option>
|
||||
<option>Faster</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
248
tests/visual/selectmenu/selectmenu.html
Normal file
248
tests/visual/selectmenu/selectmenu.html
Normal file
@ -0,0 +1,248 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Selectmenu Visual Test: Default</title>
|
||||
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../../jquery-1.10.2.js"></script>
|
||||
<script src="../../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../../ui/jquery.ui.menu.js"></script>
|
||||
<script src="../../../ui/jquery.ui.selectmenu.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
var log = $("#log"),
|
||||
index = 0,
|
||||
text;
|
||||
|
||||
function logger( event, ui ) {
|
||||
text = "#" + index++ + " " + event.type.replace("selectmenu","");
|
||||
if ( ui.item ) {
|
||||
text += ": " + ui.item.index + " => " + ui.item.label;
|
||||
}
|
||||
$( "<p>" ).text( text ).prependTo( "#log" );
|
||||
}
|
||||
|
||||
/* events */
|
||||
var eventsSelectmenu = $('#control select').selectmenu({
|
||||
open: logger,
|
||||
close: logger,
|
||||
focus : logger,
|
||||
select: logger,
|
||||
change: logger
|
||||
});
|
||||
eventsSelectmenu.show();
|
||||
|
||||
$("#destroy").click( function() {
|
||||
eventsSelectmenu.selectmenu("destroy");
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#refresh_add").click( function() {
|
||||
eventsSelectmenu.append('<option value="fastsound">Speed of light</option>');
|
||||
eventsSelectmenu.selectmenu("refresh");
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#refresh_selected").click( function() {
|
||||
eventsSelectmenu[0].selectedIndex = 0;
|
||||
eventsSelectmenu.selectmenu("refresh");
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#refresh").click( function() {
|
||||
eventsSelectmenu.selectmenu("refresh");
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#open").click( function() {
|
||||
eventsSelectmenu.selectmenu("open");
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#close").click( function() {
|
||||
eventsSelectmenu.selectmenu("close");
|
||||
return false;
|
||||
});
|
||||
|
||||
/* disabled */
|
||||
$('#disabled1, #disabled2, #disabled3').selectmenu();
|
||||
var disabled4 = $('#disabled4').selectmenu();
|
||||
|
||||
$("#disable_select").on("click", function() {
|
||||
if (disable_select) {
|
||||
disable_select = false;
|
||||
disabled4.selectmenu("disable");
|
||||
} else {
|
||||
disable_select = true;
|
||||
disabled4.removeAttr("disabled");
|
||||
}
|
||||
disabled4.selectmenu("refresh");
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#disable_option").on("click", function() {
|
||||
if (disable_option) {
|
||||
disable_option = false;
|
||||
disabled4.find("option:eq(0)").attr("disabled", "disabled");
|
||||
} else {
|
||||
disable_option = true;
|
||||
disabled4.find("option:eq(0)").removeAttr("disabled");
|
||||
}
|
||||
disabled4.selectmenu("refresh");
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#disable_optgroup").on("click", function() {
|
||||
if (disable_optgroup) {
|
||||
disable_optgroup = false;
|
||||
disabled4.find("optgroup:eq(0)").attr("disabled", "disabled");
|
||||
} else {
|
||||
disable_optgroup = true;
|
||||
disabled4.find("optgroup:eq(0)").removeAttr("disabled");
|
||||
}
|
||||
disabled4.selectmenu("refresh");
|
||||
return false;
|
||||
});
|
||||
|
||||
/* empty */
|
||||
$('.empty select').selectmenu();
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body { font-size:62.5%; }
|
||||
fieldset { border: 0; }
|
||||
label { display: block; }
|
||||
select { width: 200px; }
|
||||
|
||||
.ui-selectmenu-button { display: block; margin-bottom: 1em;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="control">
|
||||
<h2>Event logging tests</h2>
|
||||
<form action="#">
|
||||
<button id="open">Open</button>
|
||||
<button id="close">Close</button>
|
||||
<button id="refresh_add">Add item</button>
|
||||
<button id="refresh_selected">Change to first item</button>
|
||||
<button id="refresh">Refresh</button>
|
||||
<button id="destroy">Destroy</button>
|
||||
<fieldset>
|
||||
<select>
|
||||
<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>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<form action="#">
|
||||
<h2>Disabled tests</h2>
|
||||
<fieldset>
|
||||
<label for="disabled1">Disabled select</label>
|
||||
<select disabled="disabled" name="disabled1" id="disabled1">
|
||||
<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>
|
||||
|
||||
<label for="disabled2">Disabled options</label>
|
||||
<select name="disabled2" id="disabled2">
|
||||
<option value="1" disabled="disabled">1</option>
|
||||
<option value="2" selected="selected">2</option>
|
||||
<option value="3">3</option>
|
||||
<option disabled="disabled" value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option disabled="disabled" value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
<option value="10">10</option>
|
||||
<option disabled="disabled" value="11">11</option>
|
||||
<option value="12">12</option>
|
||||
<option value="13">13</option>
|
||||
<option disabled="disabled" value="14">14</option>
|
||||
<option disabled="disabled" value="15">15</option>
|
||||
<option value="16">16</option>
|
||||
<option value="17">17</option>
|
||||
<option value="18">18</option>
|
||||
<option value="19">19</option>
|
||||
</select>
|
||||
|
||||
<label for="disabled3">Disabled optgroup</label>
|
||||
<select name="disabled3" id="disabled3">
|
||||
<optgroup disabled="disabled" label="Scripts">
|
||||
<option value="jquery">jQuery.js</option>
|
||||
<option value="jqueryui">ui.jQuery.js</option>
|
||||
</optgroup>
|
||||
<optgroup label="Other files">
|
||||
<option value="somefile">Some unknown file</option>
|
||||
<option value="someotherfile">Some other file</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
|
||||
<label for="disabled4">Disable specific element and refresh selectmenu on button click</label>
|
||||
<select name="disabled4" id="disabled4">
|
||||
<optgroup label="Scripts">
|
||||
<option value="jquery">jQuery.js</option>
|
||||
<option value="jqueryui">ui.jQuery.js</option>
|
||||
</optgroup>
|
||||
<optgroup label="Other files">
|
||||
<option value="somefile">Some unknown file</option>
|
||||
<option value="someotherfile">Some other file</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
<button id="disable_select">Toggle disable select</button>
|
||||
<button id="disable_option">Toggle disable option</button>
|
||||
<button id="disable_optgroup">Toggle disable optgroup</button>
|
||||
</fieldset>
|
||||
|
||||
<h2>Empty tests</h2>
|
||||
<fieldset class="empty">
|
||||
<label for="empty1">Select with no option elements</label>
|
||||
<select name="empty1" id="empty1"></select>
|
||||
|
||||
<label for="empty2">Select with one empty option element</label>
|
||||
<select name="empty2" id="empty2">
|
||||
<option value=""></option>
|
||||
</select>
|
||||
|
||||
<label for="empty3">Select with some empty option elements</label>
|
||||
<select name="empty3" id="empty3">
|
||||
<option value="1">1</option>
|
||||
<option value="2" selected="selected">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value=""></option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value=""></option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
|
||||
<label for="empty4">Select with empty optgroup</label>
|
||||
<select id="empty4" name="empty4" class="empty4">
|
||||
<optgroup label="Scripts"></optgroup>
|
||||
<optgroup label="Other files">
|
||||
<option value="somefile">Some unknown file</option>
|
||||
<option value="someotherfile">Some other file</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<div style="position: absolute; top: 1em; right: 1em;">
|
||||
Log:
|
||||
<div id="log" style="height: 400px; width: 300px; overflow: auto; border: 1px solid #000;"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1
themes/base/jquery.ui.base.css
vendored
1
themes/base/jquery.ui.base.css
vendored
@ -19,6 +19,7 @@
|
||||
@import url("jquery.ui.progressbar.css");
|
||||
@import url("jquery.ui.resizable.css");
|
||||
@import url("jquery.ui.selectable.css");
|
||||
@import url("jquery.ui.selectmenu.css");
|
||||
@import url("jquery.ui.slider.css");
|
||||
@import url("jquery.ui.spinner.css");
|
||||
@import url("jquery.ui.tabs.css");
|
||||
|
||||
59
themes/base/jquery.ui.selectmenu.css
vendored
Normal file
59
themes/base/jquery.ui.selectmenu.css
vendored
Normal file
@ -0,0 +1,59 @@
|
||||
/*!
|
||||
* jQuery UI Selectmenu @VERSION
|
||||
* http://jqueryui.com
|
||||
*
|
||||
* Copyright 2013 jQuery Foundation and other contributors
|
||||
* Released under the MIT license.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://api.jqueryui.com/selectmenu/#theming
|
||||
*/
|
||||
.ui-selectmenu-menu {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
}
|
||||
.ui-selectmenu-menu .ui-menu {
|
||||
overflow: auto;
|
||||
/* Support: IE7 */
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
line-height: 1.5;
|
||||
padding: 2px 0.4em;
|
||||
margin: 0.5em 0 0 0;
|
||||
height: auto;
|
||||
border: 0;
|
||||
}
|
||||
.ui-selectmenu-open {
|
||||
display: block;
|
||||
}
|
||||
.ui-selectmenu-button {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ui-selectmenu-button span.ui-icon {
|
||||
right: 0.5em;
|
||||
left: auto;
|
||||
margin-top: -8px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
}
|
||||
.ui-selectmenu-button span.ui-selectmenu-text {
|
||||
text-align: left;
|
||||
padding: 0.4em 2.1em 0.4em 1em;
|
||||
display: block;
|
||||
line-height: 1.4;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
531
ui/jquery.ui.selectmenu.js
vendored
Normal file
531
ui/jquery.ui.selectmenu.js
vendored
Normal file
@ -0,0 +1,531 @@
|
||||
/*!
|
||||
* jQuery UI Selectmenu @VERSION
|
||||
* http://jqueryui.com
|
||||
*
|
||||
* Copyright 2013 jQuery Foundation and other contributors
|
||||
* Released under the MIT license.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://api.jqueryui.com/selectmenu
|
||||
*
|
||||
* Depends:
|
||||
* jquery.ui.core.js
|
||||
* jquery.ui.widget.js
|
||||
* jquery.ui.position.js
|
||||
* jquery.ui.menu.js
|
||||
*/
|
||||
(function( $, undefined ) {
|
||||
|
||||
$.widget( "ui.selectmenu", {
|
||||
version: "@VERSION",
|
||||
defaultElement: "<select>",
|
||||
options: {
|
||||
appendTo: null,
|
||||
icons: {
|
||||
button: "ui-icon-triangle-1-s"
|
||||
},
|
||||
position: {
|
||||
my: "left top",
|
||||
at: "left bottom",
|
||||
collision: "none"
|
||||
},
|
||||
width: null,
|
||||
|
||||
// callbacks
|
||||
change: null,
|
||||
close: null,
|
||||
focus: null,
|
||||
open: null,
|
||||
select: null
|
||||
},
|
||||
|
||||
_create: function() {
|
||||
var selectmenuId = this.element.uniqueId().attr( "id" );
|
||||
this.ids = {
|
||||
element: selectmenuId,
|
||||
button: selectmenuId + "-button",
|
||||
menu: selectmenuId + "-menu"
|
||||
};
|
||||
|
||||
this._drawButton();
|
||||
this._drawMenu();
|
||||
|
||||
if ( this.options.disabled ) {
|
||||
this.disable();
|
||||
}
|
||||
},
|
||||
|
||||
_drawButton: function() {
|
||||
var that = this,
|
||||
tabindex = this.element.attr( "tabindex" );
|
||||
|
||||
// Associate existing label with the new button
|
||||
this.label = $( "label[for='" + this.ids.element + "']" ).attr( "for", this.ids.button );
|
||||
this._on( this.label, {
|
||||
click: function( event ) {
|
||||
this.button.focus();
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
// Hide original select element
|
||||
this.element.hide();
|
||||
|
||||
// Create button
|
||||
this.button = $( "<span>", {
|
||||
"class": "ui-selectmenu-button ui-widget ui-state-default ui-corner-all",
|
||||
tabindex: tabindex || this.options.disabled ? -1 : 0,
|
||||
id: this.ids.button,
|
||||
role: "combobox",
|
||||
"aria-expanded": "false",
|
||||
"aria-autocomplete": "list",
|
||||
"aria-owns": this.ids.menu,
|
||||
"aria-haspopup": "true"
|
||||
})
|
||||
.insertAfter( this.element );
|
||||
|
||||
$( "<span>", {
|
||||
"class": "ui-icon " + this.options.icons.button
|
||||
}).prependTo( this.button );
|
||||
|
||||
this.buttonText = $( "<span>", {
|
||||
"class": "ui-selectmenu-text"
|
||||
})
|
||||
.appendTo( this.button );
|
||||
|
||||
this._setText( this.buttonText, this.element.find( "option:selected" ).text() );
|
||||
this._setOption( "width", this.options.width );
|
||||
|
||||
this._on( this.button, this._buttonEvents );
|
||||
this.button.one( "focusin", function() {
|
||||
// Delay rendering the menu items until the button receives focus
|
||||
that._refreshMenu();
|
||||
});
|
||||
this._hoverable( this.button );
|
||||
this._focusable( this.button );
|
||||
},
|
||||
|
||||
_drawMenu: function() {
|
||||
var that = this;
|
||||
|
||||
// Create menu
|
||||
this.menu = $( "<ul>", {
|
||||
"aria-hidden": "true",
|
||||
"aria-labelledby": this.ids.button,
|
||||
id: this.ids.menu
|
||||
});
|
||||
|
||||
// Wrap menu
|
||||
this.menuWrap = $( "<div>", {
|
||||
"class": "ui-selectmenu-menu ui-front"
|
||||
})
|
||||
.append( this.menu )
|
||||
.appendTo( this._appendTo() );
|
||||
|
||||
// Initialize menu widget
|
||||
this.menuInstance = this.menu.menu({
|
||||
role: "listbox",
|
||||
select: function( event, ui ) {
|
||||
event.preventDefault();
|
||||
that._select( ui.item.data( "ui-selectmenu-item" ), event );
|
||||
},
|
||||
focus: function( event, ui ) {
|
||||
var item = ui.item.data( "ui-selectmenu-item" );
|
||||
|
||||
// Prevent inital focus from firing and checks if its a newly focused item
|
||||
if ( that.focusIndex != null && item.index !== that.focusIndex ) {
|
||||
that._trigger( "focus", event, { item: item } );
|
||||
if ( !that.isOpen ) {
|
||||
that._select( item, event );
|
||||
}
|
||||
}
|
||||
that.focusIndex = item.index;
|
||||
|
||||
that.button.attr( "aria-activedescendant",
|
||||
that.menuItems.eq( item.index ).attr( "id" ) );
|
||||
}
|
||||
})
|
||||
.menu( "instance" );
|
||||
|
||||
// Adjust menu styles to dropdown
|
||||
this.menu.addClass( "ui-corner-bottom" ).removeClass( "ui-corner-all" );
|
||||
|
||||
// TODO: Can we make this cleaner?
|
||||
// If not, at least update the comment to say what we're removing
|
||||
// Unbind uneeded menu events
|
||||
this.menuInstance._off( this.menu, "mouseleave" );
|
||||
|
||||
// Cancel the menu's collapseAll on document click
|
||||
this.menuInstance._closeOnDocumentClick = function() {
|
||||
return false;
|
||||
};
|
||||
},
|
||||
|
||||
refresh: function() {
|
||||
this._refreshMenu();
|
||||
this._setText( this.buttonText, this._getSelectedItem().text() );
|
||||
},
|
||||
|
||||
_refreshMenu: function() {
|
||||
this.menu.empty();
|
||||
|
||||
var item,
|
||||
options = this.element.find( "option" );
|
||||
|
||||
if ( !options.length ) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._readOptions( options );
|
||||
this._renderMenu( this.menu, this.items );
|
||||
|
||||
this.menuInstance.refresh();
|
||||
this.menuItems = this.menu.find( "li" ).not( ".ui-selectmenu-optgroup" );
|
||||
|
||||
item = this._getSelectedItem();
|
||||
|
||||
// Update the menu to have the correct item focused
|
||||
this.menuInstance.focus( null, item );
|
||||
this._setAria( item.data( "ui-selectmenu-item" ) );
|
||||
|
||||
// Set disabled state
|
||||
this._setOption( "disabled", this.element.prop( "disabled" ) );
|
||||
},
|
||||
|
||||
open: function( event ) {
|
||||
if ( this.options.disabled ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If this is the first time the menu is being opened, render the items
|
||||
if ( !this.menuItems ) {
|
||||
this._refreshMenu();
|
||||
} else {
|
||||
// TODO: Why is this necessary?
|
||||
// Shouldn't the underlying menu always have accurate state?
|
||||
this.menu.find( ".ui-state-focus" ).removeClass( "ui-state-focus" );
|
||||
this.menuInstance.focus( null, this._getSelectedItem() );
|
||||
this.menuItems.eq( this.element[ 0 ].selectedIndex ).addClass( "ui-state-active" );
|
||||
}
|
||||
|
||||
this.isOpen = true;
|
||||
this._toggleAttr();
|
||||
this._resizeMenu();
|
||||
this._position();
|
||||
|
||||
this._on( this.document, this._documentClick );
|
||||
|
||||
this._trigger( "open", event );
|
||||
},
|
||||
|
||||
_position: function() {
|
||||
this.menuWrap.position( $.extend( { of: this.button }, this.options.position ) );
|
||||
},
|
||||
|
||||
close: function( event ) {
|
||||
if ( !this.isOpen ) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.isOpen = false;
|
||||
this._toggleAttr();
|
||||
|
||||
// Check if we have an item to select
|
||||
if ( this.menuItems ) {
|
||||
this.menuInstance.active = this._getSelectedItem();
|
||||
}
|
||||
|
||||
this._off( this.document );
|
||||
|
||||
this._trigger( "close", event );
|
||||
},
|
||||
|
||||
widget: function() {
|
||||
return this.button;
|
||||
},
|
||||
|
||||
menuWidget: function() {
|
||||
return this.menu;
|
||||
},
|
||||
|
||||
_renderMenu: function( ul, items ) {
|
||||
var that = this,
|
||||
currentOptgroup = "";
|
||||
|
||||
$.each( items, function( index, item ) {
|
||||
if ( item.optgroup !== currentOptgroup ) {
|
||||
$( "<li>", {
|
||||
"class": "ui-selectmenu-optgroup ui-menu-divider" +
|
||||
( item.element.parent( "optgroup" ).attr( "disabled" ) ?
|
||||
" ui-state-disabled" :
|
||||
"" ),
|
||||
text: item.optgroup
|
||||
})
|
||||
.appendTo( ul );
|
||||
currentOptgroup = item.optgroup;
|
||||
}
|
||||
that._renderItemData( ul, item );
|
||||
});
|
||||
},
|
||||
|
||||
_renderItemData: function( ul, item ) {
|
||||
return this._renderItem( ul, item ).data( "ui-selectmenu-item", item );
|
||||
},
|
||||
|
||||
_renderItem: function( ul, item ) {
|
||||
var li = $( "<li>" );
|
||||
|
||||
if ( item.disabled ) {
|
||||
li.addClass( "ui-state-disabled" );
|
||||
}
|
||||
this._setText( li, item.label );
|
||||
|
||||
return li.appendTo( ul );
|
||||
},
|
||||
|
||||
_setText: function( element, value ) {
|
||||
if ( value ) {
|
||||
element.text( value );
|
||||
} else {
|
||||
element.html( " " );
|
||||
}
|
||||
},
|
||||
|
||||
_move: function( direction, event ) {
|
||||
var filter = ".ui-menu-item",
|
||||
item, next;
|
||||
|
||||
if ( this.isOpen ) {
|
||||
item = this.menuItems.eq( this.focusIndex );
|
||||
} else {
|
||||
item = this.menuItems.eq( this.element[ 0 ].selectedIndex );
|
||||
filter += ":not(.ui-state-disabled)";
|
||||
}
|
||||
|
||||
if ( direction === "first" || direction === "last" ) {
|
||||
next = item[ direction === "first" ? "prevAll" : "nextAll" ]( filter ).eq( -1 );
|
||||
} else {
|
||||
next = item[ direction + "All" ]( filter ).eq( 0 );
|
||||
}
|
||||
|
||||
if ( next.length ) {
|
||||
this.menu.menu( "focus", event, next );
|
||||
}
|
||||
},
|
||||
|
||||
_getSelectedItem: function() {
|
||||
return this.menuItems.eq( this.element[ 0 ].selectedIndex );
|
||||
},
|
||||
|
||||
_toggle: function( event ) {
|
||||
if ( this.isOpen ) {
|
||||
this.close( event );
|
||||
} else {
|
||||
this.open( event );
|
||||
}
|
||||
},
|
||||
|
||||
_documentClick: {
|
||||
mousedown: function( event ) {
|
||||
if ( this.isOpen && !$( event.target ).closest( ".ui-selectmenu-menu, #" + this.ids.button ).length ) {
|
||||
this.close( event );
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_buttonEvents: {
|
||||
click: "_toggle",
|
||||
keydown: function( event ) {
|
||||
var preventDefault = true;
|
||||
switch ( event.keyCode ) {
|
||||
case $.ui.keyCode.TAB:
|
||||
case $.ui.keyCode.ESCAPE:
|
||||
this.close( event );
|
||||
preventDefault = false;
|
||||
break;
|
||||
case $.ui.keyCode.ENTER:
|
||||
if ( this.isOpen ) {
|
||||
this._selectMenu( event );
|
||||
}
|
||||
break;
|
||||
case $.ui.keyCode.UP:
|
||||
if ( event.altKey ) {
|
||||
this._toggle( event );
|
||||
} else {
|
||||
this._move( "prev", event );
|
||||
}
|
||||
break;
|
||||
case $.ui.keyCode.DOWN:
|
||||
if ( event.altKey ) {
|
||||
this._toggle( event );
|
||||
} else {
|
||||
this._move( "next", event );
|
||||
}
|
||||
break;
|
||||
case $.ui.keyCode.SPACE:
|
||||
if ( this.isOpen ) {
|
||||
this._selectMenu( event );
|
||||
} else {
|
||||
this._toggle( event );
|
||||
}
|
||||
break;
|
||||
case $.ui.keyCode.LEFT:
|
||||
this._move( "prev", event );
|
||||
break;
|
||||
case $.ui.keyCode.RIGHT:
|
||||
this._move( "next", event );
|
||||
break;
|
||||
case $.ui.keyCode.HOME:
|
||||
case $.ui.keyCode.PAGE_UP:
|
||||
this._move( "first", event );
|
||||
break;
|
||||
case $.ui.keyCode.END:
|
||||
case $.ui.keyCode.PAGE_DOWN:
|
||||
this._move( "last", event );
|
||||
break;
|
||||
default:
|
||||
this.menu.trigger( event );
|
||||
preventDefault = false;
|
||||
}
|
||||
|
||||
if ( preventDefault ) {
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_selectMenu: function( event ) {
|
||||
if ( !this.menuItems.eq( this.focusIndex ).hasClass( "ui-state-disabled" ) ) {
|
||||
this.menuInstance.select( event );
|
||||
}
|
||||
},
|
||||
|
||||
_select: function( item, event ) {
|
||||
var oldIndex = this.element[ 0 ].selectedIndex;
|
||||
|
||||
// Change native select element
|
||||
this.element[ 0 ].selectedIndex = item.index;
|
||||
this._setText( this.buttonText, item.label );
|
||||
this._setAria( item );
|
||||
this._trigger( "select", event, { item: item } );
|
||||
|
||||
if ( item.index !== oldIndex ) {
|
||||
this._trigger( "change", event, { item: item } );
|
||||
}
|
||||
|
||||
this.close( event );
|
||||
},
|
||||
|
||||
_setAria: function( item ) {
|
||||
var id = this.menuItems.eq( item.index ).attr( "id" );
|
||||
|
||||
this.button.attr({
|
||||
"aria-labelledby": id,
|
||||
"aria-activedescendant": id
|
||||
});
|
||||
this.menu.attr( "aria-activedescendant", id );
|
||||
},
|
||||
|
||||
_setOption: function( key, value ) {
|
||||
if ( key === "icons" ) {
|
||||
this.button.find( "span.ui-icon" )
|
||||
.removeClass( this.options.icons.button )
|
||||
.addClass( value.button );
|
||||
}
|
||||
|
||||
this._super( key, value );
|
||||
|
||||
if ( key === "appendTo" ) {
|
||||
this.menuWrap.appendTo( this._appendTo() );
|
||||
}
|
||||
if ( key === "disabled" ) {
|
||||
this.menuInstance.option( "disabled", value );
|
||||
this.button
|
||||
.toggleClass( "ui-state-disabled", value )
|
||||
.attr( "aria-disabled", value );
|
||||
|
||||
this.element.prop( "disabled", value );
|
||||
if ( value ) {
|
||||
this.button.attr( "tabindex", -1 );
|
||||
this.close();
|
||||
} else {
|
||||
this.button.attr( "tabindex", 0 );
|
||||
}
|
||||
}
|
||||
if ( key === "width" ) {
|
||||
if ( !value ) {
|
||||
value = this.element.outerWidth();
|
||||
}
|
||||
this.button.outerWidth( value );
|
||||
}
|
||||
},
|
||||
|
||||
_appendTo: function() {
|
||||
var element = this.options.appendTo;
|
||||
|
||||
if ( element ) {
|
||||
element = element.jquery || element.nodeType ?
|
||||
$( element ) :
|
||||
this.document.find( element ).eq( 0 );
|
||||
}
|
||||
|
||||
if ( !element ) {
|
||||
element = this.element.closest( ".ui-front" );
|
||||
}
|
||||
|
||||
if ( !element.length ) {
|
||||
element = this.document[ 0 ].body;
|
||||
}
|
||||
|
||||
return element;
|
||||
},
|
||||
|
||||
_toggleAttr: function() {
|
||||
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 );
|
||||
},
|
||||
|
||||
_resizeMenu: function() {
|
||||
this.menu.outerWidth( Math.max(
|
||||
this.button.outerWidth(),
|
||||
// IE10 wraps long text (possibly a rounding bug)
|
||||
// so we add 1px to avoid the wrapping
|
||||
this.menu.width( "" ).outerWidth() + 1
|
||||
) );
|
||||
},
|
||||
|
||||
_getCreateOptions: function() {
|
||||
return { disabled: this.element.prop( "disabled" ) };
|
||||
},
|
||||
|
||||
_readOptions: function( options ) {
|
||||
var data = [];
|
||||
options.each( function( index, item ) {
|
||||
var option = $( item ),
|
||||
optgroup = option.parent( "optgroup" );
|
||||
data.push({
|
||||
element: option,
|
||||
index: index,
|
||||
value: option.attr( "value" ),
|
||||
label: option.text(),
|
||||
optgroup: optgroup.attr( "label" ) || "",
|
||||
disabled: optgroup.attr( "disabled" ) || option.attr( "disabled" )
|
||||
});
|
||||
});
|
||||
this.items = data;
|
||||
},
|
||||
|
||||
_destroy: function() {
|
||||
this.menuWrap.remove();
|
||||
this.button.remove();
|
||||
this.element.show();
|
||||
this.element.removeUniqueId();
|
||||
this.label.attr( "for", this.ids.element );
|
||||
}
|
||||
});
|
||||
|
||||
}( jQuery ));
|
||||
Loading…
Reference in New Issue
Block a user