Hoạt ảnh mở/đóng cột cột trong jQuery

Question

Làm cách nào để tạo hiệu ứng mở/đóng cột cột trong jQuery?

Tôi hiện đang có đoạn mã này:

jQuery(function($){ 
    $(".togglebutton").click(function(e){ 
     if (cost_visible) { 
      $(".numbers").animate({width: 80}, 1500); 
      $(".costs").animate({width: 0}, 1500); 

     } else { 
      $(".numbers").animate({width: 0}, 1500); 
      $(".costs").animate({width: 60}, 1500); 
     } 
    }); 
}); 

và HTML của tôi chứa thẻ TABLE/TR/TH/TD tiêu chuẩn với các TH và các thẻ TD mang tên lớp sử dụng để xác định những gì đã được mở hoặc đóng cửa.

Vấn đề có vẻ là sau khi jQuery chạm vào bảng, các ô bị ảnh hưởng đột nhiên cảm thấy cần phải xếp chồng lên nhau, thay vì giữ nguyên gọn gàng trong một hàng.

Tôi cho rằng điều này phải làm với jQuery là chỉ có thể tạo hiệu ứng "chặn" các phần tử, chứ không phải các phần tử được hiển thị "dạng bảng". Vì vậy, tôi có thể làm cho một bảng ra khỏi các yếu tố khối? Hay có cách nào khác để tạo hoạt ảnh cho các thành phần giống như bảng? Tôi đã tìm thấy this giải pháp đề nghị, nhưng nó có vẻ như một rắc rối để bọc tất cả các yếu tố bảng của bạn thành chỉ Bảo hiểm tiền gửi đối với các hình ảnh động ...

Answer 1

Sau khi một số nghiên cứu, tôi đã phát hiện ra rằng ...

• Vấn đề thực sự là do các mục TH và TD được đặt bởi jQuery để "hiển thị: chặn" mục cho hoạt ảnh. Vẫn chưa có cách nào để làm cho jQuery hoạt động khác đi.
• Việc đính kèm các mục TH và TD trong thẻ DIV không hoạt động, một số tìm kiếm của Google sẽ bật đề xuất HTML becomes invalid khi sử dụng thẻ DIV trong cấu trúc TABLE.
• Đính kèm nội dung mục TH và TD trong thẻ DIV không hoạt động, nội dung bắt đầu nổi sau hoạt ảnh và không nằm trong các mục TH và TD.
• The same article cho biết rằng hoạt ảnh đóng mở của bảng hàng có thể sử dụng các phần TBODY trong bảng.

tôi đã thành công trong những gì tôi muốn mặc dù, và đây là cách:

• tôi cắt bàn thành nhiều tiểu bảng bao gồm các nhóm cột Tôi muốn hiển thị và ẩn
• tôi kèm theo những các bảng con trong các thẻ DIV và floated chúng bên cạnh nhau.
• Tôi đã sử dụng jQuery để hiển thị/ẩn các DIV này.

Tôi hy vọng điều này sẽ giúp mọi người, và nếu tìm thấy một giải pháp thanh lịch hơn, vui lòng để lại lời nhắn.

Answer 2

Mặc dù nó không có hiệu lực tương tự, các phương thức jQuery fadeIn() và fadeOut() hoạt động đúng trên các bảng. Các phương thức show() và hide() (không có hoạt ảnh) cũng hoạt động.

Answer 3

Chúc mừng kỷ niệm.

Thật lạ lùng làm sao mà tháng 1 có vẻ là hiệu ứng trượt bảng. Tôi cho rằng nó sẽ dễ dàng trở lại vào công việc này :) Nhưng tôi đã xoay xở để tạo ra một cách mà các cột làm sụp đổ hiệu ứng.

$(table).each(... 
    var columnNo = $(cell).index(); 
    $('div', cell).animate({ width: '0px' }, 'slow'); 
    $(cell).closest("table") 
     .find("tr td:nth-child(" + (columnNo + 1) + ") div") 
     .animate({ width: '0px' }, 'slow') 
...) 

Về cơ bản đây là giải pháp thay thế bằng cách sử dụng div. Tôi chọn mỗi cell "th" và sau đó tìm mọi ô khác trong cột đó. Và progressivlu nó giảm mỗi kích thước div pixel bằng cách sử dụng hình ảnh động. Bảng sẽ tính toán lại theo thông số HTML, vì không gian chiếm dụng đang thay đổi. Sau khi hoàn thành, bạn có thể ẩn cột để làm cho cột "biến mất"

Kịch bản để bao bọc mọi thứ trong div, như khi tải trang hoặc sau khi nhấp vào nút. Bạn có thể xóa div sau khi hoạt ảnh hoàn tất, trong trường hợp nó gây rối với việc gửi biểu mẫu của bạn hoặc các tập lệnh khác.

$('#Stupid_RadGrid th').each(function() { 
      $(this).wrapInner("<div></div>"); 
}); 
$('#Stupid_RadGrid td').each(function() { 
     $(this).wrapInner("<div></div>"); 
}); 

Tôi sẽ cập nhật khi tôi làm việc theo cả hai cách.

Answer 4

Giải pháp của tôi đang sử dụng lớp phủ div. Hoạt ảnh sẽ được thực hiện trên lớp phủ div này, trong khi phần tử bảng vẫn không bị ảnh hưởng.

Ở đây, demo.

JS:

$("div").css("width", $("table").width() + 10); //10px of margin 
$("div").css("height", $("table").height() + 10); //10px of margin 

$("#show").click(function(){ 
    $("div").animate({ 
     left: $("div").width() 
    }, function(){ 
    $("div").hide(); 
    }); 
}); 

$("#hide").click(function() { 
    $("div").show("fast", function(){ 
     $("div").animate({ left: "0px" }); 
    }); 
});