Closure Library
Jump to navigation
Jump to search
Contents
About
Google's Closure Library is a JavaScript library used to generate HTML page.
Child Pages
Related/Child Pages:
- JavaScript - Closure TabBar - a simplified example of Google's public 'TabBar' object.
Installing
<!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'> </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
- Closure Library - official website
