jQuery - 如何在點擊表格行時觸發燈箱？

樣品表：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 lightbox解決方案（fancybox，jQuery Tools覆蓋）需要觸發a href。

我不知道是否有人可以指示我如何在上面的JS後自動完成 - 也就是一旦知道record_id，形成URL，然後自動觸發一個顯示我的PHP /裏面的HTML頁面。

任何指針？歡迎任何解決方案，無論您喜歡的jQuery燈箱。

謝謝！

來源

2011-03-27 pepe

試試這個：

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

來源

2011-03-27 21:20:59

這是非常接近我想要什麼，非常感謝！雖然有一個問題 - 它需要點擊2行才能打開盒子 - 是否有一種方法可以通過單擊來激活盒子？ – pepe 2011-03-27 21:32:14

我似乎已經通過使用'hover'而不是'click'來修復它（第2行） - 但是如果你有更好的解決方案，讓我知道 - thx！ – pepe 2011-03-27 21:47:40

我很高興它有幫助。關於雙擊問題：嘗試使用$ .fancybox而不是$（this）.fancybox，它應該修復它;） – 2011-03-28 01:39:13

你應該可以用ColorBox來完成這項工作。

自己並沒有使用它，但一些演示似乎做你在找什麼。

來源

2011-03-27 21:15:55 jmccarthy

感謝@jmccarthy - 得到了很好的解決上述使用的fancybox（這已經是在使用中在我的項目） – pepe 2011-03-28 16:00:27

我用的fancybox比收藏好得多，它可以實現相當多的方式燈箱一樣。你可以試試這個與lightbox。基本上所有我做得到錶行作爲一個鏈接觸發的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>

來源

2011-07-08 06:03:37

jQuery - 如何在點擊表格行時觸發燈箱？

回答

相關問題