Skip to content

Commit df0a874

Browse files
fnagelfnagel
committed
added: option to wrap all added elements which allows us to use different jQuery UI themes, see https://github.com/fnagel/jquery-ui/issues/closed#issue/31
added: nicer themeswitcher test implementation
1 parent 50d8199 commit df0a874

File tree

2 files changed

+32
-14
lines changed

2 files changed

+32
-14
lines changed

‎demos/selectmenu/default.html‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,18 @@
1919
fieldset { border:0; }
2020
label,select,.ui-select-menu { float: left; margin-right: 10px; }
2121
select { width: 200px; }
22+
.wrap span.ui-selectmenu-item-header,
23+
.wrap ul.ui-selectmenu-menu li a
24+
{ color: black !important; }
2225
</style>
2326
<script type="text/javascript">
2427
$(function(){
2528
$('select#speedA').selectmenu({style:'popup'});
2629

2730
$('select#speedAa').selectmenu({
2831
style:'popup',
29-
maxHeight: 150
32+
maxHeight: 150,
33+
wrapperElement: "<div class='wrap' />"
3034
});
3135

3236
$('select#speedB').selectmenu({
@@ -69,11 +73,19 @@
6973
}
7074
return newText;
7175
}
72-
</script>
73-
<!--
74-
<script type="text/javascript" src="http://ui.jquery.com/applications/themeroller/themeswitchertool/"></script>
75-
<script type="text/javascript"> $(function(){ $('<div style="position: absolute; top: 20px; right: 10px;" />').appendTo('body').themeswitcher(); }); </script>
76-
-->
76+
77+
// add themeswitcher
78+
$(function(){
79+
var ts = $('<div class="ui-button ui-widget ui-state-default ui-corner-all" style="padding: 5px; position: absolute; top: 20px; right: 10px;">Click here to add Themeswitcher!</div>')
80+
.appendTo('body')
81+
.bind("click", function() {
82+
ts.text("Loading Themeswitcher...");
83+
$.getScript('http://ui.jquery.com/applications/themeroller/themeswitchertool/', function() {
84+
ts.removeClass("ui-button ui-widget ui-state-default ui-corner-all").text("").unbind("click").themeswitcher();
85+
});
86+
});
87+
});
88+
</script>
7789
</head>
7890
<body>
7991
<br />
@@ -90,7 +102,7 @@ <h2>"default popup" Style</h2>
90102
<option value="Faster">Faster</option>
91103
</select>
92104
</fieldset>
93-
<h2>"default popup" Style with maxHeight set </h2>
105+
<h2>"default popup" Style with maxHeight set and custom wrapper</h2>
94106
<fieldset>
95107
<label for="speedAa">Select a Speed:</label>
96108
<select name="speedAa" id="speedAa">

‎ui/jquery.ui.selectmenu.js‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,12 @@ $.widget("ui.selectmenu", {
2424
},
2525
width: null,
2626
menuWidth: null,
27-
handleWidth: 26,
27+
handleWidth: 26,
2828
maxHeight: null,
2929
icons: null,
3030
format: null,
31-
bgImage: function() {}
31+
bgImage: function() {},
32+
wrapperElement: ""
3233
},
3334

3435
_create: function() {
@@ -46,7 +47,8 @@ $.widget("ui.selectmenu", {
4647
//create menu button wrapper
4748
this.newelement = $('<a class="'+ this.widgetBaseClass +' ui-widget ui-state-default ui-corner-all" id="'+this.ids[0]+'" role="button" href="#" tabindex="0" aria-haspopup="true" aria-owns="'+this.ids[1]+'"></a>')
4849
.insertAfter(this.element);
49-
50+
//
51+
this.newelement.wrap(o.wrapperElement);
5052
//transfer tabindex
5153
var tabindex = this.element.attr('tabindex');
5254
if(tabindex){ this.newelement.attr('tabindex', tabindex); }
@@ -133,6 +135,7 @@ $.widget("ui.selectmenu", {
133135
//create menu portion, append to body
134136
var cornerClass = (o.style == "dropdown")? " ui-corner-bottom" : " ui-corner-all";
135137
this.list = $('<ul class="' + self.widgetBaseClass + '-menu ui-widget ui-widget-content'+cornerClass+'" aria-hidden="true" role="listbox" aria-labelledby="'+this.ids[0]+'" id="'+this.ids[1]+'"></ul>').appendTo('body');
138+
this.list.wrap(o.wrapperElement);
136139

137140
//serialize selectmenu element options
138141
var selectOptionData = [];
@@ -350,6 +353,7 @@ $.widget("ui.selectmenu", {
350353
.attr('for',this.element.attr('id'))
351354
.unbind('click');
352355
this.newelement.remove();
356+
// FIXME option.wrapper needs
353357
this.list.remove();
354358
this.element.show();
355359

@@ -397,10 +401,12 @@ $.widget("ui.selectmenu", {
397401
this._closeOthers(event);
398402
this.newelement
399403
.addClass('ui-state-active');
400-
401-
this.list
402-
.appendTo('body')
403-
.addClass(self.widgetBaseClass + '-open')
404+
if (self.options.wrapperElement) {
405+
this.list.parent().appendTo('body');
406+
} else {
407+
this.list.appendTo('body');
408+
}
409+
this.list.addClass(self.widgetBaseClass + '-open')
404410
.attr('aria-hidden', false)
405411
.find('li:not(.'+ self.widgetBaseClass +'-group):eq('+ this._selectedIndex() +') a')[0].focus();
406412
if(this.options.style == "dropdown"){ this.newelement.removeClass('ui-corner-all').addClass('ui-corner-top'); }

0 commit comments

Comments
 (0)