Google/Bing 式的页面预览工具

发布于 2024-10-29 22:19:50 字数 897 浏览 8 评论 0原文

我需要将这种功能添加到一个网站,当将鼠标悬停在链接上时,该功能将“预览”页面,类似于 Google 和 Bing 的处理方式。此处的区别在于,此链接不会打开新网页,而是显示有关此链接所代表内容的信息。

为了让您了解事情的样子,想象一下一个管理页面,其中列出了一堆支持票证请求,类似这样......

       Assigned    ID      Submitted     Description
-----------------------------------------------------------------------
View |  Hristo  |  124  |  03.30.2011  | Update to jQuery 1.5
-----------------------------------------------------------------------
View |  Hristo  |  123  |  03.12.2011  | Add this preview functionality

所以将鼠标悬停在“View”上会导致看到此“ticket”的预览,其中会列出“ticket”的相关信息,例如提交日期、分配给谁以及简短说明票的。

我研究了 qTip 因为它灵活、可定制且跨浏览器兼容,但看起来它并没有自 2009 年以来就没有再被碰过,所以我不确定它是否支持最新版本的 jQuery。还有其他类似的插件吗?

或者,由于我想要显示的信息只是文本(不需要进行特殊渲染或其他复杂的计算),我自己该怎么做?很高兴看到一些示例代码:)

如果我需要澄清任何事情,请告诉我。

I need to add this kind of feature to a site that will "preview" a page when hovering over a link, similar to how Google and Bing handle it. The difference here is that this link doesn't open a new webpage, rather it displays information regarding what this link represents.

To give you an idea of what things look like, imagine an admin page that lists a bunch of support ticket requests, something like this...

       Assigned    ID      Submitted     Description
-----------------------------------------------------------------------
View |  Hristo  |  124  |  03.30.2011  | Update to jQuery 1.5
-----------------------------------------------------------------------
View |  Hristo  |  123  |  03.12.2011  | Add this preview functionality

... so hovering over "View" would result in seeing a preview of this "ticket" that would list the relavent information of the "ticket" such as the date it was submitted, who it was assigned to, and a small description of the ticket.

I looked into qTip because its flexible, customizable, and cross-browser compatible, but it looks like it hasn't been touched since 2009 so I'm not sure if it supports the latest version of jQuery. Is there another similar plugin?

Or, since the information I want to display is only text (there is no need for special rendering or other complicated computation to take place), how would I do this myself? It would be nice to see some sample code :)

Let me know if I need to clarify anything.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

峩卟喜欢 2024-11-05 22:19:50

这是30 个不同工具提示插件的小示例。实际上,谷歌搜索“jquery tooltip”会出现数百个。本质上,每个弹出窗口都是一个隐藏的 div,您只需在正确的时间、正确的位置显示它即可。 这也不太难手动完成< /a>.

Here is a small sample of 30 different ToolTip plugins. There are literally hundreds out there that a google for "jquery tooltip" will turn up. Essentially each popup is a hidden div that you just show at the right time in the right location. This isn't too hard to do manually either.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文