제이쿼리모바일 Radio buttons

제이쿼리모바일 Radio buttons


라디오 버튼은 단일 항목 만 선택할 수있는 옵션 목록을 제공하는 데 사용됩니다.

전통적인 데스크탑 라디오 버튼은 터치 입력에 최적화되어 있지 않으므로

jQuery Mobile label은 라디오 버튼에 대해 스타일 을 지정하므로 더 크고 클릭 할 수 있습니다.

추가적인 시각적 피드백을 제공하기 위해 사용자 정의 아이콘 세트가 레이블에 추가됩니다.

아래의 라디오 버튼은 표준 입력 / 레이블 마크 업을 사용하지만 좀 더 터치 친화적 인 스타일로되어 있습니다.

실제로 볼 수있는 스타일 컨트롤은 실제 요소 위에있는 레이블 요소이므로

이미지를로드하지 못하면 기능 컨트롤을 사용할 수 있습니다.

대부분의 브라우저에서 레이블을 클릭하면 자동으로 입력이 클릭되지만,

기본적으로 수행하지 않는 일부 모바일 브라우저의 경우 수동으로 업데이트를 실행해야합니다.

바탕 화면에서 이러한 컨트롤은 키보드 및 스크린 리더에 액세스 할 수 있습니다.

세로로 그룹화 된 라디오 버튼

라디오 버튼 세트를 작성하려면 type = "radio"속성 및 해당 레이블이있는 입력을 추가하십시오.

의미 적으로 연관되도록 입력의 ID와 일치하도록 레이블의 for 속성을 설정하십시오.

레이블 요소는 라디오 양식 요소 옆에 표시됩니다. 질문의 제목 역할을하는 범례가있는 fieldset 요소에 라디오 버튼을 줄 바꿈하십시오.

여러 라디오 버튼을 수직 그룹화 된 버튼 세트에 시각적으로

통합하기 위해 컨테이너에 data-role = "controlgroup"속성이있는 경우 프레임 워크는

버튼 사이의 모든 여백을 자동으로 제거하고 세트의 위쪽 및 아래쪽 모서리 만 둥글게 만듭니다.


<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked">
<label for="radio-choice-1">Cat</label>

<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2">
<label for="radio-choice-2">Dog</label>

<input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3">
<label for="radio-choice-3">Hamster</label>

<input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4">
<label for="radio-choice-4">Lizard</label>
</fieldset>