Closure Library

From NoskeWiki
Jump to: navigation, search

About

Google's Closure Library is a JavaScript library used to generate HTML page.


Child Pages

Related/Child Pages:


Installing

TEMP

<!DOCTYPE html>
<html>
<head>
  <title>goog.ui.HoverCard</title>
  <script src="closure-library/closure/goog/base.js"></script>
  <link rel="stylesheet" href="closure-library/closure/goog/css/hovercard.css">
  <script>
    goog.require('goog.debug.DivConsole');
    goog.require('goog.debug.LogManager');
    goog.require('goog.log');
    goog.require('goog.positioning.AnchoredPosition');
    goog.require('goog.positioning.Corner');
    goog.require('goog.ui.Component.EventType');
    goog.require('goog.ui.HoverCard');
  </script>
  <style>
    #personEmail {
      font-style: italic;
    }
    .anchor {
      font: bold;
      color: white;
      background-color: gray;
      padding: 20px;
      margin: 20px;
    }
  </style>
</head>
<body>
 
  Show hovercard below:<br><br><br>
  <span class="anchor" config="down" content-to-show="This is your <b>hovercard</b> content">Hover</span>
 
  <div id='profileCard' style="display:none;position:absolute">
    <div style="position:relative;left:2px;z-index:100">
     <table class="goog-hovercard-icons">
       <tr>
         <td>About</td>
       </tr>
     </table>
     <table class="goog-hovercard-content">
        <tr>
           <td>
              <span id='personEmail'>&nbsp;</span>
           </td>
        </tr>
      </table>
    </div>
  </div>
 
  <script>
    var timer = goog.now();
    // Initialize hovercard object.
    var hc;
    hc = new goog.ui.HoverCard({SPAN: 'content-to-show'});
    hc.setShowDelayMs(0);
    hc.setElement(goog.dom.getElement('profileCard'));
    goog.events.listen(hc, goog.ui.HoverCard.EventType.TRIGGER, onTrigger);
    goog.events.listen(hc, goog.ui.HoverCard.EventType.BEFORE_SHOW, onBeforeShow);
    hc.className = 'goog-hovercard';
    function onTrigger(event) {
      var pos = new goog.positioning.AnchoredPosition(event.anchor, goog.positioning.Corner.BOTTOM_LEFT);
      hc.setPosition(pos);
      return true;
    }
    function onBeforeShow() {
      // This is where you typically set the contents of your hovercard,
      // based on the triggering element.
      var trigger = hc.getAnchorElement();
      var email = trigger.getAttribute("content-to-show");
      var emailEl = goog.dom.getElement('personEmail');
      emailEl.innerHTML = email;
      return true;
    }
    goog.events.listen(hc, EVENTS, logEvent);
    goog.dom.setTextContent(goog.dom.getElement('perf'),
        (goog.now() - timer) + 'ms');
  </script>
 
</body>
</html>






<html>
<head>
  <title>CLOSURE DEMO: goog.ui.AdvancedTooltip</title>
  <meta charset="utf-8">
  <script src="closure-library/closure/goog/base.js"></script>
  <script>
    goog.require('goog.events.EventType');
    goog.require('goog.ui.AdvancedTooltip');
  </script>
  <style>
    .goog-tooltip {
      background: lightyellow;
      color: black;
      border: 1px solid black;
      padding: 1px;
      font: menu;
    }
    .tooltip {
      background: lightyellow;
      color: black;
      border: 1px solid black;
      padding: 5px;
      font: menu;
      width: 400px;
    }
  </style>
</head>
<body>
  <button id="btn">Hover Button</button>
 
  <script>
    var tooltip = new goog.ui.AdvancedTooltip('btn');
    tooltip.className = 'tooltip';
    tooltip.setHtml(
      "<b>About</b><br>" +
      "Move cursor over tooltip and it remains open.<br>" +
      "Tooltip origin is mouse. " +
      "<hr/><div style=\"text-align: center;\">" +
      "<button id=\"btn-close\">Close</button></div>", true);
    tooltip.setHotSpotPadding(new goog.math.Box(5, 5, 5, 5));
    tooltip.setCursorTracking(true);
    tooltip.setMargin(new goog.math.Box(0, 0, 0, 0));
    tooltip.setHideDelayMs(100);
 
    new goog.ui.Tooltip('btn-close', 'Closes tooltip');
 
    goog.events.listen(document.getElementById('btn-close'),
        goog.events.EventType.CLICK, function(e) {
            tooltip.setVisible(false);
        }
    );
 </script>
 
</body></html>




.goog-hovercard div {
  border: solid 5px #69748C;
  width: 300px;
  height: 115px;
  background-color: white;
  font-family: arial, sans-serif;
}
 
.goog-hovercard .goog-shadow {
  border: transparent;
  background-color: black;
  filter: alpha(Opacity=1);
  opacity: 0.01;
  -moz-opacity: 0.01;
}
 
.goog-hovercard table {
  border-collapse: collapse;
  border-spacing: 0px;
}
 
.goog-hovercard-icons td {
  border-bottom: 1px solid #ccc;
  padding: 0px;
  margin: 0px;
  text-align: center;
  height: 19px;
  width: 100px;
  font-size: 90%;
}
 
.goog-hovercard-icons td + td {
  border-left: 1px solid #ccc;
}
 
.goog-hovercard-content {
  border-collapse: collapse;
}
 
.goog-hovercard-content td {
  padding-left: 15px;
}



<html>
  <head>
    <script src="closure-library/closure/goog/base.js"></script>
    <script src="hello.js"></script>
  </head>
  <body onload="sayHi()">
  </body>
</html>



goog.require('goog.dom');
 
function sayHi() {
  var newHeader = goog.dom.createDom('h1', {'style': 'background-color:#EEE'},
    'Hello world!');
  goog.dom.appendChild(document.body, newHeader);
}



See Also


Links