본문 바로가기

JQM60

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.
jQuery Mobile - 다이얼로그 Dialog 앵커 링크에 data-rel=”dialog” 속성을 추가하면 링크로 호출되는 페이지를 대화상자(dialog) 형태로 표현할 수 있습니다. 대화상자 속성이 적용되면, 프레임웍은 둥그스런 모서리 스타일을 추가하고, 페이지 마진을 조정하고, 배경에 그림자 효과를 넣어 볼록하게 보여줍니다. 위의 링크 버튼에 아래와 같이 다이얼로그 속성을 추가하면 다음과 같이 페이지가 다이얼로그로 보여집니다. Open dialog 아래는 다이얼로그 속성이 없을때 일반 페이지입니다. 다이얼로그 속성 있을때와 비교해보세요. Transitions 기본적으로 다이얼로그는 ‘pop’ 효과로 페이지가 열리게 됩니다. 링크 태그에 다이얼로그 속성과 함께 data-transition 속성을 추가 하여 전환효과를 설정할수 있습니다... 2011. 5. 2.
jQuery Mobile - page transitions JQM 프레임웍에는 어떤 오브젝트나 페이지 변경 이벤트시 적용 가능한 6가지의 css기반 변경 효과가 포함되어 있습니다. 새로운 페이지 혹은 이전 페이지로 페이지 이동시에 기본적으로 오른쪽에서 왼쪽으로 페이지 전환효과가 적용됩니다. 이런 효과를 나타내기 위해서는 앵커 태그에 data-transition 속성을 추가 하여 적용할 수 있습니다. slide slideup slidedown pop fade flip 페이지 전환시의 기본 효과는 slide 입니다. 왼쪽에서 오른쪽으로 넘어가듯이 보여지는데요. 그외에 효과를 사용하려면 지정을 해주면 되는데 slideup을 사용하면 페이지가 아래에서 위쪽으로 올라가듯이 페이지가 전환됩니다. slidedown은 위에서 아래로 페이지가 전환되고, pop은 팝업창이 뜨듯이.. 2011. 5. 2.
jQuery Mobile - 이전페이지로 이전 페이지로 돌아가기 버튼 외부 혹은 내부 페이지의 링크를 클릭하여 이동하면 프레임웍에서 자동으로 해더부분 왼쪽에 back 버튼을 생성해 줍니다. 만약, 개발자가 back과 동일한 다른 버튼을 생성하고자 할 경우에는 data-rel 속성을 추가하여 사용합니다. 앵커 태그에 data-rel=”back” 속성을 사용하면 앵커 태그에 명시되어 있는 링크 경로는 무시되어지고 이전 페이지로 돌아갑니다. 표준화가 되지 않은 버전의 브라우저에서는 이 속성을 사용하더라도 디폴트 링크 경로로 페이지가 이동될 수 있으니 정확한 경로를 제공해야 합니다. 또한, 이전 페이지로 돌아가는 듯한 페이지 전환 효과만을 원한다면 data-direction =”reverse” 속성을 사용하면 됩니다. 위 처럼 사용하면 해당 링크를 클.. 2011. 4. 27.
jQuery Mobile - 외부, 내부 page 외부 페이지 링크. jQM은 Ajax 프로세스를 따르며, 기본적으로 페이지 내에 있는 외부 페이지의 링크를 클릭하게 되면 링크 경로에 대한 Ajax 요청을 하며, 로딩시에는 로딩 아이콘이 보여집니다. Ajax 요청이 성공할 경우 새로운 페이지의 content는 DOM에 추가가 되며, 모든 모바일 위젯들이 자동 초기화 되면서 새로운 페이지로 페이지 전환이 애니메이션으로 보여집니다 만약, Ajax 요청이 실패할 경우, 프레임웍은 페이지 흐름이 끊어지지 않도록 작은 오류 메시지를 띄어줄 것입니다. External Link page 링크를 클릭하면 아래 화면으로 갑니다. 페이지 이동시 전환 애니메이션을 볼 수 있습니다. 내부 페이지 링크 하나의 HTML 문서내에 page 속성을 가진 태그가 여러 개가 존재 할 .. 2011. 4. 23.
jQuery Mobile - 기본 page jQuery Mobile 프레임웍은 HTML5의 doctype에서 최적으로 지원 되며, 페이지 구조는 외부의 페이지나 내부의 페이지를 쉽게 지원 할 수 있도록 되어 있습니다. jQuery Mobile을 사용하기 위해서는 html 문서의 head 태그에 아래 3가지 파일을 참조해 주면 됩니다. 1. jQuery 자바스크립트 2. jQuery Mobile 자바스크립트 3. 모바일 테마 css 참조 파일은 직접 홈페이지에서 다운받아서 호스팅 하셔도 되고, 다운로드 : http://jquerymobile.com/download/ CDN 호스팅을 하고 있는 url을 사용하셔도 됩니다. 저는 CDN 방식을 사용해서 html 문서를 만들어 보겠습니다. 2011년 7월에는 beta버젼입니다. link 태그로 css 파.. 2011. 4. 22.
jQuery Mobile 이란? 유명한 자바스크립트 라이브러리인 jQuery로 부터 확장되어, 모바일 환경에 알맞으면서 사용자들이 쉽게 사용할 수 있도록 장점들을 모아 jQuery Mobile 라이브러리가 탄생했습니다. 현재 alpha 4.1 버젼까지 공개되어 있어 그 내용을 공부해 보려합니다. 정식 사이트 링크입니다. http://jquerymobile.com/ 아직 alpha 버젼이고, 브라우저들도 표준 작업이 진행중이라서, 각 브라우저들 마다 동작이나 효과에 조금씩 차이가 생기는 것 같습니다. 가장 안정적인 지원이 되는 브라우저는 사파리와 크롬 브라우저 입니다. 그래서 테스트 할때 이 두가지 브라우저를 주로 사용하겠습니다. 2011. 4. 22.

티스토리툴바