jQuery 入门教程(27): jQuery UI Button示例（二）
本例为使用jQuery的一个实用的例子，显示媒体播放器的控制条。其中按钮的图标使用jQuery库自带的CSS定义的一些图标（比如ui-icon-seek-end等）。
1<!doctype html>2<html lang="en">3<head>4 <meta charset="utf-8" />5 <title>jQuery UI Demos</title>6 <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />7 <script src="scripts/jquery-1.9.1.js"></script>8 <script src="scripts/jquery-ui-1.10.1.custom.js"></script>9 <style>10 #toolbar {11 padding: 4px;12 display: inline-block;13 }14 /* support: IE7 */15 * + html #toolbar {16 display: inline;17 }18 </style>19 <script>20 $(function () {21 $("#beginning").button({22 text: false,23 icons: {24 primary: "ui-icon-seek-start"25 }26 });27 $("#rewind").button({28 text: false,29 icons: {30 primary: "ui-icon-seek-prev"31 }32 });33 $("#play").button({34 text: false,35 icons: {36 primary: "ui-icon-play"37 }38 })39 .click(function () {40 var options;41 if ($(this).text() === "play") {42 options = {43 label: "pause",44 icons: {45 primary: "ui-icon-pause"46 }47 };48 } else {49 options = {50 label: "play",51 icons: {52 primary: "ui-icon-play"53 }54 };55 }56 $(this).button("option", options);57 });58 $("#stop").button({59 text: false,60 icons: {61 primary: "ui-icon-stop"62 }63 })64 .click(function () {65 $("#play").button("option", {66 label: "play",67 icons: {68 primary: "ui-icon-play"69 }70 });71 });72 $("#forward").button({73 text: false,74 icons: {75 primary: "ui-icon-seek-next"76 }77 });78 $("#end").button({79 text: false,80 icons: {81 primary: "ui-icon-seek-end"82 }83 });84 $("#shuffle").button();85 $("#repeat").buttonset();86 });87 </script>88</head>89<body>90 91 <div id="toolbar" class="ui-widget-header ui-corner-all">92 <button id="beginning">go to beginning</button>93 <button id="rewind">rewind</button>94 <button id="play">play</button>95 <button id="stop">stop</button>96 <button id="forward">fast forward</button>97 <button id="end">go to end</button>98 99 <input type="checkbox" id="shuffle" />100 <label for="shuffle">Shuffle</label>101 102 <span id="repeat">103 <input type="radio" id="repeat0" name="repeat"104 checked="checked" />105 <label for="repeat0">No Repeat</label>106 <input type="radio" id="repeat1" name="repeat" />107 <label for="repeat1">Once</label>108 <input type="radio" id="repeatall" name="repeat" />109 <label for="repeatall">All</label>110 </span>111 </div>112</body>113</html>