2

SOのような情報ペインをやりたいです。このサイトでタグにカーソルを合わせると、情報ペインが開きます。どのトピックを知っておくべきですか。これについてのヒントを教えてください。またはチュートリアルはありますか？

ありがとう。

4

6 に答える 6

2

デモ: 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();
});​
于 2012-09-10T13:30:12.813 に答える
1

以前http://craigsworks.com/projects/qtip/demos/を使用したことがあります。それを見てください。しかし、たくさんのプラグインがあり、jQuery とマウスオーバーで自分のものを書くこともできます...

于 2012-09-10T13:17:27.123 に答える
0

私の知る限り、最高のプラグインはQtipです。それはMITライセンスで、美しく、あなたがおそらく必要とするかもしれないすべての構成を持っています。

ホバーまたはクリックでトリガーできます。また、Ajaxを使用する場合は、それもサポートしています： http: //craigsworks.com/projects/qtip2/demos/ajax。

デモ： http： //jsfiddle.net/8tvDU/

于 2012-09-10T13:18:11.527 に答える
0
  • ではなくmouseoverとにリスナーを追加する必要があります。mouseoutclick
  • このようなホバリングが発生した場合、AJAX を使用してデータをフェッチする場合としない場合があります。
  • animateツールチップの一部のプロパティが必要な場合と不要な場合があります。
于 2012-09-10T13:17:06.313 に答える
0

JQuery UI、特にshow animationを確認する必要があります。

show( effect, [options], [speed], [callback] )div を作成し、正しいパラメーターを指定してshow 関数 ( ) を呼び出すだけです。

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>
于 2012-09-10T13:19:29.010 に答える
0

このリンクを試してください

純粋な CSS ベースで Javascript や jQuery が不要なため、これらが最も気に入っています。

于 2012-09-10T13:19:35.460 に答える