테이블에 행을 추가하려고하고 해당 행을보기로 슬라이드하려고하지만 슬라이드 다운 기능은 레이아웃을 엉망으로 만드는 테이블 행에 display : block 스타일을 추가하는 것 같습니다.
이 문제를 해결하는 방법에 대한 아이디어가 있습니까?
코드는 다음과 같습니다.
$.get('/some_url',
{ 'val1': id },
function (data) {
var row = $('#detailed_edit_row');
row.hide();
row.html(data);
row.slideDown(1000);
}
);답변
테이블 행에서는 애니메이션이 지원되지 않습니다.
Chaffer와 Swedberg의 “Learning jQuery”에서
브라우저는 가시적 인 표시 속성에 대해 다른 값 (테이블 행 및 블록)을 사용하기 때문에 테이블 행은 애니메이션에 특별한 장애물이됩니다. 애니메이션이없는 .hide () 및 .show () 메서드는 항상 테이블 행과 함께 사용하는 것이 안전합니다. jQuery 버전 1.1.3부터 .fadeIn () 및 .fadeOut ()도 사용할 수 있습니다.
td 내용을 div로 감싸고 slideDown을 사용할 수 있습니다. 애니메이션에 추가 마크 업이 필요한지 결정해야합니다.
답변
tr을 동적으로 감싸고 slideUp / slideDown이 완료되면 제거합니다. 하나 또는 두 개의 태그를 추가 및 제거하고 애니메이션이 완료되면 태그를 제거하는 것은 매우 작은 오버 헤드입니다. 눈에 띄는 지연이 보이지 않습니다.
슬라이드 업 :
$('#my_table > tbody > tr.my_row')
.find('td')
.wrapInner('<div style="display: block;" />')
.parent()
.find('td > div')
.slideUp(700, function(){
$(this).parent().parent().remove();
});슬라이드 다운 :
$('#my_table > tbody > tr.my_row')
.find('td')
.wrapInner('<div style="display: none;" />')
.parent()
.find('td > div')
.slideDown(700, function(){
var $set = $(this);
$set.replaceWith($set.contents());
});그의 플러그인을 가져 와서 위의 항목으로 다시 벗겨 낼 때 fletchzone.com에 대한 찬사를 지불해야합니다.
답변
여기에 필자가 작성한 플러그인이 있습니다. Fletch 구현에서 약간의 시간이 걸리지 만 행은 위 또는 아래로 슬라이드하는 데만 사용됩니다 (삽입 행 없음).
(function($) {
var sR = {
defaults: {
slideSpeed: 400,
easing: false,
callback: false
},
thisCallArgs: {
slideSpeed: 400,
easing: false,
callback: false
},
methods: {
up: function (arg1,arg2,arg3) {
if(typeof arg1 == 'object') {
for(p in arg1) {
sR.thisCallArgs.eval(p) = arg1[p];
}
}else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
sR.thisCallArgs.slideSpeed = arg1;
}else{
sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
}
if(typeof arg2 == 'string'){
sR.thisCallArgs.easing = arg2;
}else if(typeof arg2 == 'function'){
sR.thisCallArgs.callback = arg2;
}else if(typeof arg2 == 'undefined') {
sR.thisCallArgs.easing = sR.defaults.easing;
}
if(typeof arg3 == 'function') {
sR.thisCallArgs.callback = arg3;
}else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
sR.thisCallArgs.callback = sR.defaults.callback;
}
var $cells = $(this).find('td');
$cells.wrapInner('<div class="slideRowUp" />');
var currentPadding = $cells.css('padding');
$cellContentWrappers = $(this).find('.slideRowUp');
$cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed,sR.thisCallArgs.easing).parent().animate({
paddingTop: '0px',
paddingBottom: '0px'},{
complete: function () {
$(this).children('.slideRowUp').replaceWith($(this).children('.slideRowUp').contents());
$(this).parent().css({'display':'none'});
$(this).css({'padding': currentPadding});
}});
var wait = setInterval(function () {
if($cellContentWrappers.is(':animated') === false) {
clearInterval(wait);
if(typeof sR.thisCallArgs.callback == 'function') {
sR.thisCallArgs.callback.call(this);
}
}
}, 100);
return $(this);
},
down: function (arg1,arg2,arg3) {
if(typeof arg1 == 'object') {
for(p in arg1) {
sR.thisCallArgs.eval(p) = arg1[p];
}
}else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
sR.thisCallArgs.slideSpeed = arg1;
}else{
sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
}
if(typeof arg2 == 'string'){
sR.thisCallArgs.easing = arg2;
}else if(typeof arg2 == 'function'){
sR.thisCallArgs.callback = arg2;
}else if(typeof arg2 == 'undefined') {
sR.thisCallArgs.easing = sR.defaults.easing;
}
if(typeof arg3 == 'function') {
sR.thisCallArgs.callback = arg3;
}else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
sR.thisCallArgs.callback = sR.defaults.callback;
}
var $cells = $(this).find('td');
$cells.wrapInner('<div class="slideRowDown" style="display:none;" />');
$cellContentWrappers = $cells.find('.slideRowDown');
$(this).show();
$cellContentWrappers.slideDown(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function() { $(this).replaceWith( $(this).contents()); });
var wait = setInterval(function () {
if($cellContentWrappers.is(':animated') === false) {
clearInterval(wait);
if(typeof sR.thisCallArgs.callback == 'function') {
sR.thisCallArgs.callback.call(this);
}
}
}, 100);
return $(this);
}
}
};
$.fn.slideRow = function(method,arg1,arg2,arg3) {
if(typeof method != 'undefined') {
if(sR.methods[method]) {
return sR.methods[method].apply(this, Array.prototype.slice.call(arguments,1));
}
}
};
})(jQuery);기본 사용법 :
$('#row_id').slideRow('down');
$('#row_id').slideRow('up');개별 인수로 슬라이드 옵션을 전달하십시오.
$('#row_id').slideRow('down', 500); //slide speed
$('#row_id').slideRow('down', 500, function() { alert('Row available'); }); // slide speed and callback function
$('#row_id').slideRow('down', 500, 'linear', function() { alert('Row available'); }); slide speed, easing option and callback function
$('#row_id').slideRow('down', {slideSpeed: 500, easing: 'linear', callback: function() { alert('Row available');} }); //options passed as object기본적으로 슬라이드 다운 애니메이션의 경우 플러그인은 DIV의 셀 내용을 랩핑하고, 애니메이션을 적용한 다음 제거하고, 그 반대로 슬라이드 업을 위해 (셀 패딩을 제거하기위한 몇 가지 추가 단계를 사용하여) 그 반대로합니다. 또한 호출 한 객체를 반환하므로 다음과 같이 메소드를 연결할 수 있습니다.
$('#row_id').slideRow('down').css({'font-color':'#F00'}); //make the text in the row red이것이 누군가를 돕기를 바랍니다.
답변
행의 내용을 a로 감싸고 <span>선택기를 사용하십시오.$('#detailed_edit_row span'); 하여 약간의 해킹을 있지만 방금 테스트하여 작동합니다. 나는 또한 table-row위 의 제안 을 시도했지만 작동하지 않는 것 같습니다.
업데이트 : 나는이 문제로 놀고 있었고 모든 표시에서 jQuery는 slideDown을 수행하는 객체가 블록 요소가되어야합니다. 따라서 주사위는 없습니다. 셀에서 slideDown을 사용하는 테이블을 구성 할 수 있었고 레이아웃에 전혀 영향을 미치지 않았으므로 설정 방법을 잘 모르겠습니다. 귀하의 유일한 해결책은 해당 셀이 블록이거나 괜찮은 방식으로 테이블을 리팩터링하는 .show();것입니다. 행운을 빕니다.
답변
다음과 같이 행의 내용을 선택하십시오.
$(row).contents().slideDown();.contents () -텍스트 및 주석 노드를 포함하여 일치하는 요소 세트에서 각 요소의 하위를 가져옵니다.
답변
나는 이것에 대답하는 데 시간이 조금 걸렸지 만 그것을 할 수있는 방법을 찾았습니다 🙂
function eventinfo(id) {
tr = document.getElementById("ei"+id);
div = document.getElementById("d"+id);
if (tr.style.display == "none") {
tr.style.display="table-row";
$(div).slideDown('fast');
} else {
$(div).slideUp('fast');
setTimeout(function(){tr.style.display="none";}, 200);
}
}방금 테이블 데이터 태그 안에 div 요소를 넣었습니다. 그것이 표시되면 div가 확장됨에 따라 전체 행이 내려갑니다. 그런 다음 테이블 행을 다시 숨기 전에 페이드 백 (그런 다음 시간 초과 효과를 볼 수 있음)하도록 명령하십시오. 🙂
이것이 누군가를 돕기를 바랍니다!
