aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--demos/selectmenu/default.html103
-rw-r--r--demos/selectmenu/index.html16
-rw-r--r--tests/visual/selectmenu/disabled.html137
-rw-r--r--tests/visual/selectmenu/events.html74
-rw-r--r--tests/visual/selectmenu/option.html63
-rw-r--r--themes/base/jquery.ui.base.css1
-rw-r--r--themes/base/jquery.ui.selectmenu.css19
-rw-r--r--ui/jquery.ui.selectmenu.js428
8 files changed, 841 insertions, 0 deletions
diff --git a/demos/selectmenu/default.html b/demos/selectmenu/default.html
new file mode 100644
index 000000000..d8296dedb
--- /dev/null
+++ b/demos/selectmenu/default.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Selectmenu - Default functionality</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.6.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.button.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() {
+ $('select#speed').selectmenu({
+ dropdown: false
+ });
+ var withOverflow = $('select#number').selectmenu({
+ dropdown: false
+ });
+ withOverflow.selectmenu("widget").addClass("overflow");
+
+ $('select#files').selectmenu();
+
+ });
+ </script>
+ <style>
+ form { margin: 100px 0 0 0 }
+ fieldset { border: 0; }
+ label { display: block; }
+ select { width: 200px; }
+ .overflow ul { height: 200px; overflow: auto; }
+ </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>
+ <br />
+ <br />
+ <br />
+ <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>
+ <br />
+ <br />
+ <br />
+ <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>
+ </fieldset>
+</form>
+
+</div><!-- End demo -->
+
+
+
+<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><!-- End demo-description -->
+
+</body>
+</html>
diff --git a/demos/selectmenu/index.html b/demos/selectmenu/index.html
new file mode 100644
index 000000000..909c3e262
--- /dev/null
+++ b/demos/selectmenu/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Selectmenu Demos</title>
+ <link rel="stylesheet" href="../demos.css">
+</head>
+<body>
+ <div class="demos-nav">
+ <h4>Examples</h4>
+ <ul>
+ <li class="demo-config-on"><a href="default.html">Default functionality</a></li>
+ </ul>
+ </div>
+</body>
+</html>
diff --git a/tests/visual/selectmenu/disabled.html b/tests/visual/selectmenu/disabled.html
new file mode 100644
index 000000000..b7861f6c8
--- /dev/null
+++ b/tests/visual/selectmenu/disabled.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Selectmenu - Disable functionality</title>
+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
+ <script src="../../../jquery-1.6.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.button.js"></script>
+ <script src="../../../ui/jquery.ui.menu.js"></script>
+ <script src="../../../ui/jquery.ui.selectmenu.js"></script>
+ <link rel="stylesheet" href="../../../demos/demos.css">
+ <script>
+ $(function() {
+ $('select#speed').selectmenu({
+ dropdown: false
+ });
+ var withOverflow = $('select#number').selectmenu({
+ dropdown: false
+ });
+ withOverflow.selectmenu("widget").addClass("overflow");
+ $('select#files').selectmenu();
+ var files2 = $('select#files2').selectmenu();
+
+ $("#disable_select").toggle( function() {
+ files2.selectmenu("disable");
+ }, function() {
+ files2.removeAttr("disabled");
+ files2.selectmenu("refresh");
+ });
+ $("#disable_option").toggle( function() {
+ files2.find("option:eq(0)").attr("disabled", "disabled");
+ files2.selectmenu("refresh");
+ }, function() {
+ files2.find("option:eq(0)").removeAttr("disabled");
+ files2.selectmenu("refresh");
+ });
+ $("#disable_optgroup").toggle( function() {
+ files2.find("optgroup:eq(0)").attr("disabled", "disabled");
+ //files2.selectmenu("refresh");
+ }, function() {
+ files2.find("option:eq(0)").removeAttr("disabled");
+ //files2.selectmenu("refresh");
+
+ });
+ });
+ </script>
+ <style>
+ form { margin: 100px 0 0 0 }
+ fieldset { border: 0; }
+ label { display: block; }
+ select { width: 200px; }
+ .overflow ul { height: 200px; overflow: auto; }
+ </style>
+</head>
+<body>
+
+<div class="demo">
+
+<form action="#">
+ <fieldset>
+ <label for="speed">Select a speed:</label>
+ <select disabled="disabled" 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>
+ <br />
+ <br />
+ <br />
+ <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 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>
+ <br />
+ <br />
+ <br />
+ <label for="files">Select a file:</label>
+ <select name="files" id="files">
+ <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>
+ <br />
+ <br />
+ <br />
+ <label for="files2">Select a file:</label>
+ <select name="files2" id="files2">
+ <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>
+ </fieldset>
+</form>
+<br />
+<button id="disable_select">Toggle disable select</button>
+<button id="disable_option">Toggle disable option</button>
+<button id="disable_optgroup">Toggle disable optgroup</button>
+
+</div><!-- End demo -->
+
+
+
+</body>
+</html>
diff --git a/tests/visual/selectmenu/events.html b/tests/visual/selectmenu/events.html
new file mode 100644
index 000000000..7c7d0ac57
--- /dev/null
+++ b/tests/visual/selectmenu/events.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Selectmenu - Event functionality</title>
+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
+ <script src="../../../jquery-1.6.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.button.js"></script>
+ <script src="../../../ui/jquery.ui.menu.js"></script>
+ <script src="../../../ui/jquery.ui.selectmenu.js"></script>
+ <link rel="stylesheet" href="../../../demos/demos.css">
+ <script>
+ $(function() {
+ var log = $("#log");
+ var index = 0;
+ $('select').selectmenu({
+ open: function(event, ui) {
+ $("<div/>").text( index++ + " Opened").prependTo(log);
+ },
+ close: function(event, ui) {
+ $("<div/>").text( index++ + " Closed").prependTo(log);
+ },
+ focus : function(event, ui) {
+ $("<div/>").text( index++ + " Focused: " + ui.item.label + " #" + ui.item.index ).prependTo(log);
+ },
+ select: function(event, ui) {
+ $("<div/>").text( index++ + " Selected: " + ui.item.label + " #" + ui.item.index ).prependTo(log);
+ },
+ change: function(event, ui) {
+ $("<div/>").text( index++ + " Changed to: " + ui.item.label + " #" + ui.item.index ).prependTo(log);
+ }
+ });
+ });
+ </script>
+ <style>
+ form { margin: 20px 0 0 0 }
+ fieldset { border: 0; }
+ label { display: block; }
+ select { width: 200px; }
+ .overflow ul { height: 200px; overflow: auto; }
+ </style>
+</head>
+<body>
+
+<div class="demo">
+
+
+<div class="ui-widget" style="float: left; margin-top:2em; font-family:Arial">
+ Log:
+ <div id="log" style="height: 400px; width: 270px; overflow: auto;" class="ui-widget-content"></div>
+</div>
+
+<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>
+ </fieldset>
+</form>
+
+</div><!-- End demo -->
+
+
+
+</body>
+</html>
diff --git a/tests/visual/selectmenu/option.html b/tests/visual/selectmenu/option.html
new file mode 100644
index 000000000..fe04c89fa
--- /dev/null
+++ b/tests/visual/selectmenu/option.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Selectmenu - Event functionality</title>
+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
+ <script src="../../../jquery-1.6.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.button.js"></script>
+ <script src="../../../ui/jquery.ui.menu.js"></script>
+ <script src="../../../ui/jquery.ui.selectmenu.js"></script>
+ <link rel="stylesheet" href="../../../demos/demos.css">
+ <script>
+ $(function() {
+ var mySelectmenu = $('select').selectmenu();
+
+ $("#value").click( function() {
+ mySelectmenu.selectmenu("option", "value", "Faster");
+ });
+
+ $("#dropdown").toggle( function() {
+ mySelectmenu.selectmenu("option", "dropdown", false);
+ }, function() {
+ mySelectmenu.selectmenu("option", "dropdown", true);
+ });
+ });
+ </script>
+ <style>
+ form { margin: 20px 0 0 0 }
+ fieldset { border: 0; }
+ label { display: block; }
+ select { width: 200px; }
+ .overflow ul { height: 200px; overflow: auto; }
+ </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>
+ </fieldset>
+</form>
+<br />
+<!-- <button id="dropdown">Toggle dropdown style</button> -->
+<button id="value">Set option value = 'Faster'</button>
+
+</div><!-- End demo -->
+
+
+
+</body>
+</html>
diff --git a/themes/base/jquery.ui.base.css b/themes/base/jquery.ui.base.css
index a359c2ba4..6973ff0f0 100644
--- a/themes/base/jquery.ui.base.css
+++ b/themes/base/jquery.ui.base.css
@@ -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");
diff --git a/themes/base/jquery.ui.selectmenu.css b/themes/base/jquery.ui.selectmenu.css
new file mode 100644
index 000000000..46b78ea44
--- /dev/null
+++ b/themes/base/jquery.ui.selectmenu.css
@@ -0,0 +1,19 @@
+/*
+ * jQuery UI Selectmenu @VERSION
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Selectmenu#theming
+ */
+
+.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
diff --git a/ui/jquery.ui.selectmenu.js b/ui/jquery.ui.selectmenu.js
new file mode 100644
index 000000000..c02b8988a
--- /dev/null
+++ b/ui/jquery.ui.selectmenu.js
@@ -0,0 +1,428 @@
+/*
+ * jQuery UI Selectmenu @VERSION
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Selectmenu
+ *
+ * Depends:
+ * jquery.ui.core.js
+ * jquery.ui.widget.js
+ * jquery.ui.position.js
+ * jquery.ui.menu.js
+ * jquery.ui.button.js
+ */
+(function( $, undefined ) {
+
+$.widget( "ui.selectmenu", {
+ version: "@VERSION",
+ defaultElement: "<select>",
+ options: {
+ dropdown: true,
+ appendTo: "body",
+ position: {
+ my: "left top",
+ at: "left bottom",
+ collision: "none"
+ },
+ value: null,
+ // callbacks
+ open: null,
+ focus: null,
+ select: null,
+ close: null,
+ change: null
+ },
+
+ _create: function() {
+ var that = this,
+ options = this.options,
+ // set a default id value, generate a new random one if not set by developer
+ selectmenuId = that.element.attr( 'id' ) || 'ui-selectmenu-' + Math.random().toString( 16 ).slice( 2, 10 );
+
+ // quick array of button and menu id's
+ that.ids = [ selectmenuId, selectmenuId + '-button', selectmenuId + '-menu' ];
+
+ // set current value
+ if ( options.value ) {
+ that.element[0].value = options.value;
+ } else {
+ options.value = that.element[0].value;
+ }
+
+ that._addNewelement();
+ that._addList();
+
+ // built menu
+ that.refresh();
+
+ that._bind( that.newelement, that._newelementEvents );
+
+ // document click closes menu
+ that._bind( document, {
+ 'mousedown': function( event ) {
+ if ( that.opened && !that.hover) {
+ window.setTimeout( function() {
+ that.close( event );
+ }, 200 );
+ }
+ }
+ });
+ },
+
+ _addNewelement: function() {
+ var that = this,
+ options = this.options,
+ tabindex = this.element.attr( 'tabindex' );
+
+ // catch click event of the label
+ that._bind({
+ 'click': function( event ) {
+ that.newelement.focus();
+ event.preventDefault();
+ }
+ });
+
+ // hide original select tag
+ that.element.hide();
+
+ // create button
+ that.newelement = $( '<a />', {
+ href: '#' + that.ids[ 0 ],
+ tabindex: ( tabindex ? tabindex : that.element.attr( 'disabled' ) ? 1 : 0 ),
+ id: that.ids[ 1 ],
+ css: {
+ width: that.element.outerWidth()
+ },
+ 'aria-disabled': options.disabled,
+ 'aria-owns': that.ids[ 2 ],
+ 'aria-haspopup': true
+ })
+ .button({
+ label: this.element.find( "option:selected" ).text(),
+ icons: {
+ primary: ( options.dropdown ? 'ui-icon-triangle-1-s' : 'ui-icon-triangle-2-n-s' )
+ }
+ });
+
+ // wrap and insert new button
+ that.newelementWrap = $( '<span />' )
+ .addClass( that.widgetBaseClass + '-button' )
+ .append( that.newelement )
+ .insertAfter( that.element );
+ },
+
+ _addList: function() {
+ var that = this,
+ options = this.options;
+
+ // create menu portion, append to body
+ that.list = $( '<ul />', {
+ 'class': 'ui-widget ui-widget-content',
+ 'aria-hidden': true,
+ 'aria-labelledby': that.ids[1],
+ role: 'listbox',
+ id: that.ids[2]
+ });
+
+ // set width
+ if ( options.dropdown ) {
+ var setWidth = that.newelement.outerWidth();
+ } else {
+ var text = that.newelement.find( "span.ui-button-text");
+ var setWidth = text.width() + parseFloat( text.css( "padding-left" ) ) + parseFloat( text.css( "margin-left" ) );
+ }
+
+ that._bind( that.list, {
+ 'click': function( event ) {
+ event.preventDefault();
+ },
+ mouseenter: function() {
+ that.hover = true;
+ },
+ mouseleave: function() {
+ that.hover = false;
+ }
+ });
+
+ // wrap list
+ that.listWrap = $( '<div />' )
+ .addClass( that.widgetBaseClass + '-menu' )
+ .width( setWidth )
+ .append( that.list )
+ .appendTo( options.appendTo );
+
+ // init menu widget
+ that.list
+ .data( 'element.selectelemenu', that.element )
+ .menu({
+ select: function( event, ui ) {
+ var flag = false,
+ item = ui.item.data( "item.selectmenu" );
+
+ if ( item.index != that.element[0].selectedIndex ) flag = true;
+
+ that._setOption( "value", item.value );
+ that._trigger( "select", event, { item: item } );
+
+ if ( flag ) that._trigger( "change", event, { item: item } );
+
+ that.close( event, true);
+ },
+ focus: function( event, ui ) {
+ var item = ui.item.data( "item.selectmenu" );
+ if ( that.focus !== undefined && item.index != that.focus ) that._trigger( "focus", event, { item: item } );
+ that.focus = item.index;
+ }
+ });
+ },
+
+ refresh: function() {
+ var that = this,
+ options = this.options;
+
+ that.list.empty();
+
+ that._initSource();
+ that._renderMenu( that.list, that.items );
+
+ that.list.menu( "refresh" );
+
+ // adjust ARIA
+ that.list.find( "li" ).not( '.ui-selectmenu-optgroup' ).find( 'a' ).attr( 'role', 'option' );
+
+ if ( options.dropdown ) {
+ that.list
+ .addClass( 'ui-corner-bottom' )
+ .removeClass( 'ui-corner-all' );
+ }
+
+ // transfer disabled state
+ if ( that.element.attr( 'disabled' ) ) {
+ that.disable();
+ } else {
+ that.enable()
+ }
+ },
+
+ open: function( event ) {
+ var that = this,
+ options = this.options,
+ currentItem = that._getSelectedItem();
+
+ if ( !options.disabled ) {
+ // close all other selectmenus
+ $( '.' + that.widgetBaseClass + '-open' ).not( that.newelement ).each( function() {
+ $( this ).children( 'ul.ui-menu' ).data( 'element.selectelemenu' ).selectmenu( 'close' );
+ });
+
+ if ( options.dropdown ) {
+ that.newelement
+ .addClass( 'ui-corner-top' )
+ .removeClass( 'ui-corner-all' );
+ }
+
+ that.listWrap.addClass( that.widgetBaseClass + '-open' );
+ that.list.menu( "focus", null, currentItem );
+
+ if ( !options.dropdown ) {
+ // center current item
+ if ( that.list.css("overflow") == "auto" ) {
+ that.list.scrollTop( that.list.scrollTop() + currentItem.position().top - that.list.outerHeight()/2 + currentItem.outerHeight()/2 );
+ }
+ // calculate offset
+ var _offset = (that.list.offset().top - currentItem.offset().top + (that.newelement.outerHeight() - currentItem.outerHeight()) / 2);
+ $.extend( options.position, {
+ my: "left top",
+ at: "left top",
+ offset: "0 " + _offset
+ });
+ }
+
+ that.listWrap
+ .zIndex( that.element.zIndex() + 1 )
+ .position( $.extend({
+ of: that.newelement
+ }, options.position ));
+
+ that.opened = true;
+ that._trigger( "open", event );
+ }
+ },
+
+ close: function( event, focus ) {
+ var that = this,
+ options = this.options;
+
+ if ( that.opened ) {
+ if ( options.dropdown ) {
+ that.newelement
+ .addClass( 'ui-corner-all' )
+ .removeClass( 'ui-corner-top' );
+ }
+
+ that.listWrap.removeClass( that.widgetBaseClass + '-open' );
+ this.opened = false;
+
+ if (focus) that.newelement.focus();
+
+ that._trigger( "close", event );
+ }
+ },
+
+ _renderMenu: function( ul, items ) {
+ var that = this,
+ currentOptgroup = "";
+
+ $.each( items, function( index, item ) {
+ if ( item.optgroup != currentOptgroup ) {
+ var optgroup = $( '<li class="ui-selectmenu-optgroup">' + item.optgroup + '</li>' );
+ if ( item.element.parent( "optgroup" ).attr( "disabled" ) ) optgroup.addClass( 'ui-state-disabled' );
+ ul.append( optgroup );
+ currentOptgroup = item.optgroup;
+ }
+ that._renderItem( ul, item );
+ });
+ },
+
+ _renderItem: function( ul, item) {
+ var li = $( "<li />" ).data( "item.selectmenu", item );
+ if ( item.disabled ) {
+ li.addClass( 'ui-state-disabled' ).text( item.label );
+ } else {
+ li.append( $( "<a />", {
+ text: item.label,
+ href: '#'
+ })
+ );
+ }
+
+ return li.appendTo( ul );
+ },
+
+ _move: function( key, event ) {
+ if ( !this.opened ) this.list.menu( "focus", event, this._getSelectedItem() );
+ this.list.menu( key, event );
+ if ( !this.opened ) this.list.menu( "select", event );
+ },
+
+ _getSelectedItem: function() {
+ return this.list.find( "li" ).not( '.ui-selectmenu-optgroup' ).eq( this.element[0].selectedIndex );
+ },
+
+ _toggle: function( event ) {
+ if ( this.opened ) {
+ this.close( event );
+ } else {
+ this.open( event );
+ }
+ },
+
+ _newelementEvents: {
+ mousedown: function( event ) {
+ this._toggle( event );
+ event.stopImmediatePropagation();
+ },
+ click: function( event ) {
+ // return false needed to prevent browser from following the anchor
+ return false;
+ },
+ keydown: function( event ) {
+ switch (event.keyCode) {
+ case $.ui.keyCode.TAB:
+ if ( this.opened ) this.close();
+ break;
+ case $.ui.keyCode.ENTER:
+ if ( this.opened ) {
+ this.list.menu( "select", this._getSelectedItem() );
+ event.preventDefault();
+ }
+ break;
+ case $.ui.keyCode.SPACE:
+ this._toggle(event);
+ event.preventDefault();
+ break;
+ case $.ui.keyCode.UP:
+ if ( event.altKey ) {
+ this._toggle( event );
+ } else {
+ this._move( "previous", event );
+ }
+ event.preventDefault();
+ break;
+ case $.ui.keyCode.DOWN:
+ if ( event.altKey ) {
+ this._toggle( event );
+ } else {
+ this._move( "next", event );
+ }
+ event.preventDefault();
+ break;
+ case $.ui.keyCode.LEFT:
+ this._move( "previous", event );
+ event.preventDefault();
+ break;
+ case $.ui.keyCode.RIGHT:
+ this._move( "next", event );
+ event.preventDefault();
+ break;
+ default:
+ this.list.trigger( event );
+ }
+ }
+ },
+
+ _setOption: function( key, value ) {
+ this._super( "_setOption", key, value );
+
+ if ( key === "appendTo" ) {
+ this.listWrap.appendTo( $( value || "body", this.element[0].ownerDocument )[0] );
+ }
+ if ( key === "value" && value !== undefined ) {
+ this.element[0].value = value;
+ this.newelement.children( '.ui-button-text' ).text( this.items[ this.element[0].selectedIndex ].label );
+ }
+ if ( key === "disabled" ) {
+ this.newelement.button( "option", "disabled", value );
+ if ( value ) {
+ this.element.attr( "disabled", "disabled" );
+ this.newelement.attr( "tabindex", -1 );
+ } else {
+ this.element.removeAttr( "disabled" );
+ this.newelement.attr( "tabindex", 1 );
+ }
+ this.list.attr( "aria-disabled", value );
+ this.close();
+ }
+ },
+
+ widget: function() {
+ return this.newelementWrap.add( this.listWrap );
+ },
+
+ _initSource: function() {
+ var data = [];
+ $.each( this.element.find( 'option' ), 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" ) || false,
+ disabled: optgroup.attr( "disabled" ) || option.attr( "disabled" )
+ });
+ });
+ this.items = data;
+ },
+
+ _destroy: function() {
+ this.listWrap.remove();
+ this.newelementWrap.remove();
+ }
+});
+
+}( jQuery ));
generated by cgit v1.2.3 (git 2.39.1) at 2025-07-21 14:48:19 +0000