스마트웹앱콘텐츠전문가/하이브리드웹

[6.3]다양한 위젯

9D4U 2016. 6. 3. 12:43
728x90
반응형

3.6 그리드(제이쿼리 모바일이 제공하는 정형화된 레이아웃 배치 기능)

3.7 아이콘 : 속성 data-icon = "" , 제이쿼리 모바일이 지원하는 아이콘 외에 사용자가 만든 아이콘을 등록하여 사용할 수 있음.=> 이미지를 만들고, css에 코드를 추가.

3.8 텍스트 입력상자 : 텍스트 입력상자는 부족한 키보드 입력환경에 맞추어 최적화된 화면을 보여줌. 텍스트 입력상자가 보여주는 여러 종류의 입력창 확인하기, 이것도 편리한 위젯형태로 제공함

(ex: input type="text", "search", "number", "date", "month", "week", "time"

3.9 체크박스 : 체크박스의 경우 선택 시 change이벤트가 적절함. 여러 항목을 동시에 선택, 체크박스에 텍스트를 붙이기 위해서 label을 사용. 동일한 형태의 엘리먼트가 많을 경우 $.each()를 이용하는 것이 유리

3.10 라디오 박스 : name으로 그룹이 구성됨, id는 원칙상 중복허용이 안되므로 그룹을 지을 수 없음.

3.11 슬라이더 : range라는 범위를 가진 위젯을 가리킴. 일정한 범위를 갖는 값을 좌,우로 스크롤하여 값을 설정할 수 있다. 적당한 이벤트로는 change이벤트가 있음.

3.12 범위 슬라이더 : 슬라이더의 확장된 위젯으로 두개의 위젯을 묶어 사용하는 형태, 하나의 기준점이 아닌 최소값과 최대값을 동시에 선택할 수 있도록 지원하는 위젯, <div data-role="rangeslider">

3.13 선택메뉴 : 여러 개의 항목 중 하나의 항목을 선택하기 위해 풀다운 형식으로 항목을 보여주는 위젯, <select id=""><option value=""></select>

3.14 커스텀 선택메뉴 : 선택메뉴의 확장판




cf. 4장 : 제이쿼리 모바일에서의 테이블???리스트가 확장된 형태

8장 : 테마롤러를 통한 아이콘의 색상 변경



하이브리드 웹 <--제이쿼리 + 폰갭, 코르도바, 센서터치



아이콘 이미지 : http://www.iconarchive.com/show/free-multimedia-icons-by-designbolts.html


==================================================



=====================================

cordova.zip


728x90

'스마트웹앱콘텐츠전문가 > 하이브리드웹' 카테고리의 다른 글

[6.8]페이지  (0) 2016.06.08
[6.7]고급위젯2 + 나만의 위젯만들기  (0) 2016.06.07
[6.2]위젯, 이벤트  (0) 2016.06.02