jquery mobile30 10. jQuery Mobile 툴바(헤더바) Index 08. jQuery Mobile 페이지(data-role="page") 09. jQuery Mobile 컨텐트 10. jQuery Mobile 툴바(헤더바) 11. jQuery Mobile 툴바(푸터바) 12. jQuery Mobile 툴바(내비게이션바) jQuery Mobile에서 툴바(Toolbar)는 컨텐트 영역과는 별개의 영역으로 페이지의 상단,하단에 위치하는 영역이다. 툴바에서 헤더바, 푸터바, 내비게이션바가 있다. 툴바는 제목, 버튼 등을 포함한다. 헤더바 헤더바는 페이지 상단에 위치하는 툴바다. 주로 페이지의 제목이나 페이지 내비게이션용 버튼들이 위치한다. 버튼은 좌우 두개의 버튼만 가능하다. 제목 Prev Next data-position="fixed" 속성을 추가하면 헤더바는 .. 2013. 12. 8. 09. jQuery Mobile 컨텐트 Index 07. jQuery Mobile 에서 페이지 트랜지션 08. jQuery Mobile 페이지(data-role="page") 09. jQuery Mobile 컨텐트 10. jQuery Mobile 툴바(헤더바) 11. jQuery Mobile 툴바(푸터바) jQuery Mobile 에서 컨텐트는 로 정의 된다. 컨텐트에는 데이터 및 jQuery Mobile 의 UI요소들이 배치된다. //jQuery Mobile 의 UI 요소들이 배치된다. 컨텐트 정의시에 사용할수 있는 data-* 속성은 다음과 같다. data-* 속성 설명 값 data-theme 컨텐트 테마 swatch letter(a-z) 관련글 jQuery Mobile 페이지(data-role="page") 2013. 12. 6. 08. jQuery Mobile 페이지(data-role="page") Index 06. 페이지간 이동에 태그 대신 jQuery Mobile에서 제공하는 $.mobile.changePage() 메소드 사용 07. jQuery Mobile 에서 페이지 트랜지션 08. jQuery Mobile 페이지(data-role="page") 09. jQuery Mobile 컨텐트 10. jQuery Mobile 툴바(헤더바) jQuery Mobile 에서 페이지는 로 정의 된다. //페이지를 구성하는 요소가 배치된다. 하나의 HTML 페이지는 하나 이상의 페이지를 포함할 수 있다. 두개 이상의 페이지가 하나의 HTML 파일 안에 포함되는 경우 첫번째 정의된 페이지가 첫번째 페이지가 된다. 사이트의 첫페이지에서 호출되는 외부페이지들은 하나의 HTML 파일 안에 하나의 페이지만 선어되어 있.. 2013. 12. 4. 06. 페이지간 이동에 <a>태그 대신 jQuery Mobile에서 제공하는 $.mobile.changePage() 메소드 사용 Index 4. jQuery Mobile 시작 HTML 파일과 다른 HTML 페이지간 호출 5. jQuery Mobile 의 단일 HTML 모델에 대한 이해 6. 페이지간 이동에 태그 대신 jQuery Mobile에서 제공하는 $.mobile.changePage() 메소드 사용 7. jQuery Mobile 에서 페이지 트랜지션 8. jQuery Mobile 페이지(data-role="page") jQuery Mobile 에서 페이지간 이동은 태그 말고 jQuery Mobile에서 제공하는 메소드인 $.mobile.changePage() 메소드를 이용할 수 있다. $.mobile.changePage() 메소드는 태그 안에서 사용된다. $.mobile.changePage( to [, options]) jQ.. 2013. 12. 1. 05. jQuery Mobile 의 단일 HTML 모델에 대한 이해 Index 3. jQuery Mobile 페이지를 구성하는 4가지 영역 4. jQuery Mobile 시작 HTML 파일과 다른 HTML 페이지간 호출 5. jQuery Mobile 의 단일 HTML 모델에 대한 이해 6. 페이지간 이동에 태그 대신 jQuery Mobile에서 제공하는 $.mobile.changePage() 메소드 사용 7. jQuery Mobile 에서 페이지 트랜지션 jQuery Mobile 은 단일 HTML 모델 방식을 사용해서 네이티브 앱과 비슷한 애니메이션 효과를 줌으로써 페이지 이동이 자연스럽게 이루어지도록 한다. 단일 HTML 모델은 모든 웹앱 페이지를 DOM안에 통합한 모델이다. jQuery Mobile 에서 페이지의 이동은 물리적 HTML파일 간의 이동이 아니라 DOM .. 2013. 11. 30. 04. jQuery Mobile 시작 HTML 파일과 다른 HTML 페이지간 호출 Index 2. jQuery Mobile 웹앱 파일의 기본 구조 3. jQuery Mobile 페이지를 구성하는 4가지 영역 4. jQuery Mobile 시작 HTML 파일과 다른 HTML 페이지간 호출 5. jQuery Mobile 의 단일 HTML 모델에 대한 이해 6. 페이지간 이동에 태그 대신 jQuery Mobile에서 제공하는 $.mobile.changePage() 메소드 사용 jQuery Mobile 은 시작 HTML 페이지에서 다른 HTML 페이지를 호출하면 호출된 페이지의 내용이 시작 HTML 에 자동으로 통합된다. 따라서, 뷰포트 설정, 바로가기 아이콘 설정, jQuery Mobile 라이브러리 로딩 설정은 시작 HTML 페이지에서만 작성하면 된다. 단, 이것이 가능하기 위해서는 다른.. 2013. 11. 29. 03. jQuery Mobile 페이지를 구성하는 4가지 영역 Index 1. jQuery Mobile ? 2. jQuery Mobile 웹앱 파일의 기본 구조 3. jQuery Mobile 페이지를 구성하는 4가지 영역 4. jQuery Mobile 시작 HTML 파일과 다른 HTML 페이지간 호출 5. jQuery Mobile 의 단일 HTML 모델에 대한 이해 jQuery Mobile 의 HTML 페이지는 페이지 영역, 헤더 영역, 컨텐트 영역, 푸터 영역 의 4개 영역으로 구성된다. 이 들 영역은 태그를 이용해서 정의하며 각 영역을 구분 하는 방법은 의 속성 data-role을 이용한다. ... ... ... data-role="page" : 페이지 영역. 헤더, 컨텐트, 푸터 영역을 포함하는 영역으로 HTML 안에는 하나 이상의 페이지 영역이 존재한다. d.. 2013. 11. 28. 이전 1 2 3 4 5 다음
