본문 바로가기
----- IT -----/jQuery Moblie

jQuery Mobile - API media, active state

by 대소니 2011. 7. 18.

알파 버전에서 있었던 Media Query Helper Classes는 beta 버전으로 오면서 사용이 중지 되었다고 합니다. CSS3를 사용해서 할 것을 추천한다고 되어있네요.

이 내용은 orientation과 breakpoint와 $.mobile.media()를 사용한 미디어 쿼리로 구성되어 있는데, 추천되어진 것처럼 CSS3로 충분히 구현 가능하니, 자세한 내용은 기술하지 않을 생각입니다. 관심 있으신 분은 아래 링크에서 보시면 될 것 같습니다.

http://jquerymobile.com/demos/1.0b1/docs/api/mediahelpers.html


Global Active state

jQuery Mobile 프레임워크는 어떤 요소가 선택되었을 때 active라고 불려지는 테마를 사용합니다. 기본적으로 파란색으로 보여지는데, 현재 선택된 것을 알려줄 필요가 있는 네비게이션과 폼 컨트롤에 적용하기 좋습니다. 이런 테마는 사용자의 피드백으로 명백하고 일관되도록 디자인된 것이라 마크업으로는 변경할 수 없고, ui-btn-active 스타일 룰에 알맞도록 테마 스타일시트에서 변경할 수 있습니다.

<fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain">
             <label for="radio-choice-a">On</label>
             <input type="radio" name=" radio-choice-a" id="radio-choice-a" value="on" checked="checked" />
             <label for="radio-choice-b">Off</label>
             <input type="radio" name=" radio-choice-a" id="radio-choice-b" value="off"  />
</fieldset>


댓글