jQuery - как вызвать лайтбокс при нажатии на строку таблицы?

Пример таблицы:

<table>

<tr class="record" id="10">
    <td>1/1/2010</td>
    <td>$10.00</td>
</tr>

<tr class="record" id="11">
    <td>1/3/2010</td>
    <td>$15.00</td>
</tr>

</table>

Я использую этот JS для захвата id из строки таблицы при нажатии и формирования URL-адреса (некоторая разметка CodeIgniter).

$(document).ready(function() {
    $('tr.record').bind('click', function() {
        var record_id = $(this).attr("id");
        var link = '<?php echo base_url(); ?>expenses/edit/' + record_id;
    });
});

С этим URL-адресом я хотел бы открыть страницу PHP/HTML в лайтбоксе.

Для большинства решений лайтбоксов jQuery (fancybox, оверлей jQuery Tools) для срабатывания требуется a href.

Интересно, может ли кто-нибудь указать мне, как сделать это автоматически после приведенного выше JS, то есть, как только record_id станет известно, сформируйте URL-адрес, а затем автоматически активируйте лайтбокс, который показывает мою страницу PHP/HTML внутри.

Любые указатели на это? Любые решения приветствуются, независимо от того, какой лайтбокс jQuery вы предпочитаете.

Спасибо!


javascript jquery lightbox codeigniter fancybox
person pepe    schedule 27.03.2011    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Попробуй это:

$(document).ready(function(){
    $('tr.record').bind('click', function(){

        var record_id   = $(this).attr("id");
        var link        = '<?php echo base_url(); ?>expenses/edit/' + record_id;

        $.fancybox({
            'width'             : '75%',
            'height'            : '75%',
            'autoScale'         : false,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'type'              : 'iframe',
            'href'              : link
        });

    });
});

Для получения дополнительной информации о параметрах проверьте: http://fancybox.net/api

person Mariano Cavallo    schedule 27.03.2011
comment
это очень близко к тому, что я хотел, большое спасибо! Однако есть проблема - для открытия ящика требуется 2 щелчка по строке - есть ли способ активировать ящик одним щелчком мыши? - person pepe; 28.03.2011
comment
Кажется, я исправил это, используя hover вместо click (строка 2) — но если у вас есть лучшее решение, дайте мне знать — спасибо! - person pepe; 28.03.2011
comment
Я рад, что это помогло. Что касается проблемы с двойным щелчком: попробуйте $.fancybox вместо $(this).fancybox, это должно исправить;) - person Mariano Cavallo; 28.03.2011

arrow_upward
1
arrow_downward

Я использую fancybox, который намного лучше, чем лайтбокс, и его можно реализовать почти так же, как лайтбокс. Вы можете попробовать это с помощью лайтбокса. По сути, все, что я сделал, чтобы заставить строку таблицы действовать как ссылку для запуска fancybox, — это объявить строку таблицы как:

<tr style="cursor:pointer" onclick='parent.$.fancybox({href:"#dom"}); return false;'></tr>

Вы также можете сделать то же самое для ячейки таблицы:

<td style="cursor:pointer" onclick='parent.$.fancybox({href:"#dom"}); return false;'></td>

Для href укажите ссылку, div, идентификатор или класс, который вы вызываете и который содержит контент, который вы хотите отобразить.

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

<tr style="cursor:pointer" onclick='parent.$.lightbox({href:"#dom"}); return false;'></tr>
person Kev Lew    schedule 08.07.2011

arrow_upward
0
arrow_downward

Это можно сделать с помощью ColorBox.

Сам не использовал его, но некоторые демо, кажется, делают то, что вы ищете.

person jmccarthy    schedule 27.03.2011
comment
спасибо @jmccarthy - получил хорошее решение выше, используя fancybox (который уже используется в моем проекте) - person pepe; 28.03.2011