YouTip

Enhance standard form elements (like buttons, inputs, anchors) with themeable buttons that have appropriate hover and active styles. For more details about the button widget, please see the API documentation (#). ## Default Functionality Markup examples for buttons: a button element, an input of type submit, and an anchor. $(function() { $( "input, a, button" ) .button() .click(function( event ) { event.preventDefault(); }); }); A button element An anchor ## Checkboxes Display checkboxes as toggle buttons using the button widget. The label element associated with the checkbox is used as the button text. This example demonstrates three checkboxes displayed as buttons by calling `.buttonset()` on a common container. $(function() { $( "#check" ).button(); $( "#format" ).buttonset(); }); #format { margin-top: 2em; } Toggle ## Icons Various combinations of buttons with text and icons $(function() { $( "button:first" ).button({ icons: { primary: "ui-icon-locked" }, text: false }).next().button({ icons: { primary: "ui-icon-locked" } }).next().button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } }).next().button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" }, text: false }); }); Button with icon onlyButton with icon on the leftButton with two iconsButton with two icons and no text ## Radio Three radio buttons turned into a button group. $(function() { $( "#radio" ).buttonset(); }); ## Split Button .ui-menu { position: absolute; width: 100px; } $(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(); }); ## Toolbar A toolbar for a media player. See the basic markup: some button elements, the Shuffle button is a checkbox input, and the Repeat options are three radio inputs. #toolbar { padding: 4px; display: inline-block; } /* support: IE7 */ *+html #toolbar { display: inline; } $(function() { $( "#beginning" ).button({ text: false, icons: { primary: "ui-icon-seek-start" } }); $( "#rewind" ).button({ text: false, icons: { primary: "ui-icon-seek-prev" } }); $( "#play" ).button({ text: false, icons: { primary: "ui-icon-play" } }) .click(function() { var options; if ( $( this ).text() === "play" ) { options = { label: "pause", icons: { primary: "ui-icon-pause" } }; } else { options = { label: "play", icons: { primary: "ui-icon-play" } }; } $( this ).button( "option", options ); }); $( "#stop" ).button({ text: false, icons: { primary: "ui-icon-stop" } }) .click(function() { $( "#play" ).button( "option", { label: "play", icons: { primary: "ui-icon-play" } }); }); $( "#forward" ).button({ text: false, icons: { primary: "ui-icon-seek-next" } }); $( "#end" ).button({ text: false, icons: { primary: "ui-icon-seek-end" } }); $( "#shuffle" ).button(); $( "#repeat" ).buttonset(); });