본문 바로가기

jQuery

[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으로 지정되므로 따로 .. 더보기
[jQueryMobile] 레이아웃 구성하기 · jQuery Mobile을 사용하면 쉽게 레이아웃을 구성할 수 있다. · div 태그의 class 속성에 uigrid를 입력해 레이아웃을 구성한다. · ui-grida-a부터 ui-grida-d까지 입력이 가능하다. ■ ui-grid 클래스로 화면 나누기 ① 01. ui-grid-a를 사용해 레이아웃을 구성하면 내부 요소의 클래스에 ui-block-a와 ui-block-b를 입력해 위치를 지정한다. ui_grid_one.php Mobile ui-block-a ui-block-b FOOTER 02. 실행하면 이등분돼 div태그를출력하는데. ui-grid-a클래스는 화면을 이등분 한다는 의미이다. ui-grid-b는 화면을 3등분하며, ui-grid-c는 화면을 4등분 한다는 의미이다. ■ ui-bloc.. 더보기

티스토리툴바