本例为使用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​​​​>​​


​
​