jack
/
cocorobolx


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
							<!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.Css3ButtonRenderer Demo
  </title>
  <script type="text/javascript" src="../base.js"></script>
  <script type="text/javascript">
    goog.require('goog.array');
    goog.require('goog.debug.DivConsole');
    goog.require('goog.debug.LogManager');
    goog.require('goog.events');
    goog.require('goog.log');
    goog.require('goog.object');
    goog.require('goog.ui.Css3ButtonRenderer');
    goog.require('goog.ui.CustomButton');
    goog.require('goog.ui.ToggleButton');
    goog.require('goog.ui.decorate');
  </script>
  <link rel="stylesheet" type="text/css" href="css/demo.css">
  <link rel="stylesheet" type="text/css" href="../css/common.css">
  <link rel="stylesheet" type="text/css" href="../css/css3button.css">
</head>
<body>
  <h2>Demo of goog.ui.Css3ButtonRenderer</h2>
  <fieldset>
    <legend>
      These buttons were rendered using
      <strong>goog.ui.Css3ButtonRenderer</strong>:
    </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">
      <div id="foo" class="goog-css3-button" title="Title specified in HTML">
        Decorated <b>Button</b>, yay!
      </div><div id="bar" class="goog-css3-button goog-css3-button-disabled"
          title="Initialized to DISABLED in HTML...">Decorated Disabled
      </div><div id="fee" class="goog-css3-button">Another Button</div><div id="btn1"
           class="goog-css3-button goog-css3-button-collapse-right">
        Archive
      </div><div id="btn2"
          class="goog-css3-button goog-css3-button-collapse-right goog-css3-button-collapse-left">
        Delete
      </div><div id="btn3"
          class="goog-css3-button goog-css3-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-css3-toggle-button"
        title="Click here to enable/disable the button above">Enable</div>
    <div id="hideShow"
        class="goog-css3-toggle-button goog-css3-button-checked"
        title="Click here to hide/show the button above">Show</div>
    <br/><br/>
    Combined toggle buttons<br/>
    <div id="btn4" class="goog-css3-toggle-button goog-css3-button-collapse-right">
      Bold
    </div><div id="btn5" class="goog-css3-toggle-button goog-css3-button-collapse-right goog-css3-button-collapse-left">
      Italics
    </div><div id="btn6" class="goog-css3-toggle-button goog-css3-button-collapse-left goog-css3-button-checked">
      Underlined
    </div>
  </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 some buttons using CustomButton with the
    // Css3ButtonRenderer renderer.
    var disabledButton;
    var customButtons = [
        new goog.ui.CustomButton('Button',
            goog.ui.Css3ButtonRenderer.getInstance()),
        new goog.ui.CustomButton('Another Button',
            goog.ui.Css3ButtonRenderer.getInstance()),
        disabledButton = new goog.ui.CustomButton('Disabled Button',
            goog.ui.Css3ButtonRenderer.getInstance()),
        new goog.ui.CustomButton('Yet Another Button',
            goog.ui.Css3ButtonRenderer.getInstance())
    ];
    disabledButton.setEnabled(false);
    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 buttons.
    var cb2 = [];
    var decoratedButtons = goog.array.map([
      'foo', 'bar', 'fee', 'btn1', 'btn2', 'btn3', 'btn4', 'btn5', 'btn6'
     ], goog.dom.getElement);
    goog.array.forEach(decoratedButtons, function(element) {
      // Since the elements to be decorated each have the correct "marker" CSS
      // class ("goog-css3-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());
        });

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