jquery-ui/demos/selectmenu/custom_render.html

<!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/all.css">
	<script src="../../jquery.js"></script>
	<script src="../../ui/core.js"></script>
	<script src="../../ui/widget.js"></script>
	<script src="../../ui/position.js"></script>
	<script src="../../ui/menu.js"></script>
	<script src="../../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>
Selectmenu: fix doctype declaration 2012-11-12 22:08:38 +00:00			`<!doctype html>`
Selectmenu: added custom_render.html demo, removed widgetBaseClass 2011-10-08 23:54:36 +00:00			`<html lang="en">`
			`<head>`
			`<meta charset="utf-8">`
Demos: Add meta-viewport element for better 'mobile' testing 2013-11-25 13:24:19 +00:00			`<meta name="viewport" content="width=device-width, initial-scale=1">`
Selectmenu: added custom_render.html demo, removed widgetBaseClass 2011-10-08 23:54:36 +00:00			`<title>jQuery UI Selectmenu - Default functionality</title>`
All: Rename all files, removing the "jquery.ui." prefix; - By executing https://gist.github.com/jzaefferer/893fcf70b7eebc1dc271; Fixes #9464 Closes gh-1029 2013-12-02 18:36:12 +00:00			`<link rel="stylesheet" href="../../themes/base/all.css">`
All: Rename jquery.js to exclude version in filename 2014-03-03 21:52:54 +00:00			`<script src="../../jquery.js"></script>`
All: Rename all files, removing the "jquery.ui." prefix; - By executing https://gist.github.com/jzaefferer/893fcf70b7eebc1dc271; Fixes #9464 Closes gh-1029 2013-12-02 18:36:12 +00:00			`<script src="../../ui/core.js"></script>`
			`<script src="../../ui/widget.js"></script>`
			`<script src="../../ui/position.js"></script>`
			`<script src="../../ui/menu.js"></script>`
			`<script src="../../ui/selectmenu.js"></script>`
Selectmenu: added custom_render.html demo, removed widgetBaseClass 2011-10-08 23:54:36 +00:00			`<link rel="stylesheet" href="../demos.css">`
			`<script>`
			`$(function() {`
			`$.widget( "custom.iconselectmenu", $.ui.selectmenu, {`
			`_renderItem: function( ul, item ) {`
Selectmenu: remove link element and adjust styles in custom renderer demo 2013-11-25 23:32:27 +00:00			`var li = $( "<li>", { text: item.label } );`
Selectmenu: improved custom render demo CGL 2012-12-18 23:20:12 +00:00
Selectmenu: added custom_render.html demo, removed widgetBaseClass 2011-10-08 23:54:36 +00:00			`if ( item.disabled ) {`
Selectmenu: improved custom render demo CGL 2012-12-18 23:20:12 +00:00			`li.addClass( "ui-state-disabled" ).text( item.label );`
Selectmenu: added custom_render.html demo, removed widgetBaseClass 2011-10-08 23:54:36 +00:00			`} else {`
Selectmenu: remove link element and adjust styles in custom renderer demo 2013-11-25 23:32:27 +00:00			`$( "<span>", {`
Selectmenu; improve HTML building in custom render demo 2013-04-30 21:40:53 +00:00			`style: item.element.attr( "style" ),`
			`"class": "ui-icon " + item.element.attr( "class" )`
Selectmenu: remove link element and adjust styles in custom renderer demo 2013-11-25 23:32:27 +00:00			`}).appendTo( li );`
Upgrade jQuery to 1.7.1. 2011-11-24 10:27:35 +00:00			`}`

Selectmenu: added custom_render.html demo, removed widgetBaseClass 2011-10-08 23:54:36 +00:00			`return li.appendTo( ul );`
			`}`
Upgrade jQuery to 1.7.1. 2011-11-24 10:27:35 +00:00			`});`

Selectmenu: clean up custom render demo 2013-04-29 18:14:43 +00:00			`$( "#filesA" )`
			`.iconselectmenu()`
			`.iconselectmenu( "menuWidget" )`
			`.addClass( "ui-menu-icons" );`
Upgrade jQuery to 1.7.1. 2011-11-24 10:27:35 +00:00
Selectmenu: clean up custom render demo 2013-04-29 18:14:43 +00:00			`$( "#filesB" )`
			`.iconselectmenu()`
			`.iconselectmenu( "menuWidget" )`
			`.addClass( "ui-menu-icons customicons" );`
Upgrade jQuery to 1.7.1. 2011-11-24 10:27:35 +00:00
Selectmenu: clean up custom render demo 2013-04-29 18:14:43 +00:00			`$( "#people" )`
			`.iconselectmenu()`
			`.iconselectmenu( "menuWidget")`
			`.addClass( "ui-menu-icons avatar" );`
Selectmenu: added custom_render.html demo, removed widgetBaseClass 2011-10-08 23:54:36 +00:00			`});`
			`</script>`
			`<style>`
Selectmenu: clean up custom render demo 2013-04-29 18:14:43 +00:00			`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;`
			`}`
Upgrade jQuery to 1.7.1. 2011-11-24 10:27:35 +00:00
Selectmenu: added custom_render.html demo, removed widgetBaseClass 2011-10-08 23:54:36 +00:00			`/* select with custom icons */`
Selectmenu: remove link element and adjust styles in custom renderer demo 2013-11-25 23:32:27 +00:00			`.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item {`
Selectmenu: clean up custom render demo 2013-04-29 18:14:43 +00:00			`padding: 0.5em 0 0.5em 3em;`
			`}`
Selectmenu: remove link element and adjust styles in custom renderer demo 2013-11-25 23:32:27 +00:00			`.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {`
Selectmenu: clean up custom render demo 2013-04-29 18:14:43 +00:00			`height: 24px;`
			`width: 24px;`
Selectmenu: remove link element and adjust styles in custom renderer demo 2013-11-25 23:32:27 +00:00			`top: 0.1em;`
Selectmenu: clean up custom render demo 2013-04-29 18:14:43 +00:00			`}`
			`.ui-icon.video {`
All: Quote CSS url() values Closes gh-1172 2014-01-24 21:18:30 +00:00			`background: url("images/24-video-square.png") 0 0 no-repeat;`
Selectmenu: clean up custom render demo 2013-04-29 18:14:43 +00:00			`}`
			`.ui-icon.podcast {`
All: Quote CSS url() values Closes gh-1172 2014-01-24 21:18:30 +00:00			`background: url("images/24-podcast-square.png") 0 0 no-repeat;`
Selectmenu: clean up custom render demo 2013-04-29 18:14:43 +00:00			`}`
			`.ui-icon.rss {`
All: Quote CSS url() values Closes gh-1172 2014-01-24 21:18:30 +00:00			`background: url("images/24-rss-square.png") 0 0 no-repeat;`
Selectmenu: clean up custom render demo 2013-04-29 18:14:43 +00:00			`}`
Upgrade jQuery to 1.7.1. 2011-11-24 10:27:35 +00:00
Selectmenu: CSS fix for gravatar demo 2012-11-13 21:22:40 +00:00			`/* select with CSS avatar icons */`
Selectmenu: clean up custom render demo 2013-04-29 18:14:43 +00:00			`option.avatar {`
			`background-repeat: no-repeat !important;`
			`padding-left: 20px;`
			`}`
			`.avatar .ui-icon {`
			`background-position: left top;`
			`}`
Selectmenu: added custom_render.html demo, removed widgetBaseClass 2011-10-08 23:54:36 +00:00			`</style>`
			`</head>`
			`<body>`
Upgrade jQuery to 1.7.1. 2011-11-24 10:27:35 +00:00
Selectmenu: added custom_render.html demo, removed widgetBaseClass 2011-10-08 23:54:36 +00:00			`<div class="demo">`

Upgrade jQuery to 1.7.1. 2011-11-24 10:27:35 +00:00			`<form action="#">`
Selectmenu: added custom_render.html demo, removed widgetBaseClass 2011-10-08 23:54:36 +00:00
Selectmenu: improve custom render demo 2013-03-09 13:26:13 +00:00			`<h2>Selectmenu with framework icons</h2>`
Selectmenu: added custom_render.html demo, removed widgetBaseClass 2011-10-08 23:54:36 +00:00			`<fieldset>`
Selectmenu: clean up custom render demo 2013-04-29 18:14:43 +00:00			`<label for="filesA">Select a File:</label>`
			`<select name="filesA" id="filesA">`
Selectmenu: added custom_render.html demo, removed widgetBaseClass 2011-10-08 23:54:36 +00:00			`<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>`
Upgrade jQuery to 1.7.1. 2011-11-24 10:27:35 +00:00
Selectmenu: improve custom render demo 2013-03-09 13:26:13 +00:00			`<h2>Selectmenu with custom icon images</h2>`
Selectmenu: added custom_render.html demo, removed widgetBaseClass 2011-10-08 23:54:36 +00:00			`<fieldset>`
Selectmenu: improve custom render demo 2013-03-09 13:26:13 +00:00			`<label for="filesB">Select a podcast:</label>`
Selectmenu: added custom_render.html demo, removed widgetBaseClass 2011-10-08 23:54:36 +00:00			`<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>`
Upgrade jQuery to 1.7.1. 2011-11-24 10:27:35 +00:00			`</fieldset>`

Selectmenu: improve custom render demo 2013-03-09 13:26:13 +00:00			`<h2>Selectmenu with custom avatar 16x16 images as CSS background</h2>`
Selectmenu: added custom_render.html demo, removed widgetBaseClass 2011-10-08 23:54:36 +00:00			`<fieldset>`
Selectmenu: clean up custom render demo 2013-04-29 18:14:43 +00:00			`<label for="people">Select a Person:</label>`
			`<select name="people" id="people">`
All: Quote CSS url() values Closes gh-1172 2014-01-24 21:18:30 +00:00			`<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>`
Selectmenu: added custom_render.html demo, removed widgetBaseClass 2011-10-08 23:54:36 +00:00			`</select>`
			`</fieldset>`
Upgrade jQuery to 1.7.1. 2011-11-24 10:27:35 +00:00
Selectmenu: added custom_render.html demo, removed widgetBaseClass 2011-10-08 23:54:36 +00:00			`</form>`

Selectmenu: clean up custom render demo 2013-04-29 18:14:43 +00:00			`</div>`
Selectmenu: added custom_render.html demo, removed widgetBaseClass 2011-10-08 23:54:36 +00:00
			`<div class="demo-description">`
			`<p>The whole rendering process is extendable to make custom styling as easy as possible.</p>`
Selectmenu: clean up custom render demo 2013-04-29 18:14:43 +00:00			`</div>`
Selectmenu: added custom_render.html demo, removed widgetBaseClass 2011-10-08 23:54:36 +00:00			`</body>`
			`</html>`