본문 바로가기

data-role8

15. jQuery Mobile 리스트 Index 13. jQuery Mobile 공통 푸터바 14. jQuery Mobile 아이콘(data-icon, data-iconpos, 사용자 정의 아이콘) 15. jQuery Mobile 리스트 16. jQuery Mobile 그리드 레이아웃 17. jQuery Mobile Collapsible 블록 jQuery Mobile 은 HTML 목록 태그인 , 을 사용해서 리스트를 만든다. jQuery Mobile 에서 제공하는 리스트 형태 중에서 가장 기본적인 형태로서 로 정의한다. 리스트의 각 항목은 태그로 표현한다. list 0 list 1 list 2 list 3 list 4 list 5 리스트에 표시되는 항목 앞에 순차번호를 붙이기 위해서는 태그를 사용한다. list 0 list 1 list 2 .. 2013. 12. 16.
13. jQuery Mobile 공통 푸터바 Index 11. jQuery Mobile 툴바(푸터바) 12. jQuery Mobile 툴바(내비게이션바) 13. jQuery Mobile 공통 푸터바 14. jQuery Mobile 아이콘(data-icon, data-iconpos, 사용자 정의 아이콘) 15. jQuery Mobile 리스트 각 페이지의 푸터영역에 동일한 내비게이션바가 포함되는 경우에 각 페이지의 내비게이션바 선택 상태가 보관될 필요가 있다. 즉, A페이지에서 B페이지를 선택해서 넘어갔다가 Back 버튼으로 A페이지로 돌아오는 경우 A페이지에서 선택되었던 내비게이션바의 버튼이 선택된 상태가 유지되기를 원한다면 각 페이지에서 선택되어 있어야 하는 버튼에 class="ui-btn-active ui-state-persist" 속성을 추가.. 2013. 12. 14.
12. jQuery Mobile 툴바(내비게이션바) Index 10. jQuery Mobile 툴바(헤더바) 11. jQuery Mobile 툴바(푸터바) 12. jQuery Mobile 툴바(내비게이션바) 13. jQuery Mobile 공통 푸터바 14. jQuery Mobile 아이콘(data-icon, data-iconpos, 사용자 정의 아이콘) jQuery Mobile에서 툴바(Toolbar)는 컨텐트 영역과는 별개의 영역으로 페이지의 상단,하단에 위치하는 영역이다. 툴바에서 헤더바, 푸터바, 내비게이션바가 있다. 툴바는 제목, 버튼 등을 포함한다. 내비게이션바 내비게이션바는 두개 이상의 버튼을 수평으로 나열해서 하나의 탭바를 형성하는 UI 이다. 주로 헤더바나 푸터바 안에 위치하며 최대 5개까지의 버튼을 가질 수 있다. 버튼이 5개를 넘어가면.. 2013. 12. 12.
11. jQuery Mobile 툴바(푸터바) Index 09. jQuery Mobile 컨텐트 10. jQuery Mobile 툴바(헤더바) 11. jQuery Mobile 툴바(푸터바) 12. jQuery Mobile 툴바(내비게이션바) 13. jQuery Mobile 공통 푸터바 jQuery Mobile에서 툴바(Toolbar)는 컨텐트 영역과는 별개의 영역으로 페이지의 상단,하단에 위치하는 영역이다. 툴바에서 헤더바, 푸터바, 내비게이션바가 있다. 툴바는 제목, 버튼 등을 포함한다. 푸터바 푸터바는 페이지 하단에 위치하는 툴바다. 푸터바는 여러개의 버튼을 포함할 수 있다.(헤더바는 좌우 두개의 버튼만 가질 수 있다) //푸터 컨텐트가 위치 data-position="fixed" 속성을 추가하면 푸터바는 페이지 하단에 고정된다. 이 속성을 제거.. 2013. 12. 10.
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.
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.