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

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

0 голосов
/ 28 марта 2011

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

<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 overlay) требуют для запуска a href.

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

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

Спасибо!

Ответы [ 3 ]

3 голосов
/ 28 марта 2011

Попробуйте: 

$(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

1 голос
/ 08 июля 2011

Я использую 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, id или класс, который вы вызываете, который содержит контент, который вы хотите отобразить.

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

<tr style="cursor:pointer" onclick='parent.$.lightbox({href:"#dom"}); return false;'></tr>
0 голосов
/ 28 марта 2011

Вы должны быть в состоянии сделать это с помощью ColorBox .

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

...