From 2ab514fcd6bfe5911a5bc6e10404089effb1b922 Mon Sep 17 00:00:00 2001 From: Felix Nagel Date: Wed, 19 Dec 2012 00:20:12 +0100 Subject: Selectmenu: improved custom render demo CGL --- demos/selectmenu/custom_render.html | 31 +++++++++++++++++++------------ 1 file changed, 19 insertions(+), 12 deletions(-) (limited to 'demos/selectmenu/custom_render.html') diff --git a/demos/selectmenu/custom_render.html b/demos/selectmenu/custom_render.html index e6efb12d1..1aa563d61 100644 --- a/demos/selectmenu/custom_render.html +++ b/demos/selectmenu/custom_render.html @@ -16,33 +16,40 @@ $.widget( "custom.iconselectmenu", $.ui.selectmenu, { _renderItem: function( ul, item ) { - var li = $( "
  • " ).data( "ui-selectmenu-item", item ); + var li = $( "
  • " ).data( "ui-selectmenu-item", item ), + element, + span; + if ( item.disabled ) { - li.addClass( 'ui-state-disabled' ).text( item.label ); + li.addClass( "ui-state-disabled" ).text( item.label ); } else { - el = item.element; - $( "", { - html: icon = '' + item.label, + element = item.element; + span = $( "", { + style: element.attr( "style" ), + 'class': "ui-icon " + element.attr( "class" ) + }); + $( "", { + text: item.label, href: '#' - }).appendTo( li ); + }).append( span ).appendTo( li ); } return li.appendTo( ul ); } }); - var files = $('select#files').iconselectmenu({ + var files = $( "select#files" ).iconselectmenu({ dropdown: false }); - files.iconselectmenu("menuWidget").addClass("ui-menu-icons"); + files.iconselectmenu( "menuWidget" ).addClass( "ui-menu-icons" ); - var filesB = $('select#filesB').iconselectmenu({ + var filesB = $( "select#filesB" ).iconselectmenu({ dropdown: false }); - filesB.iconselectmenu("menuWidget").addClass("ui-menu-icons customicons"); + filesB.iconselectmenu( "menuWidget" ).addClass( "ui-menu-icons customicons" ); - var peopleA = $('select#peopleA').iconselectmenu(); - peopleA.iconselectmenu("menuWidget").addClass("ui-menu-icons avatar"); + var peopleA = $( "select#peopleA" ).iconselectmenu(); + peopleA.iconselectmenu( "menuWidget").addClass( "ui-menu-icons avatar" ); }); 
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>jQuery UI Button - Default demo</title>
	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
	<link type="text/css" href="../demos.css" rel="stylesheet" />
	<script type="text/javascript">
	$(function() {
		$("#rerun")
			.button()
			.click( function() {
				alert( "Running the last action" );
			})
		.next()
			.button( {
				text: false,
				icons: {
					primary: "ui-icon-triangle-1-s"
				}
			})
			.click( function() {
				var menu = $(this).parent().next().show().position({
					my: "left top",
					at: "left bottom",
					of: this
				});
				$(document).one("click", function() {
					menu.hide();
				});
				return false;
			})
		.parent()
			.buttonset()
		.next()
			.hide()
			.menu();
	});
	</script>
	<style>
		.ui-menu { position: absolute; width: 100px; }
	</style>
</head>
<body>

<div class="demo">

	<div>
		<div>
			<button id="rerun">Run last action</button>
			<button id="select">Select an action</button>
		</div>
		<ul>
			<li><a href="#">Open...</a></li>
			<li><a href="#">Save</a></li>
			<li><a href="#">Delete</a></li>
		</ul>
	</div>

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



<div class="demo-description">

<p>An example of a split button built with two buttons: A plain button with just text, one with only a primary icon
and no text. Both are grouped together in a set.</p>

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



</body>
</html>
    generated by cgit v1.2.3 (git 2.39.1) at 2025-07-10 01:36:33 +0000