Skip to content

Commit 77bf202

Browse files
tjvantolltjvantoll
committed
Merge branch 'selectmenu'
2 parents be9f2c1 + a9b18bc commit 77bf202

22 files changed

+1911
-1
lines changed

‎Gruntfile.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ var
3535
"progressbar",
3636
"resizable",
3737
"selectable",
38+
"selectmenu",
3839
"slider",
3940
"spinner",
4041
"tabs",

‎build/tasks/testswarm.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ var versions = {
2626
"Progressbar": "progressbar/progressbar.html",
2727
"Resizable": "resizable/resizable.html",
2828
"Selectable": "selectable/selectable.html",
29+
"Selectmenu": "selectmenu/selectmenu.html",
2930
"Slider": "slider/slider.html",
3031
"Sortable": "sortable/sortable.html",
3132
"Spinner": "spinner/spinner.html",

‎demos/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
<li><a href="removeClass/">removeClass</a></li>
2525
<li><a href="resizable/">resizable</a></li>
2626
<li><a href="selectable/">selectable</a></li>
27+
<li><a href="selectmenu/">selectmenu</a></li>
2728
<li><a href="show/">show</a></li>
2829
<li><a href="slider/">slider</a></li>
2930
<li><a href="sortable/">sortable</a></li>

‎demos/selectmenu/custom_render.html

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery UI Selectmenu - Default functionality</title>
7+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
8+
<script src="../../jquery-1.10.2.js"></script>
9+
<script src="../../ui/jquery.ui.core.js"></script>
10+
<script src="../../ui/jquery.ui.widget.js"></script>
11+
<script src="../../ui/jquery.ui.position.js"></script>
12+
<script src="../../ui/jquery.ui.menu.js"></script>
13+
<script src="../../ui/jquery.ui.selectmenu.js"></script>
14+
<link rel="stylesheet" href="../demos.css">
15+
<script>
16+
$(function() {
17+
$.widget( "custom.iconselectmenu", $.ui.selectmenu, {
18+
_renderItem: function( ul, item ) {
19+
var li = $( "<li>", { text: item.label } );
20+
21+
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 );
28+
}
29+
30+
return li.appendTo( ul );
31+
}
32+
});
33+
34+
$( "#filesA" )
35+
.iconselectmenu()
36+
.iconselectmenu( "menuWidget" )
37+
.addClass( "ui-menu-icons" );
38+
39+
$( "#filesB" )
40+
.iconselectmenu()
41+
.iconselectmenu( "menuWidget" )
42+
.addClass( "ui-menu-icons customicons" );
43+
44+
$( "#people" )
45+
.iconselectmenu()
46+
.iconselectmenu( "menuWidget")
47+
.addClass( "ui-menu-icons avatar" );
48+
});
49+
</script>
50+
<style>
51+
h2 {
52+
margin: 30px 0 0 0
53+
}
54+
fieldset {
55+
border: 0;
56+
}
57+
label {
58+
display: block;
59+
}
60+
select {
61+
width: 200px;
62+
}
63+
64+
.ui-selectmenu-menu .ui-menu .ui-menu-item a {
65+
padding-left: 2em;
66+
}
67+
68+
/* select with custom icons */
69+
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item {
70+
padding: 0.5em 0 0.5em 3em;
71+
}
72+
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {
73+
height: 24px;
74+
width: 24px;
75+
top: 0.1em;
76+
}
77+
.ui-icon.video {
78+
background: url(images/24-video-square.png) 0 0 no-repeat;
79+
}
80+
.ui-icon.podcast {
81+
background: url(images/24-podcast-square.png) 0 0 no-repeat;
82+
}
83+
.ui-icon.rss {
84+
background: url(images/24-rss-square.png) 0 0 no-repeat;
85+
}
86+
87+
/* select with CSS avatar icons */
88+
option.avatar {
89+
background-repeat: no-repeat !important;
90+
padding-left: 20px;
91+
}
92+
.avatar .ui-icon {
93+
background-position: left top;
94+
}
95+
</style>
96+
</head>
97+
<body>
98+
99+
<div class="demo">
100+
101+
<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+
135+
</form>
136+
137+
</div>
138+
139+
<div class="demo-description">
140+
<p>The whole rendering process is extendable to make custom styling as easy as possible.</p>
141+
</div>
142+
</body>
143+
</html>

‎demos/selectmenu/default.html

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery UI Selectmenu - Default functionality</title>
7+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
8+
<script src="../../jquery-1.10.2.js"></script>
9+
<script src="../../ui/jquery.ui.core.js"></script>
10+
<script src="../../ui/jquery.ui.widget.js"></script>
11+
<script src="../../ui/jquery.ui.position.js"></script>
12+
<script src="../../ui/jquery.ui.menu.js"></script>
13+
<script src="../../ui/jquery.ui.selectmenu.js"></script>
14+
<link rel="stylesheet" href="../demos.css">
15+
<script>
16+
$(function() {
17+
$( "#speed" ).selectmenu();
18+
19+
$( "#files" ).selectmenu();
20+
21+
$( "#number" )
22+
.selectmenu()
23+
.selectmenu( "menuWidget" )
24+
.addClass( "overflow" );
25+
});
26+
</script>
27+
<style>
28+
fieldset {
29+
border: 0;
30+
}
31+
label {
32+
display: block;
33+
margin: 30px 0 0 0;
34+
}
35+
select {
36+
width: 200px;
37+
}
38+
.overflow {
39+
height: 200px;
40+
}
41+
</style>
42+
</head>
43+
<body>
44+
45+
<div class="demo">
46+
47+
<form action="#">
48+
49+
<fieldset>
50+
<label for="speed">Select a speed</label>
51+
<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>
57+
</select>
58+
59+
<label for="files">Select a file</label>
60+
<select name="files" id="files">
61+
<optgroup label="Scripts">
62+
<option value="jquery">jQuery.js</option>
63+
<option value="jqueryui">ui.jQuery.js</option>
64+
</optgroup>
65+
<optgroup label="Other files">
66+
<option value="somefile">Some unknown file</option>
67+
<option value="someotherfile">Some other file with a very long option text</option>
68+
</optgroup>
69+
</select>
70+
71+
<label for="number">Select a number</label>
72+
<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>
92+
</select>
93+
</fieldset>
94+
95+
</form>
96+
97+
</div>
98+
99+
<div class="demo-description">
100+
<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>
101+
<p>The datasource is a native select element. Supports optgroups.</p>
102+
</div>
103+
</body>
104+
</html>

‎demos/selectmenu/images/24-podcast-square.png

681 Bytes
Loading

‎demos/selectmenu/images/24-rss-square.png

594 Bytes
Loading

‎demos/selectmenu/images/24-video-square.png

649 Bytes
Loading

‎demos/selectmenu/index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery UI Selectmenu Demos</title>
7+
</head>
8+
<body>
9+
10+
<ul>
11+
<li><a href="default.html">Default functionality</a></li>
12+
<li><a href="custom_render.html">Custom item rendering functionality</a></li>
13+
</ul>
14+
15+
</body>
16+
</html>

‎tests/unit/selectmenu/all.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Selectmenu Test Suite</title>
6+
7+
<script src="../../../jquery-1.9.1.js"></script>
8+
9+
<link rel="stylesheet" href="../../../external/qunit.css">
10+
<link rel="stylesheet" href="../qunit-composite.css">
11+
<script src="../../../external/qunit.js"></script>
12+
<script src="../qunit-composite.js"></script>
13+
<script src="../subsuite.js"></script>
14+
15+
<script>
16+
testAllVersions( "selectmenu" );
17+
</script>
18+
</head>
19+
<body>
20+
21+
<h1 id="qunit-header">jQuery UI Selectmenu Test Suite</h1>
22+
<h2 id="qunit-banner"></h2>
23+
<div id="qunit-testrunner-toolbar"></div>
24+
<h2 id="qunit-userAgent"></h2>
25+
<ol id="qunit-tests"></ol>
26+
<div id="qunit-fixture">
27+
28+
</div>
29+
</body>
30+
</html>

0 commit comments

Comments
 (0)