Jquery on单击“显示信息”

Jquery onClick Show info?

本文关键字：信息 显示信息 显示 on 单击 Jquery      更新时间：2023-09-26

我想像SO一样做信息窗格。在这个网站上，当我悬停标签时，会打开一个信息窗格。我应该知道哪个话题。你能给我一个提示吗。或者有教程吗？

谢谢。

演示：http://jsfiddle.net/h9ShH/

演示2（带动画）：http://jsfiddle.net/h9ShH/1/

HTML:

<ul class="tags">
    <li class="tag" data-notice="notice 1">tag 1</li>
    <li class="tag" data-notice="notice 2">tag 2</li>
    <li class="tag" data-notice="notice 3">tag 3</li>
</ul>​

CSS：

.notice {
  position: fixed;
}​

JavaScript:

$('.tag').hover(function (e) {
    this.notice = $('<div>')
        .addClass('notice')
        .css({
            top: $(this).offset().top + 15, 
            left: $(this).offset().left + 20
        }).text($(this).data('notice'))
        .appendTo(this);
}, function () {
    this.notice.remove();
});​

我使用过http://craigsworks.com/projects/qtip/demos/之前看看它。但是有很多插件，你也可以用jQuery和mouseover编写自己的插件。。。

  • 您应该向mouseover和mouseout添加侦听器，而不是向click添加侦听器
  • 当出现这种悬停时，您可能希望也可能不希望使用AJAX获取数据
  • 您可能希望也可能不希望animate工具提示的某些属性

您应该看看JQuery UI，尤其是显示动画。

您只需要有一个div，并使用正确的参数调用show函数（show( effect, [options], [speed], [callback] )）：

function runEffect()
{
  var selectedEffect = "scale";
  var options = { percent: 100 };
  $("#effect").show(selectedEffect, options, 500, callback);
};
$( "#button" ).click(function()
  {
    runEffect();
    return false;
  }
);

<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
    <h3 class="ui-widget-header ui-corner-all">Show</h3>
    <p>
        Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
    </p>
</div>
</div>
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>

据我所知，最好的插件是Qtip。它是麻省理工学院授权的，漂亮，拥有你可能需要的所有配置。

它可以在悬停或单击时触发。而且，如果您想使用Ajax，它也支持：http://craigsworks.com/projects/qtip2/demos/ajax.

演示：http://jsfiddle.net/8tvDU/

尝试此链接

我最喜欢这些，因为它们是纯基于CSS的，不需要Javascript或jQuery

相关文章：