본문 바로가기

javascript62

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.
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.

티스토리툴바