jQuery UI 1.8.17 and selectmenu

Question

The answer to this question will probably give me a "doh!" moment, but where can I find a working selectmenu plugin that work with a late(ish) jquery ui version?

Iv tried from all of these places, but none seem to work:

http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

https://github.com/fnagel/jquery-ui

http://view.jqueryui.com/selectmenu/demos/selectmenu/default.html

http://jqueryui.com/download

If you believe any of them should work, please point me in the right direction so that I may be able to investigate why it doesnt work for me.

See link: http://stackoverflow.com/questions/4245336/jquery-selectmenu-wordpress — Domenico, Jan 20 '12 at 17:47

score 2 · Answer 1 · answered Jun 24 '13 at 14:46

2

update for those interested:

https://github.com/fnagel/jquery-ui

was recently updated and the code works with jQuery 1.10.1 and jQuery UI 1.10.3

answered Jun 24 '13 at 14:46

user1684008

21
1

score 2 · Accepted Answer · answered Jan 25 '12 at 13:27

I had the same problems. But now I solved it:

1) Take the JavaScript-Selectmenu Source-Code from: http://view.jqueryui.com/selectmenu/demos/selectmenu/default.html

It is a version from jQuery UI 1.9. So because 1.8.17 does not know _super, change _super to the old one:

//this._super( key, value );
$.Widget.prototype._setOption.call (this, key, value);

In the function "drawmenu" change "select" to "selected"
(this.menu.menu({ selected: )

2) Enhance jquery.ui.widget.js with the following functions from 1.9m5 (_delay from 1.9m6): _bind, _delay.

add "this.bindings = $();" to _createWidget.

add "this.bindings.unbind( "." + this.widgetName );" to destroy.

3) Take this css and include it:
.ui-selectmenu-menu { padding: 0; margin: 0; position:absolute; top: 0; display: none; }
.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 }

4) jQuery UI 1.8.17 has a menu-Widget. It's part of the autocomplete. Extract it from there and put it in a new file.

Hope this helps
Wolfgang

Ill try that. But how do you know this version is from 1.9? When I check the source for that demo, its dependent on version 1.7.1, so that's what I assumed.. — MatteS, Jan 26 '12 at 13:47
Trying this, it still fails in selectmenu line 46: this._bind({... Also, im not so sure if im willing to alter the jquery ui source, but ill give it a chance.. — MatteS, Jan 26 '12 at 13:57
Hello MatteS! Have you added - as I said - the _bind-Method to the jquery-ui-widget-file ? — Wolfgang Adamec, Jan 27 '12 at 12:07
I got this to work, but in the end I wrote my own selectmenu for the time being... — MatteS, Apr 16 '12 at 08:58

jQuery UI 1.8.17 and selectmenu

2 Answers2

Linked