<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery UI Selectmenu - Default functionality</title>
+ <title>jQuery UI Selectmenu - Custom Rendering</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../jquery.js"></script>
<script src="../../ui/core.js"></script>
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 );
+ li.addClass( "ui-state-disabled" );
}
+ $( "<span>", {
+ style: item.element.attr( "data-style" ),
+ "class": "ui-icon " + item.element.attr( "data-class" )
+ })
+ .appendTo( li );
+
return li.appendTo( ul );
}
});
$( "#filesA" )
.iconselectmenu()
.iconselectmenu( "menuWidget" )
- .addClass( "ui-menu-icons" );
+ .addClass( "ui-menu-icons" );
$( "#filesB" )
.iconselectmenu()
.iconselectmenu( "menuWidget" )
- .addClass( "ui-menu-icons customicons" );
+ .addClass( "ui-menu-icons customicons" );
$( "#people" )
.iconselectmenu()
.iconselectmenu( "menuWidget")
- .addClass( "ui-menu-icons avatar" );
+ .addClass( "ui-menu-icons avatar" );
});
</script>
<style>
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;
<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&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>
-
+ <h2>Selectmenu with framework icons</h2>
+ <fieldset>
+ <label for="filesA">Select a File:</label>
+ <select name="filesA" id="filesA">
+ <option value="jquery" data-class="ui-icon-script">jQuery.js</option>
+ <option value="jquerylogo" data-class="ui-icon-image">jQuery Logo</option>
+ <option value="jqueryui" data-class="ui-icon-script">ui.jQuery.js</option>
+ <option value="jqueryuilogo" selected="selected" data-class="ui-icon-image">jQuery UI Logo</option>
+ <option value="somefile" disabled="disabled" data-class="ui-icon-help">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" data-class="podcast">John Resig Podcast</option>
+ <option value="myvideo" data-class="video">Scott González Video</option>
+ <option value="myrss" data-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" data-class="avatar" data-style="background-image: url('http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&r=g&s=16');">John Resig</option>
+ <option value="2" data-class="avatar" data-style="background-image: url('http://www.gravatar.com/avatar/e42b1e5c7cfd2be0933e696e292a4d5f?d=monsterid&r=g&s=16');">Tauren Mills</option>
+ <option value="3" data-class="avatar" data-style="background-image: url('http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&r=g&s=16');">Jane Doe</option>
+ </select>
+ </fieldset>
</form>
</div>
$( "#number" )
.selectmenu()
.selectmenu( "menuWidget" )
- .addClass( "overflow" );
+ .addClass( "overflow" );
});
</script>
<style>
<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>
+ <option>Slower</option>
+ <option>Slow</option>
+ <option selected="selected">Medium</option>
+ <option>Fast</option>
+ <option>Faster</option>
</select>
<label for="files">Select a file</label>
<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>
+ <option>1</option>
+ <option selected="selected">2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+ <option>6</option>
+ <option>7</option>
+ <option>8</option>
+ <option>9</option>
+ <option>10</option>
+ <option>11</option>
+ <option>12</option>
+ <option>13</option>
+ <option>14</option>
+ <option>15</option>
+ <option>16</option>
+ <option>17</option>
+ <option>18</option>
+ <option>19</option>
</select>
</fieldset>
projects / jquery-ui.git / commitdiff