jquery mobile30 24. flip toggle 양식 Index 22. select 양식 23. checkbox, radio 버튼 양식 24. flip toggle 양식 25. mobileinit 이벤트 26. 페이지 로드 이벤트 플립 토글(Flip Toggle)은 한쪽으로 밀어서 선택하도록 하는 UI이다. 주로 on/off 와 같이 둘 중 하나를 선택하는 경우에 사용될 수 있다. jQuery Mobile은 태그에 data-role="slider" 속성을 추가해서 플립 토글 버튼을 만든다. 단, 이때 은 두개만 지정해야 한다. On/Off : OFF ON 에 사용할 수 있는 data-* 속성 data-* 속성 설명 값 data-theme 체크박스 테마 swatch letter (a-z) data-track-theme 트랙 테마 (off 테마) swatch .. 2013. 12. 28. 23. checkbox, radio 버튼 양식 Index 21. range 양식, slider 22. select 양식 23. checkbox, radio 버튼 양식 24. flip toggle 양식 25. mobileinit 이벤트 체크박스와 라디오버튼은 사용자의 선택을 입력받는 양식이다. jQuery Mobile은 두 양식 모두 태그로 감싸서 그룹화 시킨다. 그룹제목 : //체크박스 또는 라디오버튼 목록 체크박스 체크박스(checkbox)는 다중 선택이 가능하다. 스마트폰 : 갤럭시폰 아이폰 넥서스폰 스마트폰 : 갤럭시폰 아이폰 넥서스폰 라디오버튼 라디오버튼(radio button)은 단일 선택이 가능하다. 스마트폰 : 갤럭시폰 아이폰 넥서스폰 스마트폰 : 갤럭시폰 아이폰 넥서스폰 에 사용할 수 있는 data-* 속성 data-* 속성 설명 값 .. 2013. 12. 27. 22. select 양식 Index 20. HTML5 에서 추가된 폼 양식 21. range 양식, slider 22. select 양식 23. checkbox, radio 버튼 양식 24. flip toggle 양식 select 양식은 여러개의 항목 중에서 하나를 선택할 수 있는 UI이다. 태그를 사용해서 표현한다. 단순히 태그를 사용하면 각 모바일 기기에서 제공하는 입력 도구가 나오기 때문에 통일성이 없다. 모바일 기기에 상관없이 동일한 UI가 나오기를 원하면 data-native-menu="false" 속성을 추가한다. Select : iPhone 4 iPhone 5 iPhone 5S 태그에 사용할 수 있는 data-* 속성 data-* 속성 설명 값 data-icon 아이콘 지정 home | delete | plus | .. 2013. 12. 26. 21. range 양식, slider Index 19. jQuery Mobile 폼 양식 20. HTML5 에서 추가된 폼 양식 21. range 양식, slider 22. select 양식 23. checkbox, radio 버튼 양식 슬라이더는 볼륨 조절 장치처럼 좌우로 조절할 수 있는 UI이다. jQuery Mobile 은 range 양식을 슬라이더로 만들어 준다. 슬라이더의 min 속성은 최소값, max 속성은 최대값을 지정한다. 슬라이더 조절바의 색상은 date-theme="e" 속성 값을 조정해서, 트랙 색상은 data-track-theme="b" 속성을 조정해서 변경할 수 있다. Range : [영어회화] Keep an eye on this, will you? 이것좀 봐줘여, 그럴래요? 2013. 12. 25. 20. HTML5 에서 추가된 폼 양식 Index 18. 터치 이벤트 19. jQuery Mobile 폼 양식 20. HTML5 에서 추가된 폼 양식 21. range 양식, slider 22. select 양식 HTML5에서는 number, email, url, tel 같은 새로운 입력 양식이 추가되었다. jQuery Mobile에서도 새로 추가된 양식을 사용할 수 있다. number 양식 Number : number 양식은 숫자를 입력받는 경우 사용한다. min 속성은 입력받을 수 있는 최소값, max 속성은 입력받을 수 있는 최대값이다. 모바일 장치에서 number 양식이 선택되면 숫자를 입력할 수 있는 숫자 키보드가 나타난다. email 양식 Email : 모바일 장치에서 email 양식이 선택되면 이메일 주소를 입력할 수 있는 영문 .. 2013. 12. 23. 19. jQuery Mobile 폼 양식 Index 17. jQuery Mobile Collapsible 블록 18. 터치 이벤트 19. jQuery Mobile 폼 양식 20. HTML5 에서 추가된 폼 양식 21. range 양식, slider jQuery Mobile의 폼(form)양식은 표준 HTML 컨트롤에 기반을 둔다. jQuery Mobile은 표준 HTML폼 양식을 그대로 사용하면서 모바일 UI에 맞게 터치하기 편리한 형태로 최적화 한다. 필드 컨테이너 jQuery Mobile은 폼 양식을 정의할 때 각 양식의 간격을 유지하고 구분하기 위해서 라벨과 양식을 감싸는 태그를 제공한다. 필드 컨테이너는 폭이 좁으면 라벨을 양식의 위에 놓고 양식과 양식을 수평선으로 구분한다. Name : 필드 컨테이너 안에서 태그의 속성 for의 값과 .. 2013. 12. 22. 18. 터치 이벤트 Index 16. jQuery Mobile 그리드 레이아웃 17. jQuery Mobile Collapsible 블록 18. 터치 이벤트 19. jQuery Mobile 폼 양식 20. HTML5 에서 추가된 폼 양식 jQuery Mobile 은 손가락 터치와 관련된 이벤트를 제공한다. 이벤트 값 tap 화면을 손가락으로 툭 치면 발생한다 taphold 손가락으로 길게 누르고 있으면 발생한다 swipe 화면을 손가락으로 밀면 발생한다. 화면을 좌우로 전환시 사용 swipeleft 왼쪽 방향으로 swipe 할 때 발생한다 swiperight 오른쪽 방향으로 swipe 할 때 발생한다 $(function){ $("#eventDiv").bind("tap", function(event){ } $("#eventD.. 2013. 12. 21. 이전 1 2 3 4 5 다음
