Skip to content

Commit 9d78023

Browse files
scottgonzalezscottgonzalez
committed
Selectemnu: Demo cleanup
1 parent baf6bc5 commit 9d78023

File tree

2 files changed

+67
-72
lines changed

2 files changed

+67
-72
lines changed

‎demos/selectmenu/custom_render.html

Lines changed: 42 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<title>jQuery UI Selectmenu - Default functionality</title>
6+
<title>jQuery UI Selectmenu - Custom Rendering</title>
77
<link rel="stylesheet" href="../../themes/base/all.css">
88
<script src="../../jquery.js"></script>
99
<script src="../../ui/core.js"></script>
@@ -19,32 +19,33 @@
1919
var li = $( "<li>", { text: item.label } );
2020

2121
if ( item.disabled ) {
22-
li.addClass( "ui-state-disabled" ).text( item.label );
23-
} else {
24-
$( "<span>", {
25-
style: item.element.attr( "style" ),
26-
"class": "ui-icon " + item.element.attr( "class" )
27-
}).appendTo( li );
22+
li.addClass( "ui-state-disabled" );
2823
}
2924

25+
$( "<span>", {
26+
style: item.element.attr( "data-style" ),
27+
"class": "ui-icon " + item.element.attr( "data-class" )
28+
})
29+
.appendTo( li );
30+
3031
return li.appendTo( ul );
3132
}
3233
});
3334

3435
$( "#filesA" )
3536
.iconselectmenu()
3637
.iconselectmenu( "menuWidget" )
37-
.addClass( "ui-menu-icons" );
38+
.addClass( "ui-menu-icons" );
3839

3940
$( "#filesB" )
4041
.iconselectmenu()
4142
.iconselectmenu( "menuWidget" )
42-
.addClass( "ui-menu-icons customicons" );
43+
.addClass( "ui-menu-icons customicons" );
4344

4445
$( "#people" )
4546
.iconselectmenu()
4647
.iconselectmenu( "menuWidget")
47-
.addClass( "ui-menu-icons avatar" );
48+
.addClass( "ui-menu-icons avatar" );
4849
});
4950
</script>
5051
<style>
@@ -61,10 +62,6 @@
6162
width: 200px;
6263
}
6364

64-
.ui-selectmenu-menu .ui-menu .ui-menu-item a {
65-
padding-left: 2em;
66-
}
67-
6865
/* select with custom icons */
6966
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item {
7067
padding: 0.5em 0 0.5em 3em;
@@ -99,39 +96,37 @@
9996
<div class="demo">
10097

10198
<form action="#">
102-
103-
<h2>Selectmenu with framework icons</h2>
104-
<fieldset>
105-
<label for="filesA">Select a File:</label>
106-
<select name="filesA" id="filesA">
107-
<option value="jquery" class="ui-icon-script">jQuery.js</option>
108-
<option value="jquerylogo" class="ui-icon-image">jQuery Logo</option>
109-
<option value="jqueryui" class="ui-icon-script">ui.jQuery.js</option>
110-
<option value="jqueryuilogo" selected="selected" class="ui-icon-image">jQuery UI Logo</option>
111-
<option value="somefile">Some unknown file</option>
112-
</select>
113-
</fieldset>
114-
115-
<h2>Selectmenu with custom icon images</h2>
116-
<fieldset>
117-
<label for="filesB">Select a podcast:</label>
118-
<select name="filesB" id="filesB">
119-
<option value="mypodcast" class="podcast">John Resig Podcast</option>
120-
<option value="myvideo" class="video">Scott Gonzales Video</option>
121-
<option value="myrss" class="rss">jQuery RSS XML</option>
122-
</select>
123-
</fieldset>
124-
125-
<h2>Selectmenu with custom avatar 16x16 images as CSS background</h2>
126-
<fieldset>
127-
<label for="people">Select a Person:</label>
128-
<select name="people" id="people">
129-
<option value="1" class="avatar" style="background-image: url('http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&amp;r=g&amp;s=16');">John Resig</option>
130-
<option value="2" class="avatar" style="background-image: url('http://www.gravatar.com/avatar/e42b1e5c7cfd2be0933e696e292a4d5f?d=monsterid&amp;r=g&amp;s=16');">Tauren Mills</option>
131-
<option value="3" class="avatar" style="background-image: url('http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&amp;r=g&amp;s=16');">Jane Doe</option>
132-
</select>
133-
</fieldset>
134-
99+
<h2>Selectmenu with framework icons</h2>
100+
<fieldset>
101+
<label for="filesA">Select a File:</label>
102+
<select name="filesA" id="filesA">
103+
<option value="jquery" data-class="ui-icon-script">jQuery.js</option>
104+
<option value="jquerylogo" data-class="ui-icon-image">jQuery Logo</option>
105+
<option value="jqueryui" data-class="ui-icon-script">ui.jQuery.js</option>
106+
<option value="jqueryuilogo" selected="selected" data-class="ui-icon-image">jQuery UI Logo</option>
107+
<option value="somefile" disabled="disabled" data-class="ui-icon-help">Some unknown file</option>
108+
</select>
109+
</fieldset>
110+
111+
<h2>Selectmenu with custom icon images</h2>
112+
<fieldset>
113+
<label for="filesB">Select a podcast:</label>
114+
<select name="filesB" id="filesB">
115+
<option value="mypodcast" data-class="podcast">John Resig Podcast</option>
116+
<option value="myvideo" data-class="video">Scott González Video</option>
117+
<option value="myrss" data-class="rss">jQuery RSS XML</option>
118+
</select>
119+
</fieldset>
120+
121+
<h2>Selectmenu with custom avatar 16x16 images as CSS background</h2>
122+
<fieldset>
123+
<label for="people">Select a Person:</label>
124+
<select name="people" id="people">
125+
<option value="1" data-class="avatar" data-style="background-image: url('http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&amp;r=g&amp;s=16');">John Resig</option>
126+
<option value="2" data-class="avatar" data-style="background-image: url('http://www.gravatar.com/avatar/e42b1e5c7cfd2be0933e696e292a4d5f?d=monsterid&amp;r=g&amp;s=16');">Tauren Mills</option>
127+
<option value="3" data-class="avatar" data-style="background-image: url('http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&amp;r=g&amp;s=16');">Jane Doe</option>
128+
</select>
129+
</fieldset>
135130
</form>
136131

137132
</div>

‎demos/selectmenu/default.html

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
$( "#number" )
2222
.selectmenu()
2323
.selectmenu( "menuWidget" )
24-
.addClass( "overflow" );
24+
.addClass( "overflow" );
2525
});
2626
</script>
2727
<style>
@@ -49,11 +49,11 @@
4949
<fieldset>
5050
<label for="speed">Select a speed</label>
5151
<select name="speed" id="speed">
52-
<option value="Slower">Slower</option>
53-
<option value="Slow">Slow</option>
54-
<option value="Medium" selected="selected">Medium</option>
55-
<option value="Fast">Fast</option>
56-
<option value="Faster">Faster</option>
52+
<option>Slower</option>
53+
<option>Slow</option>
54+
<option selected="selected">Medium</option>
55+
<option>Fast</option>
56+
<option>Faster</option>
5757
</select>
5858

5959
<label for="files">Select a file</label>
@@ -70,25 +70,25 @@
7070

7171
<label for="number">Select a number</label>
7272
<select name="number" id="number">
73-
<option value="1">1</option>
74-
<option value="2" selected="selected">2</option>
75-
<option value="3">3</option>
76-
<option value="4">4</option>
77-
<option value="5">5</option>
78-
<option value="6">6</option>
79-
<option value="7">7</option>
80-
<option value="8">8</option>
81-
<option value="9">9</option>
82-
<option value="10">10</option>
83-
<option value="11">11</option>
84-
<option value="12">12</option>
85-
<option value="13">13</option>
86-
<option value="14">14</option>
87-
<option value="15">15</option>
88-
<option value="16">16</option>
89-
<option value="17">17</option>
90-
<option value="18">18</option>
91-
<option value="19">19</option>
73+
<option>1</option>
74+
<option selected="selected">2</option>
75+
<option>3</option>
76+
<option>4</option>
77+
<option>5</option>
78+
<option>6</option>
79+
<option>7</option>
80+
<option>8</option>
81+
<option>9</option>
82+
<option>10</option>
83+
<option>11</option>
84+
<option>12</option>
85+
<option>13</option>
86+
<option>14</option>
87+
<option>15</option>
88+
<option>16</option>
89+
<option>17</option>
90+
<option>18</option>
91+
<option>19</option>
9292
</select>
9393
</fieldset>
9494

0 commit comments

Comments
 (0)