1

我发现了一些非常棒的链接检测正则表达式，效果非常好。它只取链接的主要部分并将其显示为锚标记的主体，并将整个链接显示为 href。在示例http://somesite.com/index.php?some=var中将简单地看起来像somesite.com. 这只是纯粹的令人敬畏，但它也有它的缺点，因为有人可能会传递一些你可能出于某种原因不一定想要发送的变量，我想我需要在锚正文中显示整个 url。可悲的是，我不想放弃漂亮的主播，我决定我应该在某些事件上显示完整的链接，因此麻烦来了。

首先，我认为我应该使用鼠标悬停（jquery 的 mouseenter）来显示完整链接，然后使用 mouseleave 让它再次美丽。不幸的是，由于在一行末尾带有一堆参数的站点名称很短，因此没有成功。示例：如果在一行的末尾有一个带有 bodysite.com和 href的锚点，http://site.com/some/params在展开后它将转到下一行，这将触发鼠标离开并因此压缩它，它会自行将链接返回到原始行并触发 expand 函数创建一个无限循环。

第二个想法是右键单击展开链接。显然，必须禁用要扩展的链接上的上下文菜单。不幸的是，在一行的末尾有相同的链接会导致显示上下文菜单，因为在展开后右键单击也会在短链接所在的空白处触发。

我的想法似乎已经用完了，有人有吗？

4

1 回答 1

2

在不破坏布局的情况下，您可以使用 nativetitle属性来显示完整的 URL，或者，对于更可定制的东西，可以使用插件，例如 jQuery UI 的tooltip widget。

<a href="http://www.shorturl.com/?param=notSoShortUrl"
  title="http://www.shorturl.com/?param=notSoShortUrl">shorturl.com</a>

如果title在初始标记中输出属性，即使禁用 JS，此解决方案也适用。如果您愿意，jQuery UI 工具提示可能有助于为启用 JS 的用户定制它。

如果有人对如何修补 OP 中描述的断行问题感兴趣，这是我实现非断行可扩展链接的原始解决方案：

<a href="http://www.aaaaaaaaaaaaaaaaaa.com/?params=somelongstring">aaaaaaaaaaaaaaaaaa.com</a>


$('a').hover(function(e) {
    $(this).text(e.type == 'mouseenter' ? this.href : $(this).data('shorturl'));
}).each(function() {
    $(this).css({
        width: this.offsetWidth,
        whiteSpace: 'nowrap',
        display: 'inline-block'
    }).data('shorturl', $(this).text());
});

演示

虽然，这主要是一个 CSS hack，链接文本可能会泄漏到容器之外（显然，如果容器有 ，则不会工作overflow:hidden），所以它对于布局目的不是很好。最好坚持使用title或工具提示插件。

于 2013-06-22T15:44:44.787 回答