0

ID のリンクと ID のコンテンツを表示するための配列で Mootools Floating Tips を使用しようとしています。

デモはここにあり、この例のように ID0 ID1 ID2 でいくつかのヒントに使用しようとしています。

アイデアは、forループを作成することです：

var x = 0;

    for (x=0; x++) {

    var divIDs = "#advanced" + x + "a'";
    var content = "$('htmlcontent" + x + "')"

    new FloatingTips(divIDs, {

    content: function() { return content; },

    html: true,    
    });

}

どんな助けでも大歓迎です！

グレッグ

4

1 に答える 1

0

ID の配列を使用する必要がありますか? すべてのヒント コンテナとコンテンツ要素にクラスを設定する方がよいと思います。これは、FloatingTips(). 例えば：

<div class="tipContainer">
    <p>A second tip</p>
    <p><a href="#">Let me see!</a></p>

    <div class="tipContent" style="display: none;">
        <p>Here is another tip.</p>
    </div>    
</div>

<div class="tipContainer">
    <p>A second tip</p>
    <p><a href="#">Let me see!</a></p>

    <div class="tipContent" style="display: none;">
        <p>Here is another tip.</p>
    </div>    
</div>

への更新された呼び出しにFloatingTipsは、HTML で設定されているように、tipContainer および tipContent クラスへの更新された参照が含まれます。コンテンツをプルする関数が少し変更され、'tipContent' クラスの要素内のコンテンツを検索するようになりました。

new FloatingTips('.tipContainer', {

    // Content can be a string (an attribute name) or a function.
    // If it's a function, it can returns string or HTML elements.
    content: function(tipContainer) { 
        return $(tipContainer).getElement('.tipContent'); 
    },

    html: true,        // I want that content is interpreted as HTML
    center: false,     // I do not want to center the tooltip
    arrowOffset: 16,   // Arrow is a little more the the right
    offset: { x: 10 }, // Position offset {x, y}
    position: 'bottom',    
});

これが実際の例です - http://jsfiddle.net/pH3BB/1/

お役に立てれば！

クレイグ

于 2012-11-20T10:10:36.040 に答える