무선 리셋 컨트롤러

Javascript 없이 모든 HTML을 대화식으로 만들기

Javascript 없이 페이지의 어느 곳에서나 HTML 요소를 표시하거나 숨기거나 제어할 수 있습니다. 세 개의 태그와 한 줄의 CSS로 제어 버튼과 제어 요소를 어디에나 배치할 수 있습니다. 제어되는 쪽은 기본적으로 "선택된"숨겨진 라디오 버튼을 사용합니다. 해당 라디오 버튼은 ID로 빈<form> 태그에 연결됩니다. 이 양식에는 type="reset" 버튼과 함께 컨트롤러를 구성하는 또 다른 라디오 입력이 있습니다.

<!-- RRC Controller -->
<form id="rrc-form"></form>
<label>
  Show
  <input form="rrc-form" type="radio" name="rrc-group" />
</label>
<button type="reset" form="rrc-form">Hide</button>

<!-- Controlled by RRC -->
<input form="rrc-form" class="hidden" type="radio" name="rrc-group" checked />
<div class="controlled-rrc">Controlled from anywhere</div>

이것은 최소한의 구현을 보여줍니다. 숨겨진 라디오 버튼과 이 버튼이 제어하는 ​​div는 형제여야 하지만 해당 입력은 숨겨져 있어 사용자가 직접 조작할 필요가 없습니다. 기본값인 "checked"로 설정되고 다른 라디오 버튼으로 지워지며 양식 재설정 버튼으로 재설정됩니다.

input[name='rrc-group']:checked + .controlled-rrc {
  display: none;
}
.hidden {
  display: none;
}

이 작업을 수행하려면 두 줄의 CSS만 있으면 됩니다. :checked 의사 선택기는 숨겨진 입력을 제어하는 ​​형제에 연결합니다. CSS-Tricks: The Checkbox Hack에 의해 잘 요약된 유사한 기술이 있습니다. 이러한 예의 대부분은 형제 확인란과 직접 상호 작용해야 합니다. 이 버전은 그렇지 않습니다. 단일 토글로 스타일을 지정할 수 있는 라디오 입력 및 재설정 버튼을 추가합니다(아래 codepen 예제 참조).

그것을 제어하는 ​​버튼을 제어하는 ​​버튼과 분리할 수 있다는 것은 많은 가능성을 열어줍니다. "체크박스 해킹"으로 이를 수행하는 유일한 방법은 CSS 위치 지정을 사용하여 버튼을 다른 곳으로 시각적으로 이동하는 것입니다. 그것은 부서지기 쉽고 빨리 지저분해질 수 있습니다. 여기에서 두 부분은 동일한 라디오 버튼 그룹의 구성원이 되어 연결됩니다. 그들은 어디에나 배치할 수 있습니다.



하지만 이렇게 해야 할까요? 일반적으로 Javascript는 웹 페이지에 상호 작용을 추가하는 올바른 방법입니다. 이 방법이 모든 경우 또는 대부분의 경우에 사용되어야 한다고 제안하는 것은 아닙니다. 그러나 클라이언트 측 Javascript 없이 필요한 거의 모든 것을 수행할 수 있는 경우가 있습니다. 이 경우 필요한 기능을 추가하는 데 필요한 모든 것일 수 있습니다.

몇 가지 추가 고려 사항:

더 많은 재설정 버튼과 라디오 입력을 넣어 여러 위치에서 동일한 요소를 제어할 수 있습니다.

설정을 동일한 페이지에서 여러 번 복제하여 독립적으로 제어되는 요소를 가질 수 있습니다. 필요한 유일한 변경 사항은 첨부할 버튼 그룹에 대한 다른 양식 태그입니다. 다른 형식 ID에 연결되어 있는 한 라디오 그룹 입력에 대해 동일한 이름 속성을 사용할 수도 있습니다.

한 가지 제한 사항은 하나의 입력만 기본 "선택됨"으로 설정할 수 있기 때문에 제어된 라디오 버튼을 하나만 가질 수 있다는 것입니다. 숨겨진 입력이 동일한 여러 형제 또는 고인을 선택하여 각각을 제어할 수 있습니다.

거의 모든 섹션 또는 전체 페이지에 대해 CSS를 변경할 수 있습니다. 숨겨진 입력이 계층 구조에서 충분히 높게 배치되면 아래 항목에 대해 CSS를 설정할 수 있습니다.