Question

有人知道如何使用Google Hovercard API示例吗？

我下载了压缩的源代码，对其进行了测试 - 它确实有效。

然后我尝试复制并简化其原始源代码，如此......

谷歌HoverCard ＆LT; /脚本＆GT; - ＆GT;

      <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="tom@gmail.com">Tom Smith1</span>
      <span class="anchor" email="tom@gmail.com">Tom Smith2</span>
      <span class="anchor" email="tom@gmail.com">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'>&nbsp;</span><br />
              <span id='personEmail'>&nbsp;</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来获得相同的结果？

你对此有何看法？

Answer 1

我已经解决了这个问题。

我没有进一步阅读文档和演示API来测试Google Hovercard示例。

因此，我终于设法让它在我的一个项目中工作。

干杯！

使用Google Hovercard API与Jquery Hovercard

1 个答案: