본문 바로가기

jQuery/jQueryMobile

[jQueryMobile] jQueryMobile의 초기화 이벤트 ■ mobileinit 를 이용한 이벤트 jQuery Mobile의 mobileinit 이벤트는 페이지가 형성될때 실행된다. 이때 주의할 점은 jQuery Mobile과 관련된 자바 스크립트 파일을 읽을 때 실행하는 이벤트이므로 mobileinit 이벤트가 실행된 이후에 jQueryMobile.js파일이 추가되어야 한다. 01. mobileinit 이벤트의 실행 방법은 아래와 같다. mobileinit_event.php MOBILE Hello Wicked FOOTER 02. 출력결과는 아래와 같다. ■ 뒤로가기 버튼 자동으로 생성하기 01. 일반적으로 mobileinit 이벤트가 발생할 때 mobile 페이지의 기본 설정을 바꾼다. 아래와 같이 뒤로 가기 버튼을 따로 입력하지 않고 자동으로 생성하여 사용.. 더보기
[jQueryMobile] 페이지 관련 이벤트 ■ jQuery Mobile 페이지 관련 이벤트 jQuery Mobile은 페이지 관련 이벤트가 제공된다. 이벤트가 굉장히 많으므로 어떤 순서로 실행하는지 아는것은 중요하다. 이벤트 이름 설 명 pagebeforecreate · 페이지를 생성하기 바로 전에 실행합니다. pagecreate · 페이지를 생성하고 실행합니다. pagebeforechange · 페이지를 이동하기 바로 전에 실행합니다. pagechange · 페이지를 이동하고 실행합니다. pagechangefailed · 페이지 이동이 실패했을 때 실행합니다. 01. 아래코드는 bind( ) 메서드를 사용해 pagebeforecreate, pagecreate, pagebeforechange, pagechange 이벤트를 연결한다. page_ev.. 더보기
[jQueryMobile] jQuery Mobile 테마 ■ jQuery Mobile 테마 01. 태그에 data-theme 속성을 지정하면 테마를 변경할 수 있다. 아래와 같이 page에 data-theme 속성을 적용하면 페이지 전체에 그 테마가 적용된다. thema_designation.php 홈 Mobile 설정 One Two TWICE 나연 정연 모모 사나 지효 미나 다현 채영 쯔위 FOOTER 02. 그럼 아래와 같이 페이지 색상이 변경되어 나오는 것을 확인 할 수 있다. ■ jQuery Mobile 테마 부분 적용하기. 01. 각 요소에 테마를 적용하고 변경하면서 사용할 수 있다. 아래코드처럼 data-theme 속성을 변경하면된다. thema_designation_custom.php 홈 Mobile 설정 One Two TWICE 나연 정연 모모 .. 더보기
[jQueryMobile] jQuery Mobile 탭 바 ■ jQuery Mobile 탭 바 01. 헤더나 푸터에 div 태그를 생성하고 data-role 속성을 navbar로 입력합니다. 이어서 해당 div 태그 안에 ul 태그로 리스트를 만들면, 탭 바가 생성된다. navigation_bar.php 홈 Mobile 설정 One Two Three Four Five TWICE 나연 정연 모모 사나 지효 미나 다현 채영 쯔위 1 2 3 4 5 02. 위코드를 실행한 결과를 보면 헤더와 푸터 영역에 탭바가 추가된 모습을 확인 할 수 있다. 03. 위 코드에서 6(SIX)번의 주석을 해제하며 아래와 같이 자동으로 행이 추가되 어 나오니 이점 유의해야 한다. ■ 탭 바에 icon 사용하고 활성화 표시 01. 탭 바 안에 들어 있는 버튼 하나하나에 data-icon 속.. 더보기
[jQueryMobile] jQuery Mobile 툴바 ■ jQuery Mobile 툴바 01. jQuery Mobile에서는 헤더와 푸터 부분을 합쳐서 툴바라고 한다. 헤더와 푸터에는 data-position 속성을 입력할 수 있는데 data-position 속성은 툴바의 위치와 형태를 지정한다. data-position 속성은 inline이나 fixed를 입력한다. data_position.php Mobile FOOTER 02. data-positinon속성을 fixed로 설정을 하면 헤더와 푸터 툴바의 위치가 화면 상단과 하단에 고정된다. 03. 아래 이미지는 data-position속성을 inline으로 지정하거나 혹은 data-position속성을 적용하지 않았을 경우이다. 기본적으로 data-position 속성은 inline으로 지정되므로 따로 .. 더보기