首页 > 程序开发 > web前端 > JavaScript >

jQuery 入门教程(27): jQuery UI Button示例(二)

2013-04-03

本例为使用jQuery的一个实用的例子,显示媒体播放器的控制条。其中按钮的图标使用jQuery库自带的CSS定义的一些图标(比如ui-icon-seek-end等)。1 <!doctype html>2 <html lang="en">3 <head>4 <meta cha...

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

20130318001

相关文章
最新文章
热点推荐