鼠标悬停在超链接上的小说明窗口

我有一个SharePoint分享自定义列表，我们有2列中有URL和说明。我有一个列表webpart，它显示来自sharepoint列表的所有URL。但是当我将鼠标悬停在链接上时，我想在一个小窗口中显示该链接的描述。任何人都可以请帮我实现这个使用jQuery。 jquery应该能够从列表中读取描述。请让我知道，如果有什么不明确的。鼠标悬停在超链接上的小说明窗口

来源

2010-07-29 user346514

您是否使用SharePoint 2010测试了“jQuery工具叠加”？我有。 SharePoint的'荒谬的功能区/滚动处理混乱了偏移，所以工具提示没有正确定位。这是非常烦人的，补救措施是计算带状物的宽度/高度并将它们添加到偏移量中。尽管它是一个标准插件，但所有的说明和完成都是相当多的工作:-(我只有90％的工作。 – 2012-03-12 00:00:05

你必须做类似的东西两个选项：

在列表的WebPart，你展示你的网址作为已经这样做了，但你也为你的描述中创建的div，你只是隐藏起来。他们在悬停时，使用jQuery（jQuery Tools Overlay或Tooltip或类似的工具提示）显示信息。
如果您的描述很大，或者列表中有很多元素，您可能需要使用AJAX/SharePoint列表Web服务来实现此目的。这有点棘手，但可能值得。

您可以找到有关此方法的更多细节here

编辑：

你可以使用jQuery很容易显示您的股利。把下面的标记在你的代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>   
<script type="text/javascript">           
    $(document).ready(function() { 
    $('a').hover(
     function() { 
     $('#divDescription').show(); 
     }, 
     function() { 
     $('#divDescription').hide(); 
     } 
    ); 
    });

阅读一些教程如何get started with jQuery。

编辑2：
我假设你有类似这样的标记：

<div> 
    <a>Your First link</a> 
    <div id="divDescription">Your First Description</div> 
</div> 
<div> 
    <a>Your Second link</a> 
    <div id="divDescription">Your SecondDescription</div> 
</div> 
...

相反，你应该这样做：我如何使用类

<div> 
    <a>Your First link</a> 
    <div class="description">Your First Description</div> 
</div> 
<div> 
    <a>Your Second link</a> 
    <div class="description">Your SecondDescription</div> 
</div> 
...

公告而不是描述div的ID。

然后，在你的javascript：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>   
<script type="text/javascript">           
    $(document).ready(function() { 
    $('a').hover(
     function() { 
     $(this).parent('div').find('.description').show(); 
     }, 
     function() { 
     $(this).parent('div').find('.description').hide(); 
     } 
    ); 
    });

你需要了解你正在使用jQuery为了使这项工作做什么。当您执行$("#divDescription").show();时，您正在选择ID为“divDescription”的所有div并显示它们。阅读有关parent和find功能的更多信息。我真的建议你阅读javascript和jQuery以更好地理解它是如何工作的。网上有大量的教程可以帮助你。

来源

2010-07-29 20:16:31

嗨，我已经添加了div标签来解密和隐藏它。然后在内容编辑器webpart Iam尝试使用css在鼠标悬停上显示此div。但我不知道如何做到这一点。我在内容编辑器Web部件上添加了这样的内容，并在鼠标悬停上，我的链接正在将颜色更改为红色。类似地，我想a：hover {color：＃ff0000！important;} a：hover {#divDescription {display：display：inline;}}我们可以做这样的事吗？Plesae可以帮到我 – user346514 2010-08-02 19:10:22

我编辑了我的回复，并提供了一些关于如何做到这一点的说明。 – 2010-08-02 19:36:24

Hi Hugo，感谢您的答复。但在我将内容添加到内容编辑器webpart中后，我完全看不到我的web部件。我在这里错过了什么。 – user346514 2010-08-03 13:16:51

所有你需要的是一个工具提示插件。 Jquery Tools overlay是一个很好的工具提示。还有很多其他的工具提示插件可用。

来源

2010-07-29 20:11:21

鼠标悬停在超链接上的小说明窗口

回答

相关问题