Question

我想为我的网络应用程序提供一种方法，允许用户在其代码中的任何位置（内部脚本标记）中调用我的函数，该代码将显示淡入/淡出消息。我不知道该怎么做是在没有起始参考点的情况下确定我在DOM中的位置。

功能：

function displayMessage(message) {
    // Display a notification if the submission is successful.
    $('<div class="save-alert">' + message + '</div>')
        .insertAfter($('')) // Do not know how to know where to put the message.
        .fadeIn('slow')
        .animate({ opacity: 1.0 }, 2000)
        .fadeOut('slow', function () {
        $(this).remove();
    });
}

HTML：

<!-- Some HTML -->
<div>
    <script type="text/javascript">
        displayMessage("My message.");
    </script>
</div>
<!-- Some more HTML. -->

Answer 1

没有任何可靠的方法来获取此信息。您应该执行大多数其他库所做的操作 - 让用户将元素的ID或引用传递给displayMessage函数，以便您可以使用它。

Answer 2

除非您想要接受css选择器或id作为参数，否则还可以创建一个jQuery小部件。这样你就可以使用它：

$("#msgArea").messageWidget("displayMessage");

甚至多次重复使用

$("#msgArea").messageWidget("displayMessage", "message to display");

示例样板小部件：

(function( $ ) {
    $.widget("ui.messageWidget", {
        // default options
        options: { message: undefined},
        // constructor
        _create: function() {
            if (this.options.message !== undefined) {
                this.displayMessage(this.options.message);
            }
        },
        // Displays the message
        displayMessage: function() {
            this.element.append("your div's and messages");
        },
        // Allows constructor/setter arguments
        _setOption: function( key ) {
            $.Widget.prototype._setOption.apply( this, arguments );
        }
    });
}(jQuery));

Answer 3

通常有两种方式，一种是因为卡萨布兰卡指出你在DOM中提供一个div来附加消息。其次，这是我认为你想要的，就是在DOM本身上创建一个div节点。这样你就可以完全掌控了。毕竟它会在你完成后淡出。也可以从dom中杀死它。这就是fancylightbox（我相信很多其他人）对DOM的看法。你想把它放在正文的开头，所以没有其他的包含元素，并根据你的意愿设置样式 - 可能它会漂浮在页面中间的某个地方，就像灯箱/对话框一样。

Answer 4

您可能希望使用fixed positioning将您的框放在相对于浏览器视口的位置，而不管用户在文档中滚动到哪里。

如何在没有起始参考点的情况下获取父节点？

4 个答案: