编辑下面的代码:【加编码】
<html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 按钮(Button) - 工具栏</title> <link rel="stylesheet" href="https://libs.baidu.com/jqueryui/1.10.4/css/jquery-ui.min.css"> <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script src="https://libs.baidu.com/jqueryui/1.10.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="/demo/jqueryui/style.css"> <style> #toolbar { padding: 4px; display: inline-block; } /* support: IE7 */ *+html #toolbar { display: inline; } </style> <script> $(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(); }); </script> </head> <body> <div id="toolbar" class="ui-widget-header ui-corner-all"> <button id="beginning">开头</button> <button id="rewind">快退</button> <button id="play">播放</button> <button id="stop">停止</button> <button id="forward">快进</button> <button id="end">结尾</button> <input type="checkbox" id="shuffle"><label for="shuffle">Shuffle</label> <span id="repeat"> <input type="radio" id="repeat0" name="repeat" checked><label for="repeat0">No Repeat</label> <input type="radio" id="repeat1" name="repeat"><label for="repeat1">Once</label> <input type="radio" id="repeatall" name="repeat"><label for="repeatall">All</label> </span> </div> </body> </html>
结果: 【此窗口】 帮助?
Try it Yourself - © 自强学堂