Всплывающие подсказки с прототипом или scriptaculous для magento - PullRequest
Новая
       16

Всплывающие подсказки с прототипом или scriptaculous для magento

0 голосов
/ 07 ноября 2011

У меня проблема с подсказками на моем веб-сайте magento, мне нужна одна подсказка на странице продукта, которая будет отображать HTML UL List. Я попробовал некоторые плагины, которые я нашел, но у меня были проблемы с JQuery, так как он отключал другие всплывающие прототипы, которые есть на странице продукта.

Я новичок во всех типах javascript и надеюсь, что вы, эксперты, поможете мне с этим, пожалуйста.

Мой идентификатор триггера для всплывающих подсказок # почему покупать и класс всплывающей подсказки в CSS имеет вид .why-to-buy-tooltip

Может кто-нибудь предложить мне прототип или простую подсказку, основанную на сценариях, которая может показать HTML, пожалуйста?

Любая помощь приветствуется. Заранее спасибо.

Ответы [ 2 ]

3 голосов
/ 08 ноября 2011

Обычно это можно сделать только с помощью CSS.Для начала должен быть якорь; 

<a id="why-to-buy" href="#" onclick="return false;">
    Why To Buy?
    <ul class="why-to-buy-tooltip">
        <li>Reason #1</li>
        <li>Reason #2</li>
    </ul>
</a>

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

#why-to-buy {
    position: relative;
}

#why-to-buy .why-to-buy-tooltip {
    display: none;
    position: absolute;
    width: 200px;
    height: 200px;
    z-index: 100;
}

#why-to-buy:hover .why-to-buy-tooltip, #why-to-buy:active .why-to-buy-tooltip {
    display: block;
}

Если вам нужна дополнительная информация, найдите и прочитайте о "всплывающих окнах CSS".Приятно было бы добавить некоторые переходы CSS3 - старые браузеры просто игнорируют их и продолжают работать как обычно.

Этот тип всплывающих окон ограничен, поскольку он находится внутри якоря, а якоря не могут содержать якорей.Если элемент #why-to-buy относится к другому типу, например DIV, то IE не принимает псевдокласс :hover.Для этого особого случая в конце концов требуется немного JavaScript. 

$('why-to-buy').observe('mouseenter', function() {
    this.addClassName('over');
}).observe('mouseleave', function() {
    this.removeClassName('over');
});

Обновите последнее правило таблицы стилей, включив #why-to-buy.over .why-to-buy-tooltip.Часть JavaScript нужна редко и может входить в /skin/frontend/base/default/js/ie6.js.Или вы можете поощрять обновления браузера и вообще не поддерживать старый IE.

0 голосов
/ 08 ноября 2011

Быстрый поиск в Google вернул этот и показал поддержку HTML:

http://www.nickstakenburg.com/projects/prototip/

Он основан на прототипе, поэтому должен хорошо работать с Magento.

...