chao
/
mini_cocopi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396
							<!DOCTYPE html>
<html>
<!--
Copyright 2010 The Closure Library Authors. All Rights Reserved.

Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
  <title>goog.ui.Button and goog.ui.ToggleButton</title>
  <script src="../base.js"></script>
  <script>
    goog.require('goog.array');
    goog.require('goog.debug.DivConsole');
    goog.require('goog.debug.LogManager');
    goog.require('goog.events');
    goog.require('goog.events.EventType');
    goog.require('goog.log');
    goog.require('goog.object');
    goog.require('goog.ui.Button');
    goog.require('goog.ui.ButtonRenderer');
    goog.require('goog.ui.ButtonSide');
    goog.require('goog.ui.CustomButton');
    goog.require('goog.ui.CustomButtonRenderer');
    goog.require('goog.ui.FlatButtonRenderer');
    goog.require('goog.ui.LinkButtonRenderer');
    goog.require('goog.ui.ToggleButton');
    goog.require('goog.ui.decorate');
    goog.require('goog.dom.TagName');
  </script>
  <link rel="stylesheet" href="css/demo.css">
  <link rel="stylesheet" href="../css/button.css">
  <link rel="stylesheet" href="../css/custombutton.css">
  <link rel="stylesheet" href="../css/flatbutton.css">
  <link rel="stylesheet" href="../css/linkbutton.css">
  <style>
    /* Base class for all icon elements. */
    .icon {
      height: 16px;
      width: 16px;
      margin: 0 1px;
      background-image: url(../images/toolbar_icons.gif);
      background-repeat: no-repeat;
      vertical-align: middle;
    }

    /* "Highlight" icon. */
    .highlight-icon{
      background-position: -64px;
    }

    /* "Insert Image" icon. */
    .insert-image-icon {
      background-position: -80px;
    }

    /* Custom style for the "default" button. */
    .default-button {
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>goog.ui.Button</h1>
  <fieldset>
    <legend>
      The first <strong>Button</strong> was created programmatically,
      the second by decorating an <strong>&lt;input&gt;</strong> element:&nbsp;
    </legend>
    <div id="b1"></div>
    <label>
      Enable button:<input type="checkbox" id="b1_enable" checked/>
    </label>
    <br/>
    <br/>
    <input type="button" id="b2" title="Tooltip extracted from title"
        value="My Button" disabled="true"/><br/>
    <label>Enable button:<input type="checkbox" id="b2_enable"/></label>
    <br/>
  </fieldset>
  <br/>

  <h2>goog.ui.FlatButtonRenderer</h2>
  <fieldset>
    <legend>
      Buttons made with <strong>&lt;div&gt;</strong>'s instead of
      <strong>&lt;input&gt;</strong>'s or <strong>&lt;button&gt;</strong>'s
      The first rendered, the second decorated:&nbsp;
    </legend>
    <div id="fb1"></div>
    <label>
      Enable button:<input type="checkbox" id="fb1_enable" checked/>
    </label>
    <br/>
    <br/>
    <div id="fb2" class="goog-flat-button goog-flat-button-disabled"
        title="Tooltip extracted from title">My Flat Button</div><br/>
    <label>Enable button:<input type="checkbox" id="fb2_enable"/></label>
    <br/>
    <br/>
    <div id="fb3" class="goog-flat-button goog-flat-button-collapse-right">
      Combined
    </div><div id="fb4" class="goog-flat-button goog-flat-button-collapse-left">
      Buttons
    </div>
    <br/>
  </fieldset>
  <br/>

  <h2>goog.ui.LinkButtonRenderer</h2>
  <fieldset>
    <legend>
      Like FlatButtonRenderer, except the style makes the button appear to be a
      link.
    </legend>
    <div id="lb"></div>
    <label>
      Enable button:<input type="checkbox" id="lb_enable" checked/>
    </label>
  </fieldset>

  <h2>goog.ui.CustomButton &amp goog.ui.ToggleButton</h2>
  <fieldset>
    <legend>
      These buttons were rendered using <strong>goog.ui.CustomButton</strong>:
      &nbsp;
    </legend>
    <br/>
    These buttons were created programmatically:<br/>
    <div id="cb1"></div>
    <br/>
    These buttons were created by decorating some DIVs, and they dispatch
    state transition events (watch the event log):<br/>
    <div id="cb2">
      <!-- On FF2, if you don't enclose the contents of the button in a SPAN,
           the bold element isn't rendered.  Works on every other browser. -->
      <div id="foo" class="goog-custom-button" title="Title specified in HTML">
        <span>Decorated <b>Button</b>, yay!</span>
      </div>
      <div id="bar" class="goog-custom-button goog-custom-button-disabled"
          title="Initialized to DISABLED in HTML...">Decorated Disabled</div>
      <div id="fee" class="goog-custom-button">Another Button</div>
      <div id="btn1"
           class="goog-custom-button goog-custom-button-collapse-right">
        Archive
      </div><div id="btn2" class="goog-custom-button goog-custom-button-collapse-right goog-custom-button-collapse-left">
        Delete
      </div><div id="btn3"
                 class="goog-custom-button goog-custom-button-collapse-left">
        Report Spam
      </div>
    </div>
    <br/>
    Use these <strong>ToggleButton</strong>s to hide/show and enable/disable
    the middle button:<br/>
    <div id="toggleEnable" class="goog-toggle-button"
        title="Click here to enable/disable the button above">Enable</div>
    &nbsp;
    <div id="hideShow"
        class="goog-toggle-button goog-custom-button-checked"
        title="Click here to hide/show the button above">Show</div>
    <br/><br/>
    Combined toggle buttons:<br/>
    <div id="btn4" class="goog-toggle-button goog-custom-button-collapse-right">
      Bold
    </div><div id="btn5" class="goog-toggle-button goog-custom-button-collapse-right goog-custom-button-collapse-left">
      Italics
    </div><div id="btn6" class="goog-toggle-button goog-custom-button-collapse-left goog-custom-button-checked">
      Underlined
    </div>
    <br/>
    <br/>
    These buttons have icons, and the second one has an extra CSS class:<br/>
    <div id="iconbuttons"></div>
    <br/>
    <span class="hint">
      The button with the <span style="font-weight:bold;color:orange;">orange
      outline</span> has keyboard focus.  Hit Enter to activate focused buttons.
    </span>
  </fieldset>
  <br/>
  <div id="perf"></div>
  <!-- Event log. -->
  <fieldset class="goog-debug-panel">
    <legend>Event Log</legend>
    <div id="log"></div>
  </fieldset>
  <script type="text/javascript">
    var timer = goog.now();

    // Set up a logger.
    goog.debug.LogManager.getRoot().setLevel(goog.log.Level.ALL);
    var logger = goog.log.getLogger('demo');
    var logconsole = new goog.debug.DivConsole(goog.dom.getElement('log'));
    logconsole.setCapturing(true);

    var EVENTS = goog.object.getValues(goog.ui.Component.EventType);
    goog.log.fine(logger, 'Listening for: ' + EVENTS.join(', ') + '.');

    function logEvent(e) {
      goog.log.info(logger, '"' + e.target.getCaption() + '" dispatched: ' + e.type);
    }

    // Create the first button programmatically.
    var b1 = new goog.ui.Button('Hello!');
    b1.render(goog.dom.getElement('b1'));
    b1.setTooltip('I changed the tooltip using setTooltip() ' +
        'after the button was rendered.');
    goog.events.listen(b1, EVENTS, logEvent);

    goog.events.listen(goog.dom.getElement('b1_enable'),
        goog.events.EventType.CLICK,
        function(e) {
          b1.setEnabled(e.target.checked);
        });

    goog.events.listen(b1, goog.ui.Component.EventType.ACTION,
        function(e) {
          var newCaption = window.prompt('Enter new caption for button:');
          b1.setCaption(newCaption || 'Empty');
        });

    // Create the second button by decorating an element.
    var b2 = new goog.ui.Button();
    b2.decorate(goog.dom.getElement('b2'));
    goog.events.listen(b2, EVENTS, logEvent);

    goog.events.listen(goog.dom.getElement('b2_enable'),
        goog.events.EventType.CLICK,
        function(e) {
          b2.setEnabled(e.target.checked);
        });

    goog.events.listen(b2, goog.ui.Component.EventType.ACTION,
        function(e) {
          alert('The value of the button is: ' + b2.getValue());
        });


    // Create flat buttons that use divs instead of button or input elements.
    // Render 1st flat button.
    var fb1 = new goog.ui.Button('Hello!',
        goog.ui.FlatButtonRenderer.getInstance());
    fb1.render(goog.dom.getElement('fb1'));
    fb1.setTooltip('I changed the tooltip using setTooltip() ' +
        'after the button was rendered.');
    goog.events.listen(fb1, EVENTS, logEvent);

    goog.events.listen(goog.dom.getElement('fb1_enable'),
        goog.events.EventType.CLICK,
        function(e) {
          fb1.setEnabled(e.target.checked);
        });

    goog.events.listen(fb1, goog.ui.Component.EventType.ACTION,
        function(e) {
          var newCaption = window.prompt('Enter new caption for button:');
          fb1.setCaption(newCaption || 'Empty');
        });

    // Decorate 2nd flat button.
    var fb2 = goog.ui.decorate(goog.dom.getElement('fb2'));
    goog.events.listen(fb2, EVENTS, logEvent);

    goog.events.listen(goog.dom.getElement('fb2_enable'),
        goog.events.EventType.CLICK,
        function(e) {
          fb2.setEnabled(e.target.checked);
        });

    goog.events.listen(fb2, goog.ui.Component.EventType.ACTION,
        function(e) {
          alert('The caption of the button is: ' + fb2.getCaption());
        });

    // Decorate 3rd and 4th flat buttons.
    goog.ui.decorate(goog.dom.getElement('fb3'));
    goog.ui.decorate(goog.dom.getElement('fb4'));

    // Create buttons that look like links.
    var lb = new goog.ui.Button('Hello!',
        goog.ui.LinkButtonRenderer.getInstance());
    lb.render(goog.dom.getElement('lb'));
    lb.setTooltip('I changed the tooltip using setTooltip() ' +
        'after the button was rendered.');
    goog.events.listen(lb, EVENTS, logEvent);

    goog.events.listen(goog.dom.getElement('lb_enable'),
        goog.events.EventType.CLICK,
        function(e) {
          lb.setEnabled(e.target.checked);
        });

    goog.events.listen(lb, goog.ui.Component.EventType.ACTION,
        function(e) {
          var newCaption = window.prompt('Enter new caption for button:');
          lb.setCaption(newCaption || 'Empty');
        });

    // Create some custom buttons.
    var disabledButton, leftButton, centerButton, rightButton;
    var customButtons = [
        new goog.ui.CustomButton('Button'),
        new goog.ui.CustomButton('Another Button'),
        disabledButton = new goog.ui.CustomButton('Disabled Button'),
        new goog.ui.CustomButton('Yet Another Button'),
        leftButton = new goog.ui.CustomButton('Left'),
        centerButton = new goog.ui.CustomButton('Center'),
        rightButton = new goog.ui.CustomButton('Right'),
    ];
    disabledButton.setEnabled(false);
    leftButton.setCollapsed(goog.ui.ButtonSide.END);
    centerButton.setCollapsed(goog.ui.ButtonSide.BOTH);
    rightButton.setCollapsed(goog.ui.ButtonSide.START);
    goog.array.forEach(customButtons, function(b) {
      b.render(goog.dom.getElement('cb1'));
      goog.events.listen(b, goog.ui.Component.EventType.ACTION,
          function(e) {
            var newCaption = window.prompt('Enter new caption for button:');
            b.setCaption(newCaption || 'Empty');
          });
      goog.events.listen(b, EVENTS, logEvent);
    });

    // Decorate some custom buttons.
    var cb2 = [];
    var decoratedButtons = goog.array.map(
        ['foo', 'bar', 'fee', 'btn1', 'btn2', 'btn3'],
        goog.dom.getElement);
    goog.array.forEach(decoratedButtons, function(element) {
      // Since the elements to be decorated each have the correct "marker" CSS
      // class ("goog-custom-button"), we can use the renderer registry to get
      // the appropriate control instance to decorate them.
      var button = goog.ui.decorate(element);
      button.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
      cb2.push(button);
      goog.events.listen(button, EVENTS, logEvent);
    });

    // Decorate toggle buttons.
    var toggleEnableElem = goog.dom.getElement('toggleEnable');
    var toggleEnable = goog.ui.decorate(toggleEnableElem);
    toggleEnable.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
    goog.events.listen(toggleEnable, EVENTS, logEvent);

    goog.events.listen(toggleEnable, goog.ui.Component.EventType.ACTION,
        function(e) {
          cb2[1].setEnabled(e.target.isChecked());
        });

    var hideShowElem = goog.dom.getElement('hideShow');
    var hideShow = new goog.ui.decorate(hideShowElem);
    hideShow.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
    goog.events.listen(hideShow, EVENTS, logEvent);

    goog.events.listen(hideShow, goog.ui.Component.EventType.ACTION,
        function(e) {
          cb2[1].setVisible(e.target.isChecked());
        });

    // Decorate combined toggle buttons.
    var cb3 = [];
    var combinedButtons = goog.array.map(['btn4', 'btn5', 'btn6'],
        goog.dom.getElement);
    goog.array.forEach(combinedButtons, function(element) {
      var button = goog.ui.decorate(element);
      button.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
      cb3.push(button);
      goog.events.listen(button, EVENTS, logEvent);
    });


    // Use a DIV with a background image as the icon, and a SPAN as the caption.
    var iconbutton1 = new goog.ui.ToggleButton([
      goog.dom.createDom(goog.dom.TagName.DIV, 'icon insert-image-icon goog-inline-block'),
      goog.dom.createDom(goog.dom.TagName.SPAN, {'style': 'vertical-align:middle'},
          'Insert Image')
    ]);
    iconbutton1.render(goog.dom.getElement('iconbuttons'));
    goog.events.listen(iconbutton1, EVENTS, logEvent);

    // Add a custom style, too.
    var iconbutton2 = new goog.ui.ToggleButton([
      goog.dom.createDom(goog.dom.TagName.DIV, 'icon highlight-icon goog-inline-block'),
      goog.dom.createDom(goog.dom.TagName.SPAN, {'style': 'vertical-align:middle'},
          'Highlight Text')
    ]);
    iconbutton2.addClassName('default-button');
    iconbutton2.render(goog.dom.getElement('iconbuttons'));
    goog.events.listen(iconbutton2, EVENTS, logEvent);

    goog.dom.setTextContent(goog.dom.getElement('perf'),
        (goog.now() - timer) + 'ms');
 </script>
</body>
</html>