zoukankan      html  css  js  c++  java
  • 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>

    20130318001

  • 相关阅读:
    栈和队列
    链表
    map
    二叉平衡树旋转
    二叉排序树详情
    红黑树详情
    查并集
    动态规划
    位操作
    字典树
  • 原文地址:https://www.cnblogs.com/xinyuyuanm/p/2980551.html
Copyright © 2011-2022 走看看