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