third-party/jquery-ui-1.10.2/demos/button/toolbar.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>jQuery UI Button - Toolbar</title>
   6         <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
   7         <script src="../../jquery-1.9.1.js"></script>
   8         <script src="../../ui/jquery.ui.core.js"></script>
   9         <script src="../../ui/jquery.ui.widget.js"></script>
  10         <script src="../../ui/jquery.ui.button.js"></script>
  11         <link rel="stylesheet" href="../demos.css">
  12         <style>
  13         #toolbar {
  14                 padding: 4px;
  15                 display: inline-block;
  16         }
  17         /* support: IE7 */
  18         *+html #toolbar {
  19                 display: inline;
  20         }
  21         </style>
  22         <script>
  23         $(function() {
  24                 $( "#beginning" ).button({
  25                         text: false,
  26                         icons: {
  27                                 primary: "ui-icon-seek-start"
  28                         }
  29                 });
  30                 $( "#rewind" ).button({
  31                         text: false,
  32                         icons: {
  33                                 primary: "ui-icon-seek-prev"
  34                         }
  35                 });
  36                 $( "#play" ).button({
  37                         text: false,
  38                         icons: {
  39                                 primary: "ui-icon-play"
  40                         }
  41                 })
  42                 .click(function() {
  43                         var options;
  44                         if ( $( this ).text() === "play" ) {
  45                                 options = {
  46                                         label: "pause",
  47                                         icons: {
  48                                                 primary: "ui-icon-pause"
  49                                         }
  50                                 };
  51                         } else {
  52                                 options = {
  53                                         label: "play",
  54                                         icons: {
  55                                                 primary: "ui-icon-play"
  56                                         }
  57                                 };
  58                         }
  59                         $( this ).button( "option", options );
  60                 });
  61                 $( "#stop" ).button({
  62                         text: false,
  63                         icons: {
  64                                 primary: "ui-icon-stop"
  65                         }
  66                 })
  67                 .click(function() {
  68                         $( "#play" ).button( "option", {
  69                                 label: "play",
  70                                 icons: {
  71                                         primary: "ui-icon-play"
  72                                 }
  73                         });
  74                 });
  75                 $( "#forward" ).button({
  76                         text: false,
  77                         icons: {
  78                                 primary: "ui-icon-seek-next"
  79                         }
  80                 });
  81                 $( "#end" ).button({
  82                         text: false,
  83                         icons: {
  84                                 primary: "ui-icon-seek-end"
  85                         }
  86                 });
  87                 $( "#shuffle" ).button();
  88                 $( "#repeat" ).buttonset();
  89         });
  90         </script>
  91 </head>
  92 <body>
  93
  94 <div id="toolbar" class="ui-widget-header ui-corner-all">
  95         <button id="beginning">go to beginning</button>
  96         <button id="rewind">rewind</button>
  97         <button id="play">play</button>
  98         <button id="stop">stop</button>
  99         <button id="forward">fast forward</button>
 100         <button id="end">go to end</button>
 101
 102         <input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label>
 103
 104         <span id="repeat">
 105                 <input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label>
 106                 <input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label>
 107                 <input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label>
 108         </span>
 109 </div>
 110
 111 <div class="demo-description">
 112 <p>
 113         A mediaplayer toolbar. Take a look at the underlying markup: A few button elements,
 114         an input of type checkbox for the Shuffle button, and three inputs of type radio for the Repeat options.
 115 </p>
 116 </div>
 117 </body>
 118 </html>