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>