분류 전체보기246 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. 이전 1 ··· 22 23 24 25 다음
