0
有誰知道如何使用Google Hovercard API示例？使用Google Hovercard API與Jquery Hovercard
我下載了壓縮的源代碼，測試它 - 它確實有效。
然後我試圖複製和簡化，像這樣原來的源代碼..
谷歌名片 </SCRIPT> - >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="../base.js"></script>
<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>
<link rel="stylesheet" href="../css/hovercard.css">
<style>
#personEmail {
font-style: italic;
}
.anchor {
font: bold;
color: white;
background-color: gray;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<h1>HoverCard Test</h1>
<span class="anchor" email="[email protected]">Tom Smith1</span>
<span class="anchor" email="[email protected]">Tom Smith2</span>
<span class="anchor" email="[email protected]">Tom Smith3</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>Email</td>
<td>Chat</td>
<td>More</td>
</tr>
</table>
<table class="goog-hovercard-content">
<tr>
<td valign="top">
<span id='personName'> </span><br />
<span id='personEmail'> </span>
</td>
</tr>
</table>
</div>
<script>
function writeDiv(top, left) {
var width = 300 + 10;
var height = 115 + 10;
document.write(
'<div class="goog-shadow" style="position:absolute;left:' +
left + 'px;top:' + top + 'px;width:' +
width + 'px;height:' + height + 'px;z-index:10" ></div>\n');
}
var y = 0;
var left = 0;
var size = 6;
for (var i = 0; i < size; ++i) {
for (var j = 0; j < size; ++j) {
writeDiv(y + i, left + j);
}
}
</script>
</div>
<script>
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.HoverCard.EventType);
goog.log.fine(logger, 'Listening for: ' + EVENTS.join(', ') + '.');
function logEvent(e) {
goog.log.info(logger, 'HoverCard dispatched: ' + e.type);
}
// Initialize hovercard object.
var hc;
hc = new goog.ui.HoverCard({SPAN: 'email'});
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';
var config = {
'right': goog.positioning.Corner.TOP_RIGHT,
'down': goog.positioning.Corner.BOTTOM_LEFT
}
function onTrigger(event) {
// Usually, you will only need to respond to the TRIGGER event if
// you want hovercard triggers to have different behaviors.
var trigger = event.anchor;
var conf = trigger.getAttribute("config");
var pos = null;
if (conf) {
pos = new goog.positioning.AnchoredPosition(trigger, config[conf]);
}
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("email");
var name = trigger.innerHTML;
var emailEl = goog.dom.getElement('personEmail');
emailEl.innerHTML = email;
var nameEl = goog.dom.getElement('personName');
nameEl.innerHTML = name;
return true;
}
goog.events.listen(hc, EVENTS, logEvent);
goog.dom.setTextContent(goog.dom.getElement('perf'),
(goog.now() - timer) + 'ms');
</script>
</body>
它打破了，它有許多例外goog沒有被定義和需要。 js沒有加載等等等等。
我覺得寫這個非常麻煩，寫了一個簡單的hovercard html文件，我想知道有沒有人在他們的項目中更容易使用Google hovercard。或者我最好使用JQuery Hovercard來獲得相同的結果？
你對此有何看法？