0

私は nanoscroller.js と tiptip.js を使用していますが、私の質問では、特定のライブラリがそれほど重要かどうかはわかりません (ただし、そうかもしれません)。

ツールチップが機能し、スクロールバーが機能しています。別々に使用する場合。

私の目標は、ツールチップ内にカスタム スクロールバーを機能させることです。

HTML:

<a class="tooltip">Open tooltip</a>

<div class="tooltip-html" style="display:none;">
    <div id="main-content" class="nano">
        <div class="Content">
            <div class="blue">
            </div>
        </div>
    </div>
</div>

JS:

var tip_html = $('.tooltip-html').html();
$('.tooltip').tipTip({activation: 'click', maxWidth: "230px", defaultPosition: "bottom", keepAlive: true, content: tip_html });
$("#main-content.nano").nanoScroller();

上記について最初に気づいたこと: この配置では、nanoscroller は、ツールチップにあるセットではなく、html の最初のセットにのみ適用されました。

そのため、最初にスクロールバーを適用してから、html を取得してツールチップに追加しました。これにより、スクロールバーがツールチップに適用されましたが、機能しませんでした。

ここでさまざまなアプローチを試しました (一致したすべての ID にスクロールバーを適用する、どれをいつ呼び出すかの順序が異なるなど)、私は間違いなく立ち往生しています。どんな助けでも大歓迎です、ありがとう！

4

1 に答える 1

1

これらのライブラリのいずれも使用していないので、tiptip が行うことは DOM ノードのコピーを作成し、nanoScroller はそれが適用されるノードへの参照を保存することだと思います。

$(#mail-content.nano) は常に元の HTML を指し、スクローラーを追加した後に HTML をコピーすると、スクロールバーがまだスクロールしようとしている可能性があります。元のノード。

したがって、tipTip の作成後に nanoScroller を追加してみてください。このようなもの（テストされていません）：

var tip_html = $('.tooltip-html').html();
$('.tooltip').tipTip({
    activation: 'click',
    maxWidth: "230px",
    defaultPosition: "bottom",
    keepAlive: true,
    content: tip_html,
    enter: function () {
        $(this).find("div.nano").nanoScroller();
    }
});

これは、entertipTip のプロパティを使用して、ヒントが開かれたときに実行される関数を追加し、nanoScroller を新しい DOM 要素に追加します。

于 2012-04-23T11:24:44.923 に答える