0

我正在尝试使用带有数组的 Mootools 浮动提示来显示 ID 的链接和 ID 的内容。

演示在这里,我正在尝试将它用于 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 回答