[6.2]위젯, 이벤트

[위젯]

3.3 버튼

: 가장 대표적인 위젯.

-외형관리 : 메타태그 적용에 관여(data-enhanced="true"), 버튼의 모서리 모양(data-corners="true" or "false"), 제공하는 아이콘 사용(data-icon="home"

data-iconpos="top"or"bottom"or"left"or"right") + 텍스트 없는 아이콘만 출력할 경우 css 스타일 이용 가능(div class="ui-input-brn ui-icon-home ui-btn-icon-notext"></div>),

아이콘과 버튼은 그림자를 가질 수 있음(data-iconshadow="true" data-shadow="true"), 버튼의 길이를 inline 속성을 이용하여 텍스트의 길이에 맞게 조정가능(data-inline="true"),

버튼 디자인을 위한 기본적인 테마(data-theme="a"or"b"),버튼의 크기를 작게 설정(data-mini="true"), 버튼을 사용 못하도록 설정(disabled)

cf. 제이쿼리 모바일에서 제공하는 아이콘들 보기 : http://demos.jquerymobile.com/1.4.5/icons/

3.4 위젯을 이용하여 이벤트 다루어 보기(제이쿼리)

주의할 점은 mobileinit을 사용할 경우 index.html 에서 index.js 파일의 호출위치는 제이쿼리 프레임워크와 제이쿼리 모바일 프레임워크의 중간에 위치해야만 이벤트를 받을 수 있다.

반면, pageshow와 같은 이벤트는 여러 페이지일 경우 해당 페이지 안에서 호출되어야함.(7장에서 학습할 예정)

이벤트를 연결하기 위해서는  bind, on, delegate 또는 직접 이벤트 메소드를 사용 할 수 있다.

- click 이벤트를 부여하기

- 직접 이벤트 메소드를 이용: click 메소드 --- $("btnSend").click(function(){내용});

- click 이벤트 대신 bind 메소드를 사용가능 + on메소드를 이용하여 연결 가능 + tap이벤트를 이용하여 설정 가능

-그 밖에 가상의 마우스 움직임 또는 스와프 등의 이벤트를 제어할 수 있다. 터치 이벤트 제어는 10.7절에서 다시 살펴볼 예정

3.5 위젯 옵션 변경

옵션이란 data-icon 처럼 data-속성명 처럼 사용되는 형태의 속성을 말함.

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

[내용 구성]

[버튼]

[버튼이벤트]

[버튼 옵션]