鼠標懸停在超鏈接上的小說明窗口

我有一個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

鼠標懸停在超鏈接上的小說明窗口

回答

相關問題