我正在使用出色的BeautyTips 插件作为向最终用户指示验证失败的一种方式,并且每当动态添加、删除或动画页面内容时,我都会遇到定位问题。
这是一个具体的例子。我在每个页面的顶部都有一个用于确认/错误消息的 DIV。它使用 slideToggle() 显示在 $(document.ready) 中。这自然会“推动”所有后续的 html 内容,从而放弃美颜提示的定位/对齐。如果我在 slideToggle() 触发后调用插件的内置刷新方法,则所述定位问题得到纠正。您可以在此处和此处查看之前/之后的屏幕截图。
一种可能的解决方法是以编程方式检测 DOM 更改,特别是对 css 的更改,这样我就可以遍历每个 beautytip 并手动重新加载它。但是,似乎没有公开此类功能的本机 jQuery 事件。我看过Rick Strahl 令人印象深刻的 jQuery 插件监视 CSS 更改,但它似乎是基于一个假设,即人们提前知道他们希望监视的特定 HTML 元素。我想监视整个文档,因为我不能期望知道给定页面上可能存在哪些 html 元素,a) 将被动画化,b) 将在文档中的某个位置,它们会“推”下我的美容秘诀。而且我当然不想因为轮询文档中的每个块级元素而遭受巨大的性能损失。
我应该提到,如果我在其默认的“悬停”模式下使用该插件,该插件可以完美地工作,在该模式下,美容提示仅在响应用户鼠标输入时才显示。不幸的是,应用程序有一个设计约束,即必须在表单提交后显示所有验证错误,而无需额外的用户交互。
我敢肯定有一个非常简单/优雅的解决方案完全让我望而却步。当然,我可以避免所有这些麻烦,只需不使用动画来显示页面内容,但这似乎是要付出高昂的代价。