Динамические подсказки - PullRequest
Новая
       5

Динамические подсказки

0 голосов
/ 05 февраля 2012

Может кто-нибудь указать мне в правильном направлении. Я искал вечно, но не могу узнать, как добавить подсказку к динамически генерируемым данным. Например, я создаю список результатов MySQL, показывающих названия фильмов, и хочу иметь всплывающую подсказку, которая дает дополнительную информацию, такую ​​как режиссер, актеры и т. Д. При наведении курсора мыши. Случайные списки названий фильмов генерируются каждый раз.

Я знаю, как добавить подсказки к статическим данным, но как я могу добавить подсказки на лету?

Будем благодарны за любые указатели или толчки в правильном направлении.

1 Ответ

0 голосов
/ 05 февраля 2012

Я использовал Prototip 2 внутри PHP, где советы генерируются на лету по мере создания страницы.

По сути, у меня есть этот код, который создает кучу всплывающих подсказок для разных элементов базы данных. Этот код является частью HTML для всей страницы. Это происходит внутри скрипта представления Zend Framework, но является универсальным. 

<?php foreach($this->items as $item): ?>
<?php if ($item['statusText'] != ''): ?>

tips.push(
        new Tip('led_<?php echo $item['boxsn']; ?>', '<?php echo $item['statusText']; ?>', {
stem: 'leftMiddle',
hook: { target: 'rightMiddle', tip: 'leftMiddle' },
style: 'protoblue',
offset: { x: 5, y: 0 }
})
);
    <?php endif; ?>
    <?php if ($item['alarms'] != ''): ?>

    tips.push(
        new Tip('alarm_<?php echo $item['boxsn'] ?>',
                '<?php echo $item['alarms'] ?>', {
            stem: 'leftMiddle',
            hook: { target: 'rightMiddle', tip: 'leftMiddle' },
            style: 'protoblue',
            offset: { x: 5, y: 0 }
        })
    );
    <?php endif; ?>
<?php endforeach; ?>

Это приводит к выводу, похожему на следующее для каждой созданной подсказки: 

tips.push(
    new Tip('led_091133000039', 'Item has not functioned since 02/03/12 01:30 PM', {
        stem: 'leftMiddle',
        hook: { target: 'rightMiddle', tip: 'leftMiddle' },
        style: 'protoblue',
        offset: { x: 5, y: 0 }
    })
);

Я даже использую Ajax, чтобы обновить состояние элемента, и использую следующее, чтобы очистить все подсказки из памяти, чтобы новые из Ajax стали активными: 

// prior to ajax update
Tips.hideAll(); // prototip function to hide visible tooltips

tips.each(function(t) {
    delete t;
});

delete tips;
tips = [];

// run ajax update

Каждый идентификатор, такой как led_091133000039, является идентификатором изображения, которое я хочу, чтобы всплывающая подсказка отображалась при наведении курсора. Этот HTML генерируется ранее на странице. У меня есть Javascript, который создает все подсказки внизу HTML.

Надеюсь, это поможет вам.

...