6

我对 javascript、jQuery 或它的插件不是很有经验，但通常我会管理。无论如何，我的客户正在建立一个站点，其目的之一是从不同站点获取新闻文章并在无序的 html 列表中显示标题。我无法访问他的代码，新闻文章加载速度很慢（在网站加载之后很多）。

我正在使用 qTIP，其想法是，一旦您将鼠标悬停在新闻标题上，它就会生成一个工具提示。这在我的开发环境中运行良好，因为我有不是从任何地方生成的虚拟标题。

问题是一旦客户在他的测试环境中设置了站点，将新闻标题加载到列表中的脚本非常慢，以至于 qTIP 脚本在列表中没有任何元素之前加载。因此，它不知道有任何<li>'s 可以从中获取和生成工具提示。

有没有办法确保在工具提示脚本加载之前加载所有新闻文章？我认为加载脚本的简单延迟不是很聪明，因为某些标题似乎比其他标题加载时间更长，因此延迟必须相当长。

4

4 回答 4

32

在底部查看我的更新

我也一直在解决这个问题，并提出了类似于@Gaby 提供的解决方案。@Gaby 的解决方案的问题在于它不会在 mouseover 事件发生之前创建 qTip。这意味着您在第一次鼠标悬停时不会看到 qTip，但第二次会看到。此外，每次鼠标悬停时它都会重新创建 qTip，这并不是最佳的。

我采用的解决方案是：

$("li").live('mouseover', function() {
    var target = $(this);
    if (target.data('qtip')) { return false; }
    target.qtip(...);
    target.trigger('mouseover');
});

这是它的作用：

  • 将目标设置为 li 元素
  • 如果该 li 元素已经有一个 qtip，则返回
  • 如果 li 上没有 qtip，则对其应用 qtip
  • 再次发送 mouseover 触发器以激活 qtip

我知道这有点hacky，但它似乎工作。另请注意，qTip 的 2.0 版本应支持 live()作为选项。据我所知，当前的 2.0 开发分支还不支持它。

更新：

这是执行此操作的正确方法，直接来自论坛上的 qtip 开发人员本人：

$('selector').live('mouseover', function() {
   $(this).qtip({
      overwrite: false, // Make sure another tooltip can't overwrite this one without it being explicitly destroyed
      content: 'I\'m a live qTip', // comma was missing here
      show: {
         ready: true // Needed to make it show on first mouseover event
      }
   });
})

因此，它首先确保您不会在每次鼠标悬停时都使用“overwrite: false”重新创建新的 qtip。然后它使用“show: {ready: true}”在第一次鼠标悬停时显示 qtip。

于 2010-03-21T03:53:05.323 回答
1

您应该使用 jQuery 框架的实时事件。

将处理程序绑定到所有当前和未来匹配元素的事件（如单击）。也可以绑定自定义事件。

所以例如你可以做类似的事情

$("li").live( 'mouseover', function(){ 
                                     $(this).qTip(...); 
                                     });

参考：http ://docs.jquery.com/Events/live

于 2010-01-05T17:31:06.140 回答
1

不是没有，但我只是show:{ready:true}在我的onmouseover活动中添加了。这让它在 Chrome 和 FF 中工作。

于 2012-03-30T20:08:56.667 回答
-1

是的，我想出了类似的东西。我认为有人在他们的论坛上也发布了类似的帖子。我将鼠标悬停事件更改为 mousemove，以便 qtip 在第一次鼠标悬停时激活。

$('li').live('mousemove', function() {
  if( !$(this).data('qtip') ) {
     $(this).qtip(...)

我也同意这是一个非常老套的解决方案，但是我想不出更好的解决方案。也许在填充 li 的回调函数中检查和应用 qtip 会更好，但我真的无法访问该代码。

于 2010-03-24T12:33:51.743 回答