0

我正在制作一个相当复杂的首页，本质上是一个线程讨论论坛。目前一切正常，但我想替换消息后的链接，允许删除、回复、存档和其他功能。目前链接都是文字。我可以使用小图像并使它们看起来更好。然而，在有大量消息和线程的繁忙首页上，一大堆图像会使整个页面看起来势不可挡。

它现在的工作方式是从 db 读取消息的函数调用的每次迭代都将启动 ul，这使我可以很好地填充子消息和深度。

这就是我想要做的 - 创建一个小的弹出菜单，当有人将鼠标悬停在实际消息上时会显示该菜单。因为当我尝试使用 jqueryui 菜单小部件时，我当前使用 ul 和 li 显示线程消息的方式会破坏格式。

很抱歉所有的杂乱无章，但是当有人将鼠标悬停在消息上方时，有没有办法在消息上方显示一条细线链接，并且页面中的每条消息显然需要具有不同的链接[以允许 blah.php?messageid=... ]。

我一直在看 jqueryui 并在很小的程度上学习了它，并且仍在阅读教程。有没有办法做我上面问的！

谢谢

4

2 回答 2

2

您正在寻找tooltip，Jquery UI 有一个工具提示

首先你初始化工具提示，这个例子为整个文档初始化它。

<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-27T23:47:56.543 回答
0

一个简单的方法如下：

给定标记

<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-28T00:13:00.023 回答