table row collapse/expand

CTAPbIu_MABP ↓

04 Март, 2010, 05:27:04

НЕ ХУЕТА! ХУЕТА!

мавр
Группа: в ухо

Карма: не нужна
Сообщений: 5184
Сила слова: 1.81

задача такая
есть таблица из 2 рядков
певый видимый второй скрытый
способ сокрытия любой - либо display:none на tr либо на td либо еще как
при нажатии на первый рядок второй становиться видимым
при этом должна происходить плавная анимация увеличивающая размер рядка от 0 до полной высоты
строки могут иметь тэг colspan
должно быть кросбраузерно
изменять разметку можно как угодно

я уже знаю
что у рядка оригинальный display не block a table-row, у клетки table-cell
что эксплорер клал на предыдущее высказывание
что для того чтобы table-row и table-cell работали с жуквери я написал патч

Javascript

jQuery.fx.prototype.update = function(){
if ( this.options.step )
this.options.step.call( this.elem, this.now, this );

(jQuery.fx.step[this.prop] || jQuery.fx.step._default)( this );

var old = jQuery.data(this.elem, "olddisplay");
if ( ( this.prop == "height" || this.prop == "width" ) && this.elem.style )
this.elem.style.display = old || "block";
}

$("td").each(function(){
$.data(this, "olddisplay", "table-cell")
});
$("tr").each(function(){
$.data(this, "olddisplay", "table-row")
});

что это всравно не помогает для того чтобы slide эффект работал правильно
какие есть предложения?

последняя идея более мени работоспособного кода (в FF)

HTML


	Записан

java.lang.OutOfMemoryError

CTAPbIu_MABP ↓

04 Март, 2010, 08:17:38 , спустя 2 часа 50 минут 34 секунды

НЕ ХУЕТА! ХУЕТА!

мавр
Группа: в ухо

Карма: не нужна
Сообщений: 5184
Сила слова: 1.81

кстати уже не актуально

блго на пiха.ру


	Записан

java.lang.OutOfMemoryError

andrrr ↓

04 Март, 2010, 08:23:19 , спустя 5 минут 41 секунду

НЕ ХУЕТА! ХУЕТА!

Карма: 2
Сообщений: 12
Сила слова: 16.67

Нашел решение?
Или на дивах переверстал?)


	Записан

CTAPbIu_MABP ↓

05 Март, 2010, 01:25:13 , спустя 17 часов 1 минуту 54 секунды

НЕ ХУЕТА! ХУЕТА!

мавр
Группа: в ухо

Карма: не нужна
Сообщений: 5184
Сила слова: 1.81

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Michelin</title>

<style>
#myTbl{
border-collapse:collapse;
border: 1px solid red;
width:100%;
zoom:0;
}

#myTbl tr {
border-top : 1px solid red;
}

.hidden {
border-top : none !important;
}

.hidden td{
display:none;
}

.hidden td div{
display:none;
}

</style>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$("#myTbl tr").each(function(){
$(this).find("td:first").toggle(
function(){
var self = $(this)
self.parent().next().find("td").show();
self.parent().next().find("div").each(function(i,e){
var col = $("#myTbl col").eq(i),
width = parseInt(col.css("width"))*col.attr("span");
// тут еще надо расчитать border для col если есть
$(this).width(width-1)
}).slideDown(1000);
},
function(){
$(this).parent().next().find("div").slideUp(1000,function(){
$(this).parent().hide(0);
})
}
);
});
});

</script>

</head>
<body>
<div style="width:500px;">
<table id="myTbl" cellspacing="0" cellpadding="0" border="0">
<col style="width:33%;"></col>
<col style="width:33%;" span="2"></col>
<tbody>
<tr>
<td>row 1</td>
<td>data 1.2</td>
<td>data 1.3</td>
</tr>
<tr class="hidden">
<td><div>12 345 678 890</div></td>
<td colspan="2"><div>long long long long long string 1</div></td>
</tr>
<tr>
<td>row 2</td>
<td>data 2.2</td>
<td>data 2.3</td>
</tr>
<tr class="hidden">
<td>12345</td>
<td colspan="2">long long string 1</td>
</tr>
<tr>
<td>row 3</td>
<td>data 3.2</td>
<td>data 3.3</td>
</tr>
<tr class="hidden">
<td>12345</td>
<td colspan="2">long long string 1</td>
</tr>
</tbody>
</table>
</div>

</body>
</html>


	Записан

java.lang.OutOfMemoryError

Страниц: [1]

Печать

« предыдущая тема следующая тема »

	Автор	Тема: table row collapse/expand (Прочитано 933 раз)
0 Пользователей и 1 Гость смотрят эту тему.