Блог

Я разрабатываю сложную страницу, содержащую некоторые виджеты, некоторые «перетаскиваемые» элементы и <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>
  

Я думаю о 3 возможных решениях:

• mouseover (в первом) создайте ajax-запрос, который возвращает конкретный HTML-код всплывающей подсказки, вставьте его внутрь оболочки всплывающей подсказки, покажите его и mouseout скройте его.
• На mouseover , (на первом) создайте ajax-запрос, который возвращает json, отобразите его с помощью js (mustache), вставьте его во всплывающую подсказку-оболочку, покажите ее и mouseout скройте ее.
• Визуализируйте всплывающую подсказку непосредственно внутри элемента и включите ее mouseover / mouseout

css / макет / позиционирование не являются большой проблемой, в том числе потому, что я уже создал макет плагина mootools для всплывающих подсказок (если у вас есть какие-либо предложения о некоторых отличных настраиваемых плагинах mootools для всплывающих подсказок, пожалуйста, дайте мне знать :)).

Мне просто нужен совет, каким путем следовать, чтобы внедрить эту усовершенствованную систему «всплывающих подсказок», или если у вас есть лучшие решения, чтобы предложить мне. 🙂

Спасибо всем

p.s. Я разрабатываю веб-приложение, используя rails3 (и haml, scss, compass) и mootools в качестве js-фреймворка ( mustache в качестве системы шаблонов).

на самом деле вы не можете взять один метод и предпочесть его другому без предварительного удовлетворения некоторых ваших бизнес-требований.

вопросы, которые вам нужно задать себе, следующие:

важен ли SEO

если да:

• важно НЕ размещать содержимое в теле, поскольку оно не является релевантным или уникальным, может повлиять на плотность ключевых слов и создать неверное впечатление о реальном содержимом страницы у Google, а затем у AJAX
• важно иметь в теле, чтобы Google мог видеть, а затем отображать в скрытом элементе

У меня такое чувство, что вашему приложению многого этого не потребуется, но это верный аргумент.

DOM и «важна ли производительность»

если да (вы уже используете canvas… более 100 перетаскиваемых …)

• сколько (слишком много?) У вас будет узлов с всплывающими подсказками (дополнительные узлы dom)? слишком много? используйте ajax / делегирование событий
• несколько всплывающих подсказок на страницу: все еще можно предварительно отобразить ее, чтобы сохранить дополнительные запросы
• необходимость добавления всех событий подсказки, делегируйте!
• задержка во время ожидания XHR onComplete нежелательна? предварительный рендеринг!

Сеть / запросы

если вы идете по маршруту ajax, вам нужно придумать способ минимизировать количество возможных запросов, особенно если одни и те же всплывающие подсказки могут запускаться снова и снова. это означает:

• кэширование результатов запроса локально на странице и проверка по кешу, прежде чем запрашивать его с сервера
• если ваши данные не являются динамическими / в режиме реального времени, рассмотрите возможность даже перехода в localStorage под некоторым ключом / идентификатором базы данных, это переживет перезагрузку страницы, переход и возврат посетителей.

что касается практических рекомендаций, я знаю, что вы вполне способны выполнить реальный код, так что удачи 🙂

исходя из моего опыта, я делаю сочетание обоих. исходная информация, которая часто меняется, но не так часто, кэшируется при загрузке страницы. информация об использовании / размерах, помощники формы и т.д., Которые не меняют кэш i в localStorage вместо этого. всплывающие подсказки, которые имеют очевидную ценность для SEO, находятся в теле.