Skip to content

Commit 693cacc

Browse files
fnagelfnagel
committed
Selectmenu: TTS
1 parent 58f9603 commit 693cacc

File tree

2 files changed

+137
-8
lines changed

2 files changed

+137
-8
lines changed

‎demos/selectmenu/width.html

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Selectmenu - Default functionality</title>
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.10.2.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.position.js"></script>
11+
<script src="../../ui/jquery.ui.menu.js"></script>
12+
<script src="../../ui/jquery.ui.selectmenu.js"></script>
13+
<link rel="stylesheet" href="../demos.css">
14+
<script>
15+
$(function() {
16+
$( "#width-auto, #width-auto2" ).selectmenu();
17+
18+
$( "#width-css, #width-css2" ).selectmenu();
19+
20+
$( "#width-js, #width-js2" ).selectmenu({
21+
width: 200
22+
});
23+
24+
var fixedMenuWidth = $( "#width-cssmenu" ).selectmenu(),
25+
fixedMenuWidth2 = $( "#width-cssmenu2" ).selectmenu();
26+
27+
fixedMenuWidth.selectmenu( "menuWidget" ).addClass( "fixed-menu-width" );
28+
fixedMenuWidth2.selectmenu( "menuWidget" ).addClass( "fixed-menu-width" );
29+
});
30+
</script>
31+
<style>
32+
fieldset {
33+
border: 0;
34+
}
35+
label {
36+
display: block;
37+
margin: 30px 0 0 0;
38+
}
39+
40+
#width-css,
41+
#width-css2,
42+
#width-cssmenu,
43+
#width-cssmenu2 {
44+
width: 200px;
45+
}
46+
47+
.fixed-menu-width {
48+
width: 400px;
49+
}
50+
</style>
51+
</head>
52+
<body>
53+
54+
<div class="demo">
55+
56+
<form action="#">
57+
58+
<fieldset>
59+
<label for="width-auto">Auto width</label>
60+
<select name="width-auto" id="width-auto">
61+
<option value="jquery">jQuery.js</option>
62+
<option value="jqueryui">ui.jQuery.js</option>
63+
<option value="somefile">Some unknown file</option>
64+
<option value="someotherfile">Some other file with a very long option text</option>
65+
</select>
66+
<label for="width-auto2">Auto width (no long option)</label>
67+
<select name="width-auto2" id="width-auto2">
68+
<option value="jquery">jQuery.js</option>
69+
<option value="jqueryui">ui.jQuery.js</option>
70+
<option value="somefile">Some unknown file</option>
71+
<option value="someotherfile">Some other file</option>
72+
</select>
73+
74+
<label for="width-css">CSS width</label>
75+
<select name="width-css" id="width-css">
76+
<option value="jquery">jQuery.js</option>
77+
<option value="jqueryui">ui.jQuery.js</option>
78+
<option value="somefile">Some unknown file</option>
79+
<option value="someotherfile">Some other file with a very long option text</option>
80+
</select>
81+
82+
<label for="width-css2">CSS width (no long option)</label>
83+
<select name="width-css2" id="width-css2">
84+
<option value="jquery">jQuery.js</option>
85+
<option value="jqueryui">ui.jQuery.js</option>
86+
<option value="somefile">Some unknown file</option>
87+
<option value="someotherfile">Some other file</option>
88+
</select>
89+
90+
<label for="width-js">JS width</label>
91+
<select name="width-js" id="width-js">
92+
<option value="jquery">jQuery.js</option>
93+
<option value="jqueryui">ui.jQuery.js</option>
94+
<option value="somefile">Some unknown file</option>
95+
<option value="someotherfile">Some other file with a very long option text</option>
96+
</select>
97+
<label for="width-js2">JS width (no long option)</label>
98+
<select name="width-js2" id="width-js2">
99+
<option value="jquery">jQuery.js</option>
100+
<option value="jqueryui">ui.jQuery.js</option>
101+
<option value="somefile">Some unknown file</option>
102+
<option value="someotherfile">Some other file</option>
103+
</select>
104+
105+
<label for="width-cssmenu">CSS width for button and menu</label>
106+
<select name="width-cssmenu" id="width-cssmenu">
107+
<option value="jquery">jQuery.js</option>
108+
<option value="jqueryui">ui.jQuery.js</option>
109+
<option value="somefile">Some unknown file</option>
110+
<option value="someotherfile">Some other file with a very long option text</option>
111+
</select>
112+
<label for="width-cssmenu2">CSS width for button and menu (no long option)</label>
113+
<select name="width-cssmenu2" id="width-cssmenu2">
114+
<option value="jquery">jQuery.js</option>
115+
<option value="jqueryui">ui.jQuery.js</option>
116+
<option value="somefile">Some unknown file</option>
117+
<option value="someotherfile">Some other file</option>
118+
</select>
119+
</fieldset>
120+
121+
</form>
122+
123+
</div>
124+
125+
<div class="demo-description">
126+
<p>Width option demo. Take a look at the source code to see how the width is set.</p>
127+
</div>
128+
</body>
129+
</html>

‎ui/jquery.ui.selectmenu.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ $.widget( "ui.selectmenu", {
6060

6161
_drawButton: function() {
6262
var that = this;
63-
63+
6464
// Associate existing label with the new button
6565
this.label = $( "label[for='" + this.ids.element + "']" );
6666
this._on( this.label, {
@@ -134,16 +134,16 @@ $.widget( "ui.selectmenu", {
134134
select: function( event, ui ) {
135135
var item = ui.item.data( "ui-selectmenu-item" ),
136136
oldIndex = that.element[ 0 ].selectedIndex;
137-
137+
138138
// Change native select element
139139
that.element[ 0 ].selectedIndex = item.index;
140-
140+
141141
event.preventDefault();
142-
that._select( item, event );
142+
that._select( item, event );
143143
if ( item.index !== oldIndex ) {
144144
that._trigger( "change", event, { item: item } );
145-
}
146-
145+
}
146+
147147
that.close( event );
148148
},
149149
focus: function( event, ui ) {
@@ -185,7 +185,7 @@ $.widget( "ui.selectmenu", {
185185

186186
_refresh: function() {
187187
var options = this.element.find( "option" ),
188-
item;
188+
item;
189189

190190
if ( !options.length ) {
191191
return;
@@ -367,7 +367,7 @@ $.widget( "ui.selectmenu", {
367367
},
368368
change: function( event ) {
369369
var item = this.items[ this.element[ 0 ].selectedIndex ];
370-
370+
371371
this._select( item, event );
372372
this._trigger( "change", event, { item: item } );
373373
},

0 commit comments

Comments
 (0)