JavaScript에서 Gmail과 유사한 폴딩 효과를 생성하는 방법

Question

Gmail이 특정 이메일 스레드에 폴딩 효과를 구현하기 위해 JavaScript를 사용한다고 가정합니다. 내가 말하고자하는 효과는 다음과 같습니다. 특정 전자 메일 스레드를 클릭하여 선택하면 최신 전자 메일 만 표시되고 모든 이전 전자 메일은 접힌 상태로 표시됩니다. 폴딩 섹션을 클릭 할 때만 확장되지만 확장 된 섹션 만 표시됩니다. 그런 다음 각 섹션을 클릭하면 전체 메시지를 읽을 수 있습니다. 어떻게이 일을 할 수 있습니까? 많은 감사합니다.

Answer 1

전 스레드의 메시지가 축소되어 메시지의 발신자 이름과 처음 몇 단어 만 표시되는 효과에 대해 이야기하고 있다고 가정합니다.

어떻게해야합니까? 읽지 않은 메시지가 아닌 모든 메시지의 경우 보낸 사람의 이름과 첫 번째 n 문자를로드하십시오. 각 행에 onclick 리스너가있는 테이블에 모든 이전 메시지를 표시하십시오. 행을 클릭하면 Ajax를 사용하여 서버에서 전체 메시지를 검색하고 잘린 메시지를 전체 메시지로 대체하십시오. 사용자가 행을 다시 클릭하면 첫 번째 n자를 제외한 전체 메시지를 숨 깁니다. Gmail의 경우, 읽지 않은 메일 및/또는 가장 최근의 메일은 이메일 스레드를 클릭하면 모두로드됩니다.

더 간단한 방법은 다음과 같습니다. 페이지가로드 될 때 전체 메시지를 모두로드하지만 행을 클릭 할 때까지 전체 메시지의 n자를 제외한 모든 메시지를 숨 깁니다. 이렇게하면 Ajax를 망치거나 화면 공간을 절약 할 필요가 없으므로 코딩이 더 쉬워집니다. 그러나 대역폭 사용량이 적어지면 다른 이점도 얻을 수 없습니다.

Answer 2

jQuery를 사용하면 자바 스크립트 및 jQuery에 대해 충분히 알고 있다면 멋진 시각 효과를 내기가 정말 간단합니다. toggle function이 효과를 낼 함수입니다.

accordion control of jQuery UI은 gmail이 스레드와 실제로하는 것과 유사합니다. 차이점은 아코디언을 사용하면 한 번에 하나의 섹션 만 열 수 있으며, Gmail에서는 한 번에 여러 메일을 열 수 있다는 점입니다.

그래서 아코디언 예제 아래 코드를 사용하는 것이 좋습니다.이 코드는 여러 섹션을 한꺼번에 열 수있게 해 주며, 아코디언 컨트롤 자체는 허용하지 않습니다.

jQuery(document).ready(function(){ 
    $('.accordion .head').click(function() { 
     $(this).next().toggle('slow'); 
     return false; 
    }).next().hide(); 
});