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, id или класа, който извиквате, който съдържа съдържанието, което искате да покажете.

Ако използвате лайтбокс, вероятно можете да напишете нещо подобно:

<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