如何顯示錨點上的彈出式菜單

我正在製作一個相當複雜的前臺頁面，實質上是一個線程化的論壇。目前所有功能都可用，但我想在允許刪除，回覆，存檔和其他功能的消息之後替換鏈接。目前鏈接全部是文字。我可以使用小圖片並使它們看起來更漂亮。然而，在一個忙碌的首頁上有很多消息和線索，一大堆圖片會讓整個頁面看起來非常喧賓奪主。如何顯示錨點上的彈出式菜單

它現在的工作方式是調用函數的每次迭代，從db讀取消息將啓動一個ul，這允許我很好地填充子消息和深度。

下面是我想要做的 - 創建一個小的彈出式菜單，當有人懸停在實際的消息上時會顯示出來。因爲我當前使用ul和li顯示線程消息的方式，當我嘗試使用jqueryui菜單小部件時，它會破壞格式。

對不起，所有的散亂，但有一種方式來顯示一條消息上方的消息，當有人懸停在它上面，並在頁面中的每個消息顯然需要有不同的鏈接[允許blah.php？messageid = ...]。

我一直在看jqueryui，並在很小的程度上學習它，仍然閱讀教程。有沒有辦法做我以上問的問題！

感謝

來源

2013-06-27 user2530027

不知道這是你在找什麼，但是看看這個鏈接：http://marcosesperon.es/apps/messi/ – Mike

一個簡單的方法來做到這一點如下：

給予標記

<div class="menu-pop"> 
    <div class="menu-label">Menu Label</div> 
    <div class="menu-items"> 
     <div class="menu-item">menu choice</div> 
     <div class="menu-item">menu choice</div> 
     <div class="menu-item">menu choice</div> 
     <div class="menu-item">menu choice</div> 
     <div class="menu-item">menu choice</div> 
    </div> 
</div>

提供的css：

.menu-pop { 
    position: relative; 
} 

.menu-pop .menu-items { 
    display: none; 
    position: absolute; 
} 

.menu-pop.dropped .menu-items { 
    display:inherit; 
}

和一個簡單的jQuery功能：

$(".menu-pop").hover(
     function() { $(this).addClass("dropped"); }, 
     function() { $(this).removeClass("dropped"); } 
    );

然後......好吧......讓它變得漂亮。

在這裏看到的jsfiddle：http://jsfiddle.net/DomDay/rmSHc/

來源

2013-06-28 00:13:00

我遇到的麻煩是我真的想避免使用任何ul或ol，因爲我的線程消息已取決於ul/li，並且爲消息的每個孩子遞歸地調用它自己並格式化縮進等等。如果我能幫忙，我想避免任何ul/ol/li。有不同的方法嗎？ – user2530027

我看到了你使用div的代碼。我現在就試試看看。 – user2530027

你給的最後一個例子看起來像是可以工作的。我會試試這個。我正在嘗試你的榜樣。我的首頁生成了多個細分功能。所以我在一個函數中實現它來測試它。有沒有類似但更快寫入jQuery的方式？ - 也許更快，更漂亮！我知道，我知道我變得貪婪。感謝您的幫助。 – user2530027

你找tooltip，jQuery UI的有tooltip

首先你初始化工具提示，這個例子初始化整個文檔。

<script> 
    $(function() { 
    $(document).tooltip(); 
    }); 
    </script>

然後添加你的標籤和使用title屬性來指定您希望有什麼提示。

<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>

來源

2013-06-27 23:47:56 DevZer0

我只是去嘗試。我生成了一組錨，將它們放在一張表中，並將其作爲標題傳遞給李。但是，當我將鼠標懸停在它上面時，它僅顯示原始html，而不是將其顯示爲鏈接表:-) – user2530027

如何顯示錨點上的彈出式菜單

回答

相關問題