在网页上显示弹出数据的正确方法？

Posted 2023-02-25

【中文标题】在网页上显示弹出数据的正确方法？

【英文标题】：Proper way to show popup data on a web page?

【发布时间】：2011-04-02 00:10:04

【问题描述】：

我有一个要显示几个项目的项目列表，然后是一个“更多”按钮。我想要更多按钮在弹出框中显示新项目。有很多方法可以完成这项工作，但我正在尝试找出最佳做法。

这是我的方法。我们在我们的网站上使用 MooTools 和 Clientcide：

直接在“更多”按钮之后，我包含一个 div，其中包含我要放入弹出窗口的内容（完整列表，包括默认可见的那些项目的副本），其类包括样式“显示：无”。

我将一个事件附加到运行名为“popupNext”的脚本的更多按钮上。 popupNext 获取按钮之后的下一个元素（使用 mootools 中的 getNext），并以该元素作为其内容创建一个新的 StickyWin（通过 Clientcide 和stickywin.ui）。然后（这是感觉特别hacky的部分）它从内容元素中删除包含“display:none”样式的类。

最后，我使用 element.store()（来自 mooTools）将 StickyWin（使用键“win”）存储在事件元素中。上面我忽略了：popupNext 运行时，它首先通过 element.retrieve() 检查是否存在现有的 StickyWin，如果存在则显示。

我猜这一切似乎都还好——最大的缺点是页面膨胀——虽然我只显示每个列表的前几个元素，但每个页面可能加载了更多但从未见过的元素。但我很好奇是否有更好的标准方法来做到这一点。例如，我可以通过 ajax 检索元素来减少膨胀，但代价是当用户想要查看完整列表时响应较慢。

【参考方案1】：

查看 StickyWin.Ajax - 它似乎比普通的 StickyWin 更接近您的需求。

【讨论】：

感谢您的建议。虽然我在很多地方都使用 StickyWin.Ajax，但我非常担心速度，因此我宁愿在这些情况下不使用 Ajax。