复杂的HTML工具提示(存储)-体系结构建议

Question

我正在开发一个包含一些小部件、一些“可拖动”元素和一个<canvas>交互时间线的复杂页面。

问题：

在mouseover -关于可以拖动(实体)-的元素上，我必须显示一个工具提示，其中包含关于该特定元素的一些高级信息(实体页面的“预览”)。

可拖放的项(我认为它们是~ 100)以这种方式表示(其中一些是以第纳尔方式创建的)：

<!-- ... -->
<div id="entity-1" class="draggable">
    <div class="title">title</div>
    <img src="#URL" alt="..." />
    <div class="tooltip-wrapper"></div>
</div>
<div id="entity-2" class="draggable">
    <div class="title">title</div>
    <img src="#URL" alt="..." />
    <div class="tooltip-wrapper"></div>
</div>
<div id="entity-3" class="draggable">
    <div class="title">title</div>
    <img src="#URL" alt="..." />
    <div class="tooltip-wrapper"></div>
</div>
<!-- ... -->

最初将.tooltip-wrapper设置为display:none和opacity:0的

一个通用的工具提示是一个有点复杂的HTML，包含一些细节，比如(很多简化的)

<div class="tooltip-entity-wrapper">
    <div class="title">entity title</div>

    <div class="tab"><!-- tab content --></div>
    <div class="tab"><!-- tab content --></div>
    <div class="tab"><!-- tab content --></div>

    <form action="...">
        <!-- form content -->
    </form>
    <a href="#URL"><!-- full entity page link --></a>
</div>

我在考虑三种可能的解决方案：

• On mouseover，(在第一个)发出一个ajax请求，该请求返回特定的工具提示HTML，将其注入工具提示包装器中，显示它并在mouseout上隐藏它。
• on mouseover，(在第一个)发出返回json的ajax请求，以js (胡子)呈现它，将它注入工具提示包装器中，显示它并在mouseout上隐藏它。

H 118将工具提示直接呈现在元素中，并在上切换它。

css/布局/定位不是什么大问题，也是因为我已经创建了一个工具提示mootools插件模型(如果您对一些伟大的可定制的mootools工具提示插件有任何建议，请告诉我:)。

我只需要一个提示/建议来实现这个高级的“工具提示”系统，或者如果您有更好的解决方案来建议我。:)

谢谢大家

附注：我正在用rails3 (和haml，scss，compass)和mootools作为js框架开发这个web应用程序(+八字胡作为模板系统)。

Answer 1

您不可能首先采用一种方法而不是另一种w/o来覆盖您的一些业务需求。

你需要问自己的问题是：

是SEO的重要

如有，则：

• 重要的是不要在正文中包含内容，因为它是不相关的或唯一的，可能会影响您的关键字密度，并给google带来对页面真实内容的错误印象，那么AJAX
• 在体内的重要作用是让google看到，然后在隐藏元素

中呈现。

我觉得你的应用程序不需要太多，但这是一个有效的观点。

DOM和“性能是重要的”

如果是的话(你已经用过画布了.100+拖曳物.)

• 多少(太多了？)有工具提示的节点(额外的dom节点)吗？太多了？每页使用ajax / event delegation
• few工具提示:是否仍然可以预呈现它以保存添加所有提示事件的额外request(s)
• footprint，delegate!
• delay在等待XHR onComplete时不受欢迎？预渲染！

网络/请求

如果您使用ajax路径，则需要找到一种方法来最小化可能的请求数量，特别是如果可以一次又一次地触发相同的工具提示。这意味着：

• 缓存请求在页面上产生本地结果，并在从服务器
• 请求缓存之前先检查缓存，如果数据不是动态/实时的，甚至考虑在某些键/ db id下推送到localStorage，这将在页面重新加载、转换和返回访问者的情况下存活下来。

至于如何操作，我知道您完全有能力执行实际代码，所以祝您好运:)

根据我的经验，我两者兼而有之。在每次页面加载时，经常会缓存经常更改的股票信息。使用/调整大小信息、表单帮助等不会改变我在localStorage中缓存。工具提示，有一个明显的SEO值在体内。