【发布时间】：2015-09-01 07:07:32
【问题描述】：
我正在使用 datatables.net 和带有悬停效果的 boostrap 图像。 展开表格内的图片必须和表格外的图片一样，找不到原因：
http://jsfiddle.net/rokas_m/rqokaub2/
<!DOCTYPE html>
<html>
<head>
<title>timeline</title>
<meta charset="UTF-8" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="timeline2.css">
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
<style>
.thumbnail {
position:relative;
overflow:hidden;
}
.caption {
position:absolute;
top:0;
right:0;
background:rgba(66, 139, 202, 0.75);
width:100%;
height:100%;
padding:2%;
display: none;
text-align:center;
color:#fff !important;
z-index:2;
}
img {
max-height: none;
min-height: 0;
}
td.details-control {
background: url('https://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('https://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}
</style>
</head>
<body>
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-body">
<table id="table" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th >Pavadinimas</th>
<th >Antraštė</th>
<th>Tipas</th>
<th>Išsiuntimo / gavimo data</th>
<th>Data</th>
<th>Dokumento nr.</th>
</tr>
</thead>
</table>
<div class="col-md-3">
<div class="thumbnail">
<div class="caption">
<h6>Dokumentas.doc</h6>
<p><a href="" class="label label-danger" rel="tooltip" title="View">Žiūrėti</a>
<a href="" class="label label-default" rel="tooltip" title="Add">Pridėti</a></p>
</div>
<img src="http://icons.iconarchive.com/icons/graphicloads/filetype/64/pdf-icon.png" alt="..."></img>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<div class="caption">
<h6>Dokumentas.doc</h6>
<p><a href="" class="label label-danger" rel="tooltip" title="View">Žiūrėti</a>
<a href="" class="label label-default" rel="tooltip" title="Add">Pridėti</a></p>
</div>
<img src="http://icons.iconarchive.com/icons/graphicloads/filetype/64/word-doc-icon.png" alt="..."></img>
</div>
</div>
</div>
</div>
</div>
<script>
/* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
return '<table>'+
'<tr >'+
'<td><strong>Dokumentai: </strong></td>'+
'<td><div>'+
'<div class="thumbnail">'+
'<div class="caption">'+
'<h6>'+d.dokumentai+'</h6>'+
'<p><a href="" class="label label-danger" rel="tooltip" title="View">Žiūrėti</a>'+
'<a href="" class="label label-default" rel="tooltip" title="Add">Pridėti</a></p>'+
'</div>'+
'<img src="'+d.dok_ikona+'"></img>'+
'</div>'+
'</div></td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var table = $('#table').DataTable( {
"order": [[ 3, "desc" ]],
"paging": false,
"searching": false,
"data": [
{
"pavadinimas": "Pretenzijos, reikalavimai Biurui",
"antraste": "Dėl išmokos",
"tipas": "Gautas",
"siunt_gav_data": "2015/08/24",
"data": "2011/04/25",
"dok_nr": "G00-100",
"dokumentai": "dokumentas.doc",
"dok_ikona": "http://icons.iconarchive.com/icons/graphicloads/filetype/64/pdf-icon.png"
},
{
"pavadinimas": "Pretenzijos, reikalavimai Biurui",
"antraste": "Dėl išmokos",
"tipas": "Gautas",
"siunt_gav_data": "2015/08/25",
"data": "2011/04/26",
"dok_nr": "G00-101",
"dokumentai": "dokumentas.pdf",
"dok_ikona": "http://icons.iconarchive.com/icons/graphicloads/filetype/64/pdf-icon.png"
}
],
"columns": [
{
"className": 'details-control',
"data": null,
"defaultContent": ''
},
{ "data": "pavadinimas" },
{ "data": "antraste" },
{ "data": "tipas" },
{ "data": "siunt_gav_data" },
{ "data": "data" },
{ "data": "dok_nr" }
],
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 0,1,2,3 ] }
]
} );
// Add event listener for opening and closing details
$('#table tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
} );
$( document ).ready(function() {
$("[rel='tooltip']").tooltip();
$('.thumbnail').hover(
function(){
$(this).find('.caption').slideDown(250); //.fadeIn(250)
},
function(){
$(this).find('.caption').slideUp(250); //.fadeOut(205)
}
);
});
</script>
</body>
</html>
【问题讨论】：
标签： javascript jquery html twitter-bootstrap datatables