dongyuhui0418
2013-06-27 23:44
浏览 90
已采纳

如何在锚点上显示弹出菜单

I am making a fairly complex front page that in essence is a threaded discussion forum. At present all is functional but I want to replace the links after the message that allow one to delete, reply, archive and other functions. At present the links are all text. I can use small images and make them look nicer. However on a busy front page with lots of messages and threads a whole bunch of images will make the whole page look overwhelming.

The way it works for now is each iteration of the call to function that reads a message from db will start a ul and this allows me to nicely pad the child messages and the depth.

Here is what I want to do - create a small popup menu that will show up when someone hovers over the actual message. Because my current way of showing threaded messages using ul and li when I tried to use jqueryui menu widget it wrecks the formatting.

Sorry about all the rambling but is there a way to show a slim line of links above a message when someone hovers over it and each message in the page will obviously need to have different links [to allow blah.php?messageid=...].

I have been looking at jqueryui and learnt it to a tiny extent and still reading the tutorial. Is there a way of doing what I asked above!

Thanks

图片转代码服务由CSDN问答提供 功能建议

我正在制作一个相当复杂的首页,实质上是一个线索讨论论坛。 目前所有功能都有用,但我希望在允许删除,回复,存档和其他功能的消息之后替换链接。 目前链接都是文本。 我可以使用小图像,使它们看起来更好。 然而,在繁忙的首页上有大量的消息和线程,一大堆图像将使整个页面看起来压倒一切。

它现在的工作方式是每次迭代调用函数调用从db读取一条消息都会启动一个ul,这样我就可以很好地填充子消息和深度。 / p>

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

对于所有漫无目的而言有用但有没有办法显示苗条 当有人将鼠标悬停在消息上方时,消息上方的链接显然需要有不同的链接[允许blah.php?messageid = ...]。

我 一直在看jqueryui并在很小程度上学习它并仍在阅读教程。 有没有办法做我上面提到的问题!

谢谢

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • dousi1994 2013-06-28 00:13
    已采纳

    a simple way to do this is as follows:

    given markup

    <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>
    

    provide css:

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

    and a simple jquery function:

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

    then ... well ... make it pretty.

    see the jsfiddle here: http://jsfiddle.net/DomDay/rmSHc/

    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • dongshu9458 2013-06-27 23:47

    Your looking for tooltip, Jquery UI has a tooltip

    first you initialize the tooltip, this example initialize it for the whole document.

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

    Then you add your tags and use the title attribute to specify what you wish to have for tooltip.

    <p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题