JS는 Repeater control_javascript 기술에 숨길 수 있는 영역을 생성하는 코드를 구현합니다.-JS 튜토리얼-php.cn

웹 애플리케이션의 규모가 계속 증가함에 따라 데이터가 점점 더 많아지고 때로는 한 페이지에 너무 많은 데이터가 동시에 표시되어 보기 흉한 페이지가 되어 사용자가 지루함을 느끼고 조작하기 어렵게 만드는 경우가 있습니다. 따라서 이 기사에서는 더 나은 데이터 표시 효과를 얻기 위해 리피터 컨트롤의 숨겨진 영역을 사용하는 방법을 소개합니다.

데이터 페이징을 사용하거나 각 데이터의 주요 내용을 먼저 표시하는 마스터/디테일 방식을 사용하는 등 과도한 데이터 로딩을 방지하는 방법이 많이 있으며, 세부 데이터의 경우 사용자는 클릭하시면 상세링크로 충분합니다. 이 기사에서는 데이터를 표시하는 또 다른 방법을 소개합니다. 사용자가 각 레코드의 자세한 설명을 확인해야 할 경우 다른 링크 창을 열 필요가 없으며 원본 데이터 레코드 바로 아래에 있는 방법을 사용합니다. 원래 숨겨진 데이터가 표시됩니다. 이러한 방식으로 사용자의 작업이 편리합니다. 먼저 실제 효과를 살펴보겠습니다(http://aspnet.4guysfromrolla.com/demos/collapsibleRepeater.aspx). 다음으로 리피터에서 그 효과를 구현하는 방법을 살펴보겠습니다.

위의 효과를 얻으려면 클라이언트 측 스크립팅 기술을 사용하여 특정 영역을 숨기거나 표시해야 합니다. IE 4.x 이후부터 이 기술을 구현할 수 있습니다. 예를 들어, 사용자가 클릭하면

태그 안의 내용이 동적으로 숨겨지고, 사용자가 마우스를 특정 영역으로 이동하면

태그 안의 내용이 표시될 수도 있습니다. 핵심은 표시 및 가시성 CSS 스타일 속성에 있습니다. 다음 코드는 사용자가 HIDE CONTENT 버튼을 클릭하면 원래 표시된 텍스트가 숨겨지고 사용자가 콘텐츠 표시를 클릭하면 원본 텍스트가 다시 표시됩니다.

코드 복사 코드는 다음과 같습니다.

아래의 해당 버튼을 클릭하면 이 텍스트가 표시되거나 숨겨집니다.
< /div>
　onclick="showHideContent(' someRegion', false);">

위 javscript 코드에서는 HTML 요소의 표시 및 가시성 속성을 최대한 활용하고 있으며, 이 두 속성은 동시에 사용해야 한다는 점에 유의해야 합니다. 먼저 버튼 버튼의 onclick 이벤트에서 커스텀 자바스크립트에 작성된 showhidecontent 함수가 호출됩니다. 이 함수에는 id와 show라는 두 개의 매개변수가 있습니다. 이 예에서는 숨겨진 영역을 표시하거나 숨깁니다. 숨겨진 영역은

태그 내의 텍스트이며 show는 영역을 숨길지 표시할지를 결정하는 부울 값입니다. showhidecontent 함수에서 표시 및 가시성 속성은 show 값에 따라 제어됩니다.

위 예제의 원리를 이해한 후, 이를 리피터 제어에 적용할 수 있습니다. 예를 들어 위의 방법을 사용하여 사용자가 묻고 싶어하는 많은 질문을 포함하는 FAQ를 만들려면 먼저 반복 컨트롤을 사용하여 사용자의 질문을 나열한 다음 사용자가 질문을 클릭하면 표시되고 숨겨집니다. 답변이 매우 편리합니다. Repeater의 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.