jquery mobile30 17. jQuery Mobile Collapsible 블록 Index 15. jQuery Mobile 리스트 16. jQuery Mobile 그리드 레이아웃 17. jQuery Mobile Collapsible 블록 18. 터치 이벤트 19. jQuery Mobile 폼 양식 jQuery Mobile Collapsible 블록은 해당 블록으로 감싼 컨텐츠 영역을 접었다 펼수 있다. Collapsible 블록은 컨텐츠를 감싸는 태그 안에 제목을 표시하는 태그와 나머지 부분이 내용이 된다. 태그가 여러개인 경우 가장 먼저 나오는 태그가 제목이 되고 나머지는 내용에 포함된다. 제목이 되는 태그는 내의 어디에든 올 수 있다. 즉, 나타나는 순서에 관계없이 첫번째 태그가 제목이 되고 나머지 요소는 표시된 순서대로 내용영역에 표시된다. 내용 영역에는 문자열, jQuery .. 2013. 12. 21. 16. jQuery Mobile 그리드 레이아웃 Index 14. jQuery Mobile 아이콘(data-icon, data-iconpos, 사용자 정의 아이콘) 15. jQuery Mobile 리스트 16. jQuery Mobile 그리드 레이아웃 17. jQuery Mobile Collapsible 블록 18. 터치 이벤트 jQuery Mobile의 그리드 레이아웃은 CSS 기반의 컬럼을 제공해서 그리드 레이아웃을 구성할 수 있도록 한다. 그리드 레이아웃은 한 행에 최대 5개의 컬럼을 제공한다. 그리드 레이아웃은 작은 사이즈의 컴포넌트를 페이지 상에 배치할 때 사용될 수 있다. 그리드 레이아웃을 그리는 방법은 그리드 외각을 결정하는 태그의 class 속성에 컬럼의 갯수에 따라 ui-grid-a, ui-grid-b, ui-grid-c, ui-gri.. 2013. 12. 18. 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. 14. jQuery Mobile 아이콘(data-icon, data-iconpos, 사용자 정의 아이콘) Index 12. jQuery Mobile 툴바(내비게이션바) 13. jQuery Mobile 공통 푸터바 14. jQuery Mobile 아이콘(data-icon, data-iconpos, 사용자 정의 아이콘) 15. jQuery Mobile 리스트 16. jQuery Mobile 그리드 레이아웃 jQuery Mobile에서는 기본적으로 18가지 아이콘을 제공한다. arrow-l arrow-r arrow-u delete plus arrow-d minus check gear forward back refresh grid star search alert info home 버튼 상에서 아이콘 위치는 data-iconpos="notext|left|right|top|bottom" 속성값을 이용한다. notext.. 2013. 12. 15. 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. 이전 1 2 3 4 5 다음
