鼠标悬停在超链接上的小描述窗口

Question

我有一个sharepoint自定义列表，我们在URL和描述中有2列。我有一个列表webpart，显示sharepoint列表中的所有URL。但是当我将鼠标悬停在链接上时，我想在一个小窗口中显示该链接的描述。谁能帮助我使用jquery实现这一点。 Jquery应该能够从列表中读取描述。如果不清楚，请告诉我。

Answer 1

您只需要一个工具提示插件。 Jquery Tools overlay是一个很好的做这样的工具提示。还有很多其他工具提示插件可用。

Answer 2

您可以选择两种方式：

1. 在您的列表webpart中，您将URL显示为您已经做过的，但您也可以为您的描述创建div，只需隐藏它们即可。他们，在悬停时，你使用jQuery显示信息（jQuery工具覆盖或工具提示或类似的东西）

2. 如果您的描述很大，或者列表中有很多元素，您可能希望使用AJAX / SharePoint列表Web服务来实现此目的。这有点棘手但可能值得。

您可以找到有关此方法的更多详细信息here

修改

您可以使用jQuery轻松显示您的div。在您的代码中添加以下标记：

<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以更好地理解它是如何工作的。网上有大量的教程可以帮助你。