Skip to content
Permalink
Browse files
Merge 63d77ae into 74a3f2c
  • Loading branch information
GitHub Merge Button committed Nov 25, 2011
2 parents 74a3f2c + 63d77ae commit 24305b32810b0bc53184b931ed88f8f79af4cc23
@@ -0,0 +1,120 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Selectmenu - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.7.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.button.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 />" ).data( "item.selectmenu", item );
if ( item.disabled ) {
li.addClass( 'ui-state-disabled' ).text( item.label );
} else {
el = item.element;
var link = $( "<a />", {
html: icon = '<span style="' + el.attr("style") + '" class="ui-icon ' + el.attr("class") + '"></span>' + item.label,
href: '#'
});
li.append( link );
}

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

var files = $('select#files').iconselectmenu({
dropdown: false
});
files.iconselectmenu("widget").children("ul").addClass("ui-menu-icons");

var filesB = $('select#filesB').iconselectmenu({
dropdown: false
});
filesB.iconselectmenu("widget").children("ul").addClass("ui-menu-icons customicons");

var peopleA = $('select#peopleA').iconselectmenu();
peopleA.iconselectmenu("widget").children("ul").addClass("ui-menu-icons avatar");
});
</script>
<style>
form { margin: 100px 0 0 0 }
h2 { margin: 30px 0 0 0 }
fieldset { border: 0; }
label { display: block; }
select { width: 200px; }

.ui-selectmenu-menu .ui-menu .ui-icon { top: 0.4em; }
.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 a { padding: 0.5em 0 0.5em 3em; }
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item a .ui-icon { height: 24px; width: 24px; top: 0.2em;}
.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; }

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

<div class="demo">

<form action="#">

<h2>"popup" style with framework icons</h2>
<fieldset>
<label for="files">Select a File:</label>
<select name="files" id="files">
<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>"popup" style with custom icon images</h2>
<fieldset>
<label for="filesB">Select a File:</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>"dropdown" style with custom avatar 16x16 images as CSS background</h2>
<fieldset>
<label for="peopleA">Select a Person:</label>
<select name="peopleA" id="peopleA">
<option value="1" class="avatar" style="background-image: url(http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&r=g&s=16);">John Resig</option>
<option value="2" class="avatar" style="background-image: url(http://www.gravatar.com/avatar/e42b1e5c7cfd2be0933e696e292a4d5f?d=monsterid&r=g&s=16);">Tauren Mills</option>
<option value="3" class="avatar" style="background-image: url(http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&r=g&s=16);">Jane Doe</option>
</select>
</fieldset>

</form>

</div><!-- End demo -->



<div class="demo-description">
<p>The whole rendering process is extendable to make custom styling as easy as possible.</p>
</div><!-- End demo-description -->

</body>
</html>
@@ -0,0 +1,102 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Selectmenu - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.7.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.button.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() {
$('select#speed').selectmenu();

var withOverflow = $('select#number').selectmenu({
dropdown: false
});
withOverflow.selectmenu("widget").addClass("overflow");

$('select#files').selectmenu();

});
</script>
<style>
form { margin: 100px 0 0 0 }
fieldset { border: 0; }
label { display: block; }
select { width: 200px; }
.overflow ul { height: 200px; overflow: auto; overflow-y: auto; overflow-x: hidden;}
</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>
<br />
<br />
<br />
<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>
<br />
<br />
<br />
<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</option>
</optgroup>
</select>
</fieldset>
</form>

</div><!-- End demo -->



<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><!-- End demo-description -->

</body>
</html>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Selectmenu Demos</title>
<link rel="stylesheet" href="../demos.css">
</head>
<body>
<div class="demos-nav">
<h4>Examples</h4>
<ul>
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
<li class="demo-config-on"><a href="custom_render.html">Custom item rendering functionality</a></li>
</ul>
</div>
</body>
</html>
@@ -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.6.2.js"></script>

<link rel="stylesheet" href="../../../external/qunit.css">
<link rel="stylesheet" href="../subsuiteRunner.css">
<script src="../../../external/qunit.js"></script>
<script src="../subsuiteRunner.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,0 +1,87 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Selectmenu Test Suite</title>

<link rel="stylesheet" href="../../../themes/base/jquery.ui.core.css">
<link rel="stylesheet" href="../../../themes/base/jquery.ui.button.css">
<link rel="stylesheet" href="../../../themes/base/jquery.ui.menu.css">
<link rel="stylesheet" href="../../../themes/base/jquery.ui.selectmenu.css">

<script src="../../jquery.js"></script>
<script src="../../../ui/jquery.ui.core.js"></script>
<script src="../../../ui/jquery.ui.widget.js"></script>
<script src="../../../ui/jquery.ui.button.js"></script>
<script src="../../../ui/jquery.ui.menu.js"></script>
<script src="../../../ui/jquery.ui.selectmenu.js"></script>

<link rel="stylesheet" href="../../../external/qunit.css">
<script src="../../../external/qunit.js"></script>
<script src="../../jquery.simulate.js"></script>
<script src="../testsuite.js"></script>

<script src="selectmenu_core.js"></script>
<script src="selectmenu_defaults.js"></script>
<script src="selectmenu_events.js"></script>
<script src="selectmenu_methods.js"></script>
<script src="selectmenu_options.js"></script>

<script src="../swarminject.js"></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">

<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="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>

<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</option>
</optgroup>
</select>

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

0 comments on commit 24305b3

Please sign in to comment.