Skip to content

Commit

Permalink
Merge branch 'selectmenu'
Browse files Browse the repository at this point in the history
  • Loading branch information
@tjvantoll
tjvantoll committed Nov 27, 2013
2 parents be9f2c1 + a9b18bc commit 77bf202
Show file tree
Hide file tree
Showing 22 changed files with 1,911 additions and 1 deletion.
1 change: 1 addition & 0 deletions Gruntfile.js
View file
Expand Up @@ -35,6 +35,7 @@ var
"progressbar",
"resizable",
"selectable",
"selectmenu",
"slider",
"spinner",
"tabs",
Expand Down
1 change: 1 addition & 0 deletions build/tasks/testswarm.js
View file
Expand Up @@ -26,6 +26,7 @@ var versions = {
"Progressbar": "progressbar/progressbar.html",
"Resizable": "resizable/resizable.html",
"Selectable": "selectable/selectable.html",
"Selectmenu": "selectmenu/selectmenu.html",
"Slider": "slider/slider.html",
"Sortable": "sortable/sortable.html",
"Spinner": "spinner/spinner.html",
Expand Down
1 change: 1 addition & 0 deletions demos/index.html
View file
Expand Up @@ -24,6 +24,7 @@
<li><a href="removeClass/">removeClass</a></li>
<li><a href="resizable/">resizable</a></li>
<li><a href="selectable/">selectable</a></li>
<li><a href="selectmenu/">selectmenu</a></li>
<li><a href="show/">show</a></li>
<li><a href="slider/">slider</a></li>
<li><a href="sortable/">sortable</a></li>
Expand Down
143 changes: 143 additions & 0 deletions demos/selectmenu/custom_render.html
View file
@@ -0,0 +1,143 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Selectmenu - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.10.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.menu.js"></script>
<script src="../../ui/jquery.ui.selectmenu.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$.widget( "custom.iconselectmenu", $.ui.selectmenu, {
_renderItem: function( ul, item ) {
var li = $( "<li>", { text: item.label } );

if ( item.disabled ) {
li.addClass( "ui-state-disabled" ).text( item.label );
} else {
$( "<span>", {
style: item.element.attr( "style" ),
"class": "ui-icon " + item.element.attr( "class" )
}).appendTo( li );
}

return li.appendTo( ul );
}
});

$( "#filesA" )
.iconselectmenu()
.iconselectmenu( "menuWidget" )
.addClass( "ui-menu-icons" );

$( "#filesB" )
.iconselectmenu()
.iconselectmenu( "menuWidget" )
.addClass( "ui-menu-icons customicons" );

$( "#people" )
.iconselectmenu()
.iconselectmenu( "menuWidget")
.addClass( "ui-menu-icons avatar" );
});
</script>
<style>
h2 {
margin: 30px 0 0 0
}
fieldset {
border: 0;
}
label {
display: block;
}
select {
width: 200px;
}

.ui-selectmenu-menu .ui-menu .ui-menu-item a {
padding-left: 2em;
}

/* select with custom icons */
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item {
padding: 0.5em 0 0.5em 3em;
}
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {
height: 24px;
width: 24px;
top: 0.1em;
}
.ui-icon.video {
background: url(images/24-video-square.png) 0 0 no-repeat;
}
.ui-icon.podcast {
background: url(images/24-podcast-square.png) 0 0 no-repeat;
}
.ui-icon.rss {
background: url(images/24-rss-square.png) 0 0 no-repeat;
}

/* select with CSS avatar icons */
option.avatar {
background-repeat: no-repeat !important;
padding-left: 20px;
}
.avatar .ui-icon {
background-position: left top;
}
</style>
</head>
<body>

<div class="demo">

<form action="#">

<h2>Selectmenu with framework icons</h2>
<fieldset>
<label for="filesA">Select a File:</label>
<select name="filesA" id="filesA">
<option value="jquery" class="ui-icon-script">jQuery.js</option>
<option value="jquerylogo" class="ui-icon-image">jQuery Logo</option>
<option value="jqueryui" class="ui-icon-script">ui.jQuery.js</option>
<option value="jqueryuilogo" selected="selected" class="ui-icon-image">jQuery UI Logo</option>
<option value="somefile">Some unknown file</option>
</select>
</fieldset>

<h2>Selectmenu with custom icon images</h2>
<fieldset>
<label for="filesB">Select a podcast:</label>
<select name="filesB" id="filesB">
<option value="mypodcast" class="podcast">John Resig Podcast</option>
<option value="myvideo" class="video">Scott Gonzales Video</option>
<option value="myrss" class="rss">jQuery RSS XML</option>
</select>
</fieldset>

<h2>Selectmenu with custom avatar 16x16 images as CSS background</h2>
<fieldset>
<label for="people">Select a Person:</label>
<select name="people" id="people">
<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>
<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>
<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>
</select>
</fieldset>

</form>

</div>

<div class="demo-description">
<p>The whole rendering process is extendable to make custom styling as easy as possible.</p>
</div>
</body>
</html>
104 changes: 104 additions & 0 deletions demos/selectmenu/default.html
View file
@@ -0,0 +1,104 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Selectmenu - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.10.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.menu.js"></script>
<script src="../../ui/jquery.ui.selectmenu.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#speed" ).selectmenu();

$( "#files" ).selectmenu();

$( "#number" )
.selectmenu()
.selectmenu( "menuWidget" )
.addClass( "overflow" );
});
</script>
<style>
fieldset {
border: 0;
}
label {
display: block;
margin: 30px 0 0 0;
}
select {
width: 200px;
}
.overflow {
height: 200px;
}
</style>
</head>
<body>

<div class="demo">

<form action="#">

<fieldset>
<label for="speed">Select a speed</label>
<select name="speed" id="speed">
<option value="Slower">Slower</option>
<option value="Slow">Slow</option>
<option value="Medium" selected="selected">Medium</option>
<option value="Fast">Fast</option>
<option value="Faster">Faster</option>
</select>

<label for="files">Select a file</label>
<select name="files" id="files">
<optgroup label="Scripts">
<option value="jquery">jQuery.js</option>
<option value="jqueryui">ui.jQuery.js</option>
</optgroup>
<optgroup label="Other files">
<option value="somefile">Some unknown file</option>
<option value="someotherfile">Some other file with a very long option text</option>
</optgroup>
</select>

<label for="number">Select a number</label>
<select name="number" id="number">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
</select>
</fieldset>

</form>

</div>

<div class="demo-description">
<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>
<p>The datasource is a native select element. Supports optgroups.</p>
</div>
</body>
</html>
Binary file added demos/selectmenu/images/24-podcast-square.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demos/selectmenu/images/24-rss-square.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demos/selectmenu/images/24-video-square.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions demos/selectmenu/index.html
View file
@@ -0,0 +1,16 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Selectmenu Demos</title>
</head>
<body>

<ul>
<li><a href="default.html">Default functionality</a></li>
<li><a href="custom_render.html">Custom item rendering functionality</a></li>
</ul>

</body>
</html>
30 changes: 30 additions & 0 deletions tests/unit/selectmenu/all.html
View file
@@ -0,0 +1,30 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Selectmenu Test Suite</title>

<script src="../../../jquery-1.9.1.js"></script>

<link rel="stylesheet" href="../../../external/qunit.css">
<link rel="stylesheet" href="../qunit-composite.css">
<script src="../../../external/qunit.js"></script>
<script src="../qunit-composite.js"></script>
<script src="../subsuite.js"></script>

<script>
testAllVersions( "selectmenu" );
</script>
</head>
<body>

<h1 id="qunit-header">jQuery UI Selectmenu Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">

</div>
</body>
</html>

0 comments on commit 77bf202

Please sign in to comment.