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
我正在制作一个相当复杂的首页，实质上是一个线索讨论论坛。 目前所有功能都有用，但我希望在允许删除，回复，存档和其他功能的消息之后替换链接。 目前链接都是文本。 我可以使用小图像，使它们看起来更好。 然而，在繁忙的首页上有大量的消息和线程，一大堆图像将使整个页面看起来压倒一切。
它现在的工作方式是每次迭代调用函数调用从db读取一条消息都会启动一个ul，这样我就可以很好地填充子消息和深度。 / p>
这是我想要做的 - 创建一个小的弹出菜单，当有人将鼠标悬停在实际消息上时，该菜单会显示出来。 因为当我尝试使用jqueryui菜单小部件时，我当前使用ul和li显示线程消息的方式会破坏格式化。
对于所有漫无目的而言有用但有没有办法显示苗条 当有人将鼠标悬停在消息上方时，消息上方的链接显然需要有不同的链接[允许blah.php？messageid = ...]。
我 一直在看jqueryui并在很小程度上学习它并仍在阅读教程。 有没有办法做我上面提到的问题！
谢谢
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/
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>