Как настроить отдельный динамический div после активации Cluetip? - PullRequest
Новая
       10

Как настроить отдельный динамический div после активации Cluetip?

0 голосов
/ 30 марта 2012

У меня есть каталог товаров. При переносе миниатюры - описание товара появляется во всплывающей подсказке (Cluetip). Мне нужна тень, чтобы появиться вокруг связанного изображения, когда Cluetip активирован.

Для этого я создал отдельный div с тенью вокруг изображения и Вот как я нацеливаюсь на div, когда активируется Cluetip: 

onActivate:   function() { $("#shadow").fadeIn(1000); }

Но проблема в том, что в моем случае CMS генерирует идентификаторы div динамически, поэтому они имеют имена, такие как # shadow6, # shadow8, # shadow17 и т. Д.

У меня вопрос: как нацелить идентификатор конкретного динамического div, когда на нем активирован Cluetip?

JQuery: 

<script type="text/javascript">
    $(document).ready(function () {
        $('.thumbnail').cluetip({
            fx: {
                open: 'fadeIn',
                openSpeed: '2000'
            },

            showTitle: false,
            cursor: 'pointer',
            positionBy: 'auto',
            height: '210px',
            topOffset: 0,
            leftOffset: 20,
            local: true,
            sticky: true,
            mouseOutClose: true,

            onActivate: function () {
                $("#shadow").fadeIn(1000);
            },

            onHide: function () {
                $("#shadow").fadeOut(300);
            }
        });
    });
</script>

HTML / PHP (в цикле) 

<div id="shadow{$obj_id}" style="position: absolute; display:none;     
    width:150px; height:190px;"></div>
<div class="thumbnail">
    <img src="/images/product.jpg" />
</div>

АКТУАЛЬНЫЙ КОД 

<div id="shadow1"></div>
<a href="/shoe-model-name.html">
    <span class="cm-template-box" template="common_templates/image.tpl" id="te3">
    <img class="cm-template-icon hidden" src="/skins/test/customer/images/icons/layout_edit.gif" width="16"     height="16" alt="" />
    <img class="thumbnail" rel="#popupz1" src="/images/product-tmb.jpg" width="150"     height="180" alt=""  /></span>
 </a>

1 Ответ

0 голосов
/ 30 марта 2012

Вы должны иметь возможность ссылаться на свой теневой элемент, используя Атрибут начинается с селектора как: 

$(this).closest('a').prev('div[id^="shadow"]');

Это выбирает предыдущий элемент первымякорь, обертывающий всплывающую подсказку .thumbnail (т.е. $(this)), если она a.это div и б.его идентификатор начинается со строки "тень".На основании разметки, которую вы показали, это должно работать.

, т. Е. 

onActivate: function(){
   $(this).closest('a').prev('div[id^="shadow"]').fadeIn(1000);                               
},

onHide: function(){ 
   $(this).closest('a').prev('div[id^="shadow"]').fadeOut(300);                               
}

См. эту рабочую скрипку с вашей фактической разметкой.

РЕДАКТИРОВАТЬ : Поскольку у вас, кажется, есть доступ к PHP, который генерирует разметку, почему бы вам просто не использовать класс для ссылки на ваши теневые элементы?В случае, если у вас есть разметка, например: 

<div id="shadow8" class="cluetip-shadow" style="position: absolute; display:none; width:150px; height:190px;" ></div>

<div class="thumbnail" >
   <img src="/images/product.jpg" />
</div>

Вы можете просто сделать: 

$(this).prev('.cluetip-shadow').doSth();

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

...