본문 바로가기

----- IT -----/jQuery Moblie66

jQuery Mobile - Theming toolbars 해더와 풋터는 페이지의 스타일의 중요한 역할을 하기 때문에 기본적으로 ‘a’ 테마가 적용될 것입니다. 다른 테마를 적용하기 원한다면 data-theme 속성에 원하는 테마를 a~e까지 셋팅하면 해당 테마가 적용됩니다 a테마 기본 예제입니다. Cancel Bar theme "a" Save 해더와 풋더에 각각 테마를 적용한 예제입니다. left right up down a테마 부터 e테마까지 위 예제를 이용해 변경해본 화면입니다. 각 태그 마다 개별 테마를 지정할 수도 있으니 이쁘게 꾸며 보세요^^ 2011. 5. 16.
jQuery Mobile - Persistent footer navbar 페이지의 풋터에 페이지가 이동되어도 유지되는 가로 네비게이션 바를 생성할 수 있습니다. 풋터의 다른 네비게이션 링크를 클릭하면 페이지가 이동되어지면서도 풋터는 고정되어있는 것을 볼 수 있습니다. 연관된 페이지들의 풋터는 같은 data-id 속성을 가지고 있기 때문에 새로운 페이지로 이동되어도 풋터가 고정됩니다. 고정 풋터의 페이지가 보여질때 활성화된 버튼이 남아 있도록 하고 싶다면 ui-btn-active와 ui-state-persist의 class를 추가하면 됩니다. Friends Albums Emails 네비바의 Friends를 클릭하면 페이지는 해당 링크를 따라 이동 되어지고, 네비바는 고정된 것 처럼 보이게 됩니다. 페이지 이동시 네비바에서 선택된 부분의 활성화를 위해서는 하드코딩을 하거나 스크립.. 2011. 5. 13.
jQuery Mobile - Fixed or Fullscreen toolbar Fixed toolbars “fixed” 해더와 풋터를 알아보겠습니다. 가식적인 스크롤 스크립팅 대신에 자연스런 스크롤을 사용할수록 더욱더 자연스러운 페이지 컨텐트의 흐름이 가능합니다. 해더와 풋터가 시야에서 사라지게 되면, 여러분은 화면은 터치하여 다시 보여지게 할 수 있습니다. 다시 화면을 터치하거나 페이지를 스크롤 하면 페이지 뒤로 사라질 것입니다. 이를 위해 툴바 컨테이너에 data-position=”fixed” 속성을 추가해 줍니다. Fixed toolbars 아래 처럼 페이지의 맨 위에 해더가 고정되어있고, 페이지의 맨 아래에 풋터가 고정되어 있습니다. 스크롤을 해보면 아직 브라우저별로 차이는 있겠지만 아래와 같이 해더와 풋터가 같이 움직입니다. 화면을 클릭 혹은 터치를 하게 되면 해더와 풋터.. 2011. 5. 13.
jQuery Mobile - navbar JQM은 보통 header나 footer 안에 존재하는 바에 옵션 아이콘 5개 버튼까지 제공하는데 유용한 기본적인 navbar 위젯을 가지고 있습니다. Navbar는 data-role=”navbar”를 가지는 컨테이너 엘리먼트로 감싸져 있는 링크들의 리스트로 코드화되어 있습니다. 엥커 태그에 class=”ui-btn-active” 속성을 추가 하면 링크들중 하나를 active(seleted) 상태로 셋팅하게 됩니다. 다음 예제는 footer내에 두개의 버튼으로 이루어진 navbar에서 “One” 버튼을 활성화 하였습니다. One Two Navbar의 아이템들은 균일하게 공간을 나누어 셋팅됩니다. 이 경우 브라우저의 가로길이의 반씩을 차지하게 됩니다. Navbar는 최대 5개의 아이템들을 수용할 수 있습니.. 2011. 5. 12.
jQuery Mobile - Footer bar Footer bar는 data-role이 footer 값인것 외에 header 와 같은 구문을 사용합니다. Footer content footer 툴바 역시 기본적으로 a 테마를 적용받으며, 쉽게 테마를 변경할 수 있습니다. 옵션 및 설정하는 개념이 header 와 매우 비슷합니다. 가장 큰 차이는 footer는 header보다 비교적 덜 구조적이며 유연하기에 왼쪽이나 오른쪽으로 자동 정렬을 하지 않습니다. Adding buttons Footer에 추가된 어느 링크나 버튼 마크업은 자동적으로 버튼 으로 변경되어 집니다. 공간 절약을 위해 문구와 아이콘의 길이만큼 inline 스타일을 셋팅합니다. 툴바의 이동버튼이나 위젯들 사이에는 어떤 패딩값도 없기 때문에 패딩을 적용하고 싶다면 class=”ui-bar.. 2011. 5. 12.
jQuery Mobile - Header bars Header structure 해더는 화면 가장 위에 나타나는 툴바입니다. 보통은 화면의 타이틀 문구와 왼쪽이나 오른쪽에 화면이동이나 어떤 행동을 하기 위한 버튼이 보여 질 수 있습니다. 타이틀 문구로는 일반적으로 태그를 사용합니다. 그러나 h1~h6까지 유연하게 사용도 가능합니다. 예를들어, 여러 페이지를 포함하는 화면에서 메인 페이지에는 H1를, 두번째 페이지에서는 H2를 사용합니다. 모든 해더레벨은 기본적인 태그별 스타일이 적용됩니다. Page Title Default header features 해더 툴바의 디폴트 테마는 검정색의 ‘a’ 테마이며, 사용자가 쉽게 테마 변경이 가능합니다. 그리고, 이전 페이지로 돌아가기 편리하도록 프레임웍에서 뒤로가기 버튼을 자동으로 만들어 줍니다. 만약 뒤로 가는.. 2011. 5. 11.
jQuery Mobile - Toolbar basic 툴바는 모바일 사이트와 어플리케이션에서 header와 footer 그리고 utility bars로 사용됩니다. Toolbar types 툴바에는 Header와 Footer의 두가지 타입이 있습니다. 1. 페이지 타이틀로 제공되는 Header bar는 보통 두개의 버튼을 가지며 페이지의 타이틀을 이루는 첫번째 요소입니다. 2. Footer bar는 페이지의 마지막에 오는 요소이며, 컨텐츠나 기능적인 면에서 Header보다 더 다양하게 사용됩니다. 두 타입에는 보통 가로의 네비게이션이나 탭 바가 놓여집니다. Toolbar positioning options Header와 Footer를 페이지에 위치시키는 방법에는 여러가지가 있습니다. 기본적으로 툴바는 “inline” 포지셔닝 모드르 사용합니다. 이 모드는 .. 2011. 5. 11.
jQuery Mobile - Theming pages 페이지에 스타일을 적용하기 위해서 JQM에서 제공하는 테마를 사용해 보겠습니다. 기본 테마는 a~e까지 5가지 스타일을 제공합니다. div태그를 추가하여 테마속성을 지정해도 되고, page 속성이 있는 태그에 테마속성을 지정해도 되지만, content 컨테이너에 data-theme 속성을 추가하여 테마를 지정하는 것이 좋습니다. a테마 적용 예: b테마 적용 예: c테마 적용 예: d테마 적용 예: e테마 적용 예: a테마와 e테마와 c테마를 혼용하여 사용하면 아래 화면 처럼 만들수 있습니다.^^ 2011. 5. 4.
jQuery Mobile - Link formats JQM은 모든 HTML link 를 지원합니다. 가능한 세련되게 경험을 만들기 위해, 같은 도메인의 페이지 링크들은 자동적으로 Ajax 요청으로 바뀌어 지며 프레임웍에 의해 페이지 전환 애니메이션이 보여집니다. 다른 도메인으로의 링크이거나 rel=”external”, data-ajax=”false” 혹은 target 속성은 Ajax로 로딩되지 않을 것입니다. 전체 화면이 새로고침 되어집니다. 만약, 하나의 HTML 문서안에 여러 페이지가 포함되어 있다면, 앵커와 같은 page ID를 참조로 링크됩니다. mailto: 와 tel: 과 같은 다른 형태의 모든 링크들은 프레임웍에 영향을 받지 않습니다. 먼저 JQM에서 지원하는 Ajax로 로딩되는 페이지 링크부터 보겠습니다. 동일 도메인의 다른페이지 동일 도메.. 2011. 5. 3.
jQuery Mobile - Ajax, hashes & history (이글은 http://jquerymobile.com/demos/1.0a4.1/#docs/pages/docs-navmodel.html 의 번역으로 오역이 있을수 있습니다.) jQuery Mobile’s navigation model JQM에서 페이지는 일반적으로 data-role속성 값이 page인 태그 안에 header, content, footer의 div태그로 이루어집니다. 페이지 로딩의 기본 흐름은 다음과 같습니다. HTTP request 요청을 받은 페이지는 이전 페이지의 DOM에 추가되어 집니다. DOM은 여러 페이지를 갖게 되며, 각 페이지는 data-url 속성의 링크를 통해 이동됩니다. URL이 처음 요청되어지면, 하나 혹은 여러 페이지가 응답될 것입니다. 그 중 가장 앞에 있는 페이지만 .. 2011. 5. 3.

티스토리툴바