Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Button - Toolbar</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
  <script src="http://code.jquery.com/jquery-1.8.0.js"></script>
    <script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
    <style>
      body { font-size: 62.5%; }
    #toolbar {
        padding: 10px 4px;
    }
    </style>
    <script>
    $(function() {
        $( "#beginning" ).button({
            text: false,
            icons: {
                primary: "ui-icon-seek-start"
            }
        });
        $( "#rewind" ).button({
            text: false,
            icons: {
                primary: "ui-icon-seek-prev"
            }
        });
        $( "#stop" ).button({
            text: false,
            icons: {
                primary: "ui-icon-stop"
            }
        })
        .click(function() {
            $( "#play" ).button( "option", {
                label: "play",
                icons: {
                    primary: "ui-icon-play"
                }
            });
        });
        $( "#forward" ).button({
            text: false,
            icons: {
                primary: "ui-icon-seek-next"
            }
        });
        $( "#end" ).button({
            text: false,
            icons: {
                primary: "ui-icon-seek-end"
            }
        });
        $( "#shuffle" ).button();
        $( "#repeat" ).buttonset();
      
      
      
      
      
      
      
      var contentFn;
      $( "#play" ).button({
            text: false,
            icons: {
                primary: "ui-icon-play"
            }
        })
        .click(function() {
            var options;
            if ( $( this ).text() === "play" ) {
                options = {
                    label: "pause",
                    icons: {
                        primary: "ui-icon-pause"
                    }
                };
              if ( contentFn ) {
                contentFn( "pause" );
              }
            } else {
                options = {
                    label: "play",
                    icons: {
                        primary: "ui-icon-play"
                    }
                };
              if ( contentFn ) {
                contentFn( "play" );
              }
            }
            $( this ).button( "option", options );
        })
        .tooltip({
          content: function( response ) {
            contentFn = response;
            return $( this ).text();
          },
          close: function() {
            contentFn = null;
          }
        });
    });
    </script>
</head>
<body>
​
<div class="demo">
​
<span id="toolbar" class="ui-widget-header ui-corner-all">
    <button id="beginning">go to beginning</button>
    <button id="rewind">rewind</button>
    <button id="play">play</button>
    <button id="stop">stop</button>
    <button id="forward">fast forward</button>
    <button id="end">go to end</button>
    
    <input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label>
    
    <span id="repeat">
        <input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label>
        <input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label>
        <input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label>
    </span>
</span>
​
</div><!-- End demo -->
​
​
​
<div class="demo-description">
<p>
    A mediaplayer toolbar. Take a look at the underlying markup: A few button elements,
    an input of type checkbox for the Shuffle button, and three inputs of type radio for the Repeat options. 
</p>
</div><!-- End demo-description -->
​
</body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers